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

响应对象

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

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

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

推荐阅读更多精彩内容