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

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

[TOC]

1. 创建XHR实例

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

2. 指定readyStatechange事件处理程序

1. 请求/响应步骤： 启动请求->发送请求->接收部分数据->接收完整数据。
2. 用户通过检测XHR对象的.readyState属性来判断当前请求/响应阶段。
   0：未启动请求
1：启动请求
2：发送请求
3：接收部分数据
4：接收完整数据
3. 每次.readyState属性值发生变化都会触发一个readyStatechange事件，用户可以监听这个事件来判断数据是否接收完毕。

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

3. 启动请求

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

method： 请求方法。"get"、"post"等。
url： 请求页面url。
bool： 是否异步发送。true：异步；false：同步

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

4. 发送请求

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

xhr.send( null );

5. 接收数据

当服务器响应请求后，响应的数据会自动填充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 );
    }
}

6. 取消XHR请求/响应

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

xhr.abort();
xhr = null;