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或者不写

响应对象

1. responseText: 作为响应主体，被返回的文本。
2. responseXML: 如果相应内容类型为text/xml或application/xml，这个属性中将存着相应数据的XML DOM文档。
3. status: 响应的HTTP状态码。
4. statusText: HTTP状态的说明。
5. readyState: 表示请求和响应过程中，当前的活动阶段。有以下五个值：

0： 未初始化。尚未调用open()方法;
1：启动。已经调用open()，但尚未调用send()；
2：发送。已经调用send()，但尚未接受到相应；
3：接收。已经接收到部分响应数据；
4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

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