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

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

[TOC]

1. 创建XHR实例

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

2. 指定readyStatechange事件处理程序

请求/响应步骤： 启动请求->发送请求->接收部分数据->接收完整数据。用户通过检测XHR对象的.readyState属性来判断当前请求/响应阶段。 0：未启动请求 1：启动请求 2：发送请求 3：接收部分数据 4：接收完整数据每次.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请求/响应

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