深入理解AJAX系列第一篇--XMLHttpRequest对象

1.AJAX的原理：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

2.AJAX的作用：在无需重新加载整个网页的情况下，能够更新部分网页，从而带来更好的用户体验。

3.AJAX的核心：XMLHttpRequest对象

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术， 但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。所以需要编写一个浏览器兼容的创建XHR对象的函数。

function createXHR(){

if( typeof XMLHttpRequest != "undefined" ){
return new XMLHttpRequest();
}else if( typeof ActiveXObject != "undefined" ){
if( typeof arguments.callee.activeXString != "string" ){
ver 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" );
}
}

4.XHR的用法

（1）发送请求

在使用XHR对象时，第一个要调用的第一个方法是open( )；它接受3个参数：

a: 要发送的请求类型（”get”、”post”）;

b:请求的URL（URL相对于执行代码的相对页面，可以为相对路径）；

c:是否异步发送请求的布尔值。

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

注意：调用open（）方法并不会真正发送请求，而是启动一个请求准备发送。

要发送特定的请求，就要调用send( )方法：

xhr.open( "get", "example.php", false );
send( null );

send（）方法接受一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送信息，则必须传入null，因为这个参数对于浏览器来说是必须的，调用send（）方法之后，请求就会分派到服务器。

（2）接收响应

在接收到响应之后，响应的数据会自动填充XHR对象的属性，相关属性介绍如下：

responseText: 作为响应主体被返回的文本；
responseXML: 如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档；
status: 响应的HTTP状态；
statusText: HTTP状态的说明；

在收到响应后第一步是检查响应状态，确保响应是否成功返回（状态为200），如果成功responseText和responseXML可以被访问，为了确保响应有效，我们可以这样检查状态码

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert('request was unsuccessful:' + xhr.status);
}

上面代码在发送同步请求的时候没问题，只有得到响应后才会执行检查status语句，但是在异步请求时，JavaScript会继续执行，不等生成响应就检查状态码，这样我们不能保证检查状态码语句是在得到响应后执行，这时候我们可以检查XHR对象的readyState属性，该属性表示请求/响应过程中的当前活动阶段。这个属性可取值如下：

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

只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。当为4的时候表示所有数据准备就绪。

[注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况；

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.php", true );
xhr.send( null );

我们也可以在接受响应之前调用abort方法取消异步请求：

xhr.abort( );

调用这个方法后，XHR会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。

5.XMLHttpRequest对象的运行周期

（1）创建一个XMLHttpRequest实例，然后用它来发送请求，这种请求可以是GET方式，也可以是POST；

（2）XMLHttpRequest发送后，服务器的响应何时到达、核实处理需要借助js的事件机制。XMLHttpRequest能触发的事件是onreadystatechange，

当XMLHttpRequest对象的状态改变是，将触发XMLHttpRequest对象指定的onreadystatechange事件（为其绑定回调函数）；

（3） readyState==4&&(xmlRequest.status==200||xmlRequest.status==304)时，可以开始处理服务器响应

（4） 触发回调函数；

（5）回调函数需借助XMLHttpRequest来解析服务器响应，当调用responseText或responseXML获取服务器响应后，XMLHttpRequest对象的运行周期结束；

（6） js处理服务器响应；