AJAX --- 一种创建交互式网页应用的网页开发技术

AJAX

ajax核心技术就是 XMLHttpRequest 对象，简称XHR对象。这种客户端与服务器不刷新页面请求数据技术主要是利用XMLHttpRequest对象实现的，IE7 之前版本的浏览器是通过 ActiveXObject 对象实现的。

目录

• AJAX
  • 创建XHR实例
  • 指定readyStatechange事件处理程序
  • 启动请求
  • 发送请求
  • 接收数据
  • 取消XHR请求/响应

创建XHR实例

var xhr = (typeof XMLHttpRequest === "object") ? new XMLHttpRequest() : new ActiveXObject();

指定readyStatechange事件处理程序

• 请求/响应步骤： 启动请求 → 发送请求 → 接收部分数据 → 接收完整数据。
• 用户通过检测XHR对象的 .readyState 属性来判断当前请求/响应阶段。

XHR.readyState	说明
0	未启动请求
1	启动请求
2	发送请求
3	接收部分数据
4	接收完整数据

每次 .readyState 属性值发生变化都会触发一个 readyStatechange 事件，用户可以监听这个事件来判断数据是否接收完毕。

xhr.onreadyStatechange = function() {
    // xhr.readyState
};

启动请求

XHR对象的 .open( method, url, bool ) 方法是启动一个请求（注意：这里并没有发送请求！）。

参数	说明
method	请求方法（get、post...）
url	请求url
bool	是否异步发送

xhr.open( "get", "index.php", false );

发送请求

XHR对象的 .send( null ) 方法是正式发送请求。

xhr.send( null );

接收数据

当服务器响应请求后，响应的数据会自动填充 XHR 对象的属性中。

属性	说明
responseText	响应文本
responseXML	响应数据的XML DOM文档
status	响应HTTP状态
statusText	响应HTTP状态说明

// 建议判断status的状态码来确定下一步动作
xhr.onreadyStatechange = function() {
    if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ) {
        console.log( xhr.responseText );
    }
}

取消XHR请求/响应

• 通过XHR对象的 .abort() 方法来取消请求或者关闭响应。
• 终止请求之后， XHR 会停止触发事件，并且禁止访问与响应有关的属性。
• 终止请求之后，最好释放XHR引用，避免内存浪费。

xhr.abort();
xhr = null;