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));
