ajax17,Ajax异步请求[17.7.10]

Ajax异步请求

Ajax全称为Asynchronous Javascript and XML。通过Ajax实现了不刷新页面，更新局部视图的功能。

1. XMLHttpRequest对象

// 原生写法，不考虑兼容性

var xhr = new XMLHttpRequest();

如果要考虑兼容IE6，可以使用下面的createXHR函数：

function createXHR () {

if (typeof XMLHttpRequest !== "undefined") {

return new XMLHttpRequest();

} else if (typeof ActiveXObject != "undefined") {

if (typeof arguments.callee.activeXString != "string") {

var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len;

for (i = 0, len = versions.length; i < len; i++) {

try {

new ActiveXObject(versions[i]);

arguments.callee.activeXString = versions[i];

break;

} catch (ex) {

// 跳过

}

}

}

return new ActiveXObject(arguments.callee.activeXString);

} else {

throw new Error("No XHR object available");

}

}

2.XHR的用法

open方法

创建XMLHttpRequest对象完成后，需要通过open方法启动请求。见下栗：

xhr.open("get", "example.txt", false);

// open接受三个参数，分别为：

// 1.请求的方法

// 2.请求的路径

// 3.是否使用异步的布尔值

send方法

启动请求完成后，需要发送请求，通过send方法：

xhr.send(null);

// send 方法接受一个参数：

// 你要发送给服务器的数据

// 使用get方法时，传入null或者不写

响应对象

responseText: 作为响应主体，被返回的文本。

responseXML: 如果相应内容类型为text/xml或application/xml，这个属性中将存着相应数据的XML DOM文档。

status: 响应的HTTP状态码。

statusText: HTTP状态的说明。

readyState: 表示请求和响应过程中，当前的活动阶段。有以下五个值：

0： 未初始化。尚未调用open()方法;

1：启动。已经调用open()，但尚未调用send()；

2：发送。已经调用send()，但尚未接受到相应；

3：接收。已经接收到部分响应数据；

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

onreadystatechange: readyState的值发生改变，就会触发一个该事件。举个栗子：

var xhr = createXHR();

xhr.onreadystatechange = function () {

if (xhr.readyState === 4) {

if ((xhr.status >= 200 && xhr.status < 300 || xhr.status === 304)) {

alert(xhr.responseText);

} else {

alert("Request was unsuccessful: " + xhr.status);

}

}

};

xhr.open("get", 'example.txt', true);

xhr.send(null);

3.XMLHttpRequest 2级

FormData表单数据的序列化

通过此构造函数，可以为序列化表单以及创建与表单格式相同的数据(用于XHR传输)提供了便利。使用方法如下：

// 第一种方法：直接append添加数据

var data = new FormData();

data.append("name", "Jerry"); //接受两个参数：键，值

// 第二种方法：通过构造函数传入form对象

var data = new FormData(document.forms[0]);

// 通过send()发送FormData数据

xhr.send(new FormData(form));