深入理解ajax

  在搭建自己的博客的时候，开始对于ajax不熟悉，所以写留言板时采用了直接通过按钮触发路由链接数据库来添加数据，这样可以实现留言板内容的添加，但是每次都会整个页面刷新，体验不好。在文章评论功能的时候，果断采用了ajax来post数据的方法，可以达到部分刷新的效果。

  ajax主要是通过创建一个xhr对象，xhr对象为向服务器发送请求并解析服务器响应提供了接口，以异步的方式从服务器获取了更多的信息。对使用者来说，就是不用刷新页面就能看到新添加的数据。

  xhr对象是XMLHttpRequest的缩写。创建xhr对象需要考虑兼容性。最早引入xhr对象的浏览器是IE5，通过MSXML库中的AciveX对象来实现的。IE7+的浏览器都支持原生的XHR对象。

创建xhr对象：

var xhr;

if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else{

xhr=new ActiveXObject('Microsoft.XMLHTTP');

}

发送请求

创建xhr对象后通过两个方法来发送请求。

open() open()接受3个参数，依次是请求的类型（'post'/'get'），请求的url，是否采用异步方式，true为异步方式。

send() send()方法接受一个参数，即作为请求主题发送的数据。

通常采用get类型时候，当要发送数据时候写在open的url里面，而使用post类型时，发送的数据写在send()方法里面，并且需要添加HTTP头:xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')。

接收响应

在接收到相应后，响应的数据会自动填充到xhr对象的属性。xhr的属性有以下4个。

responseText:作为响应主体被返回的文本，一般也是我们所需要的内容。

responseXML:如果响应的内容类型是"text/xml"或"application/xml"的时候，这个属性中将保存的xml dom类型的响应文档。

status:响应的HTTP状态。响应成功的时候一般是200。当为304的时候，表示请求的资源没有被修改，可以使用缓存的值。状态也可能是404之类的，就是找不到页面了，可查询了解其他相关值含义。

statusText:HTTP状态的说明。

异步

因为是异步响应，所以需要检测xhr对象的readyState属性，这个属性可以表示请求或响应的当前活动阶段。可取的值有5个：

0：未初始化，尚未调用open()方法。

1：启动，已经调用open()方法，尚未调用send()方法。

2：发送，已调用send()方法，且接收到头信息。

3：接收，已经接收到部分响应主题信息。

4：完成，已经接收到全部响应数据，可以在客户端使用了。这是我们需要使用时候的阶段。

当readyState属性发生变化时，就会触发readystatechange()事件。一般在open()之前指定onreadystatechange()事件处理程序才能保证跨浏览器兼容性，否则无法接收到readystate位0和1的情况。

通常写法是：

xhr.onreadystatechange=function(){

if(xhr.readyState==4 && xhr.status==200){

//执行代码。

}

}