原始XMLHttpRequest方法详情回顾
用一个典型的登录验证的例子来演示吧
一般来说，使用XMLHttpRequest对象来进行登陆验证要经过以下这几个步骤
var userName = document.getElementById("userName").value;
2.创建XMLHttpRequest对象，这一步比较复杂，主要原因是要考虑浏览器的兼容性问题。
代码如下:
if (window.XMLHttpRequest) {
//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6，IE5.5，IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
3.注册XMLHttpRequest对象的回调函数，注册回调函数时，之需要函数名，不要加括号。
代码如下:
//注册回调函数时，之需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
xmlhttp.onreadystatechange = callback;
//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
xmlhttp.send(null);
6.（POST）方式，需要自己设置http的请求头，并且由于要进行编码，所以不能直接在XHR.open的第二个参数中将数据发过去，而应该用send()方法将数据传送过去
代码如下:
//POST方式请求的代码
//xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name=" + userName);
//回调函数
function callback() {
//alert(xmlhttp.readyState);
//5。接收响应数据
//判断对象的状态是交互完成
if (xmlhttp.readyState == 4) {
//判断http的交互是否成功
if (xmlhttp.status == 200) {
//获取服务漆器端返回的数据
//获取服务器段输出的纯文本数据
var responseText = xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseText;
} else {
alert("出错了！！！");
}
}
}
相关推荐
-
AJAX在不同浏览器中XMLHttpRequest对象的生成示例
复制代码 代码如下: <script type="text/javascript"> function ajax() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
-
XMLHttpRequest处理xml格式的返回数据(示例代码)
示例代码: 复制代码 代码如下: //回调函数function callback() { //alert(xmlhttp.readyState); //5.接收响应数据 //判断对象的状态是交互完成 if (xmlhttp.readyState == 4) { //判断http的交互是否成功 if (xmlhttp.status == 200) { //使用responseXML的方式来接收XML数据对象的DOM对象
-
AJAX(XMLHttpRequest.status)状态码
下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持. timeout Number 设置请求超时时间(毫秒).此设置将覆盖全局设置. async
-
浅析XMLHttpRequest的缓存问题
在使用XMLHttpRequest中有没有遇到过,第一次使用是好的,刷新一下就不行了,清空一下缓存再刷新又好了. 这是在使用XMLHttpRequest中常遇到的一个问题,在有的时候XMLHttpRequest请求的结果会缓存在同一个URL中,如果你请求之后的响应不同,就会产生一些莫名其妙的问题,当然也包括文章一开始那个呵呵. 解决方法:知道了原理就简单了,也就是每次请求的URL不同,让它每次都去服务器端请求,而不是使用缓存.下面有两种自己常用的方法: 第一种方法是加时间戳var url = B
-
原始XMLHttpRequest方法详情回顾
用一个典型的登录验证的例子来演示吧 一般来说,使用XMLHttpRequest对象来进行登陆验证要经过以下这几个步骤 1.使用DOM方式获得输入框中的值 复制代码 代码如下: var userName = document.getElementById("userName").value; 2.创建XMLHttpRequest对象,这一步比较复杂,主要原因是要考虑浏览器的兼容性问题. 复制代码 代码如下: if (window.XMLHttpRequest
-
在JavaScript实例对象中改写原型方法详情
目录 在JavaScript中,我们通常可以像下面的代码这样来简单地定义一个类: var sample = function() { // constructor code here } sample.prototype.func1 = function() { // func1 code here } sample.prototype.func2 = function() { // func2 code here } /* more sample prototype functions her
-
Go语言中的字符串拼接方法详情
目录 1.string类型 2.strings包 2.1 strings.Builder类型 2.2 strings.Reader类型 3.bytes.Buffer 3.1 bytes.Buffer:写数据 3.2 bytes.Buffer:读数据 4.字符串拼接 4.1 直接相加 4.2strings.Builder 4.3 strings.Join() 4.4 bytes.Buffer 4.5 append方法 4.6 fmt.Sprintf 5.字符串拼接性能测试 1.string类型 s
-
Golang通脉方法详情
目录 方法和接收者 指针类型的接收者 值类型的接收者 方法和函数 任意类型添加方法 方法继承 方法重写 结构体和方法补充 方法和接收者 Go语言中的方法(Method)是一种作用于特定类型变量的函数.这种特定类型变量叫做接收者(Receiver).接收者的概念就类似于其他语言中的this或者 self. Go 语言中同时有函数和方法.一个方法就是一个包含了接受者的函数,接受者可以是命名类型或者结构体类型的一个值或者是一个指针.所有给定类型的方法属于该类型的方法集 方法只是一个函数,它带有一个特殊
-
Vue中使用 class 类样式的方法详情
在vue中为我们提供了 几种方式来使用class类的样式 1. 布尔值 我们先正常在 style 标签中 书写一个类名为 active的样式 <style> .active{ color: red; font-size: 20px; font-style: normal; } </style> 在我们的 script 标签中创建一个 vm 实例,在实例的 data 数据中心写上 isActive:true , true 表示使用此样式,false 则表示不使用 <script
-
python中__init__()方法详情
目录 python类中定义的函数称为方法, init ()方法本质也是一个函数.这个函数的作用是初始化实例后的对象. 具体如下例: init()方法的作用是初始化实例后的对象cqueue. class CQueue: 类中的函数称为方法 ,这里的__init__()方法在类实例化是被自动调用.若类定义了__init__()方法,类的实例化操作会自动调用__init__方法. __init__方法可以有参数,参数通过__init__()传递到类的实例化操作上.self代表的是类的实例,而非类. 类
-
vue中Promise的使用方法详情
目录 一.使用 1.promise是一种异步解决方案 2.asyncawait 简介: promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果是一个请求回来的数据还要被其他请求调用,不断地嵌套,可想而知,代码看起来是很乱的,promise主要是为了解决这种情景而出现的. 一.使用 1.promise是一种异步解决方案 由于ajax异步方式请求数据时,我们不能知道数据具体回来的事件,所以过去只能将一个callback函数传递给ajax封装的方法,当aj
-
C++自定义数据类型方法详情
目录 1.typedef声明 2.枚举类型enum 1.typedef声明 typedef用于给已有的类型一个新的名字,这个新的名字可以是自己定义的, 其语法为: typedef 现有类型 多个新的类型名称 中现有类型应该是已经定义好的类型,多个新的类型名称表示可以把这个现有的类型多个新的名字,比如下面给int类型两个新的名字,分别为IntDataX和IntDataY,并使用新的名字定义变量x和y: typedef int IntDataX, IntDataY; IntDataX x = 10;
-
Vue插件使用方法详情分享
目录 一.应用场景 二.使用方法 1.使用自定义插件 2.使用第三方插件[elementUI] 一.应用场景 为vue添加全局功能,比如添加全局的方法和属性.混入全局组件.添加全局资源(指令.过滤器.过渡等).添加第三方的类库(element-ui等) 二.使用方法 1.使用自定义插件 <1>.创建js文件 export default { install(Vue) { // 自定义全局过滤器(截取前四位A) Vue.filter('m
-
Golang通脉之方法详情
目录 方法和接收者 指针类型的接收者 值类型的接收者 方法和函数 任意类型添加方法 方法继承 方法重写 结构体和方法补充 方法和接收者 Go语言中的方法(Method)是一种作用于特定类型变量的函数.这种特定类型变量叫做接收者(Receiver).接收者的概念就类似于其他语言中的this或者 self. Go 语言中同时有函数和方法.一个方法就是一个包含了接受者的函数,接受者可以是命名类型或者结构体类型的一个值或者是一个指针.所有给定类型的方法属于该类型的方法集 方法只是一个函数,它带有一个特殊