原生ajax详解

Ajxa局部刷新用于提高用户体验。Ajax技术的核心是XMLHttpRequest对象（简称XHR）

• XMLHttpRequest对象

XMLHttpRequest对象在ie7及更高版本可以这样申明。

var xhr=new XMLHttpRequest();

• XHR的用法

发送get请求写法是这样：

xhr.open(“get”,”example”,false);

xhr.send(null);

由于这次请求时同步的，JavaScript代码会等到服务器响应之后再继续执行，在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性如下：

1. responseText：作为响应主体返回的文本。
2. responseXML：如果响应的内容类型是”text/xml”或”application/xml”，这个属性中将保存包含着响应数据的XML DOM文档。
3. status：响应的HTTP状态。
4. statusText：HTTP状态的说明。

在接收到响应后，第一步是检查status属性，以确定响应已经成功返回，为确保接收到适当的相应，应该像下面这样写：

xhr.open(“get”,”example.txt”,false);

xhr.send(null);

if((xhr.status>=200&&xhr.status<300)||xhr.status==304){

   alert(xhr.responseText);

}else{

alert(“Request was unsuccessful:”+xhr.status);

}

很多情况下，我们还是要发送异步请求，才能让JavaScript继续执行而不必等待响应，此时，可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段：

1. 0：未初始化，未调用open方法。
2. 1：启动，已经调用open方法，未调用send方法
3. 2：发送，调用send方法，未接收到响应。
4. 3：接收，已经接收到部分响应数据
5. 4：完成

只要readyState属性的值右一个值变成另一个值，都会触发一次readystatechange事件，可以利用这个事件来检测每次状态变化后的readyState的值，通常我们只对readyState值为4的阶段感兴趣，不过必须在调用open之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。代码如下：

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”,”sxample”,true);

xhr.send(null);

以上代码利用DOM0级方法为XHR对象添加了事件处理程序，原因是并非所有浏览器都支持DOM2级方法，与其他事件处理程序不同，这里没有向onreadystatechange事件处理程序中传递event对象；必须通过XHR对象本身确定下一步该怎么做。

在接收到响应之前还可以调用abort()方法来取消异步请求，如下：

xhr.abort();

调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性，在终止请求之后，还应该对XHR对象进行解引用操作，不建议重用XHR对象。

•  HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息，头部信息有：

1. Accept：浏览器能够处理的内容类型。
2. Accept-Charset：浏览器能够现实的字符集。
3. Accept-Encoding：浏览器能处理的压缩编码。
4. Accept-Language：浏览器当前设置的语言。
5. Connection：浏览器与服务器之间的连接类型。
6. Cookie：当前页面设置的任何Cookie。
7. Host：发出请求的页面所在的域
8. Referer：发出请求的页面的URL。
9. User-Agent：浏览器的用户带来字符串。

虽然不同浏览器实际发送的头部信息会有所不同，但以上列出的基本上是所有浏览器都会发送的，使用setRequestHeader方法可以设置自定义的请求头部信息，这个方法接受两个参数：头部字段的名称和头部字段的值。如：

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.setRequestHeader(“MyHeader”,”MyValue”);

xhr.send(null);

调用XHR对象的getResponseHeader方法并传入头部字段名称，可以取得相应的响应头部信息，而调用getAllResponseHeaders方法则可以取得一个包含所有头部信息的长字符串。

• Get请求

Get是最常见的请求类型，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器，使用get请求经常会发送的一个错误就是查询字符串的格式问题，查询字符串中的每个参数名和值都必须使用encodeURIComponent进行编码，然后在放到URL的末尾，而且所有名-值对都必须由&分隔。

• POST请求

使用频率仅次于get，post请求应该把数据作为请求的主体提交，可以包含非常多的数据，而且格式不限，用过ajax来提交表单要先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型。代码如下：

function submitData(){

  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(xhr.responseText);

}

}

}

};

xhr.open(“post”,postexample.php,true);

xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

var form=focument.getElementById(“user-info”);

xhr.send(serialize(form));

• XMLHttpRequest 2级：FormData

FormData为序列化表单以及创建与表单格式相同的数据提供了便利。

var data=new FormData();

data.append(“name”,”Nicholas”);

var data=new FormData(doucument.forms[0])

• 超时设定

表示请求在等待响应多少毫秒之后就终止，在给定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件出来程序，代码如下：

 var xhr=createXHR();

xhr.onreadystatechange=function(){

  if(xhr.readyState==4){

   try{

      if((xhr.status>=200&&xhr.status<300)||xhr.status==304){

 alert(xhr.responseText);

}else{

alert(“Request was unsuccessful:”+xhr.status);

}

}catch(ex){

 

}

}

}

xhr.open(“get”,”timeout.php”,true);

xhr.timeout=1000;

xhr.ontimeout=function(){

  alert(“Request did not return in a second”);

};

xhr.send(null);

• overrideMineType方法

用于重写XHR响应的MIME类型，因为返回响应的MIME类型决定了XHR对象如何处理它，所以提供一种方法能够重写服务器返回的MIME类型是很有用的。例如：

var xhr=createXHR();

xhr.open(“get”,”text.php”,true);

xhr.overrideMineType(“text/xml”);

xhr.send(null);

• 进度事件

1. load事件

响应接收完毕后将触发load事件，因此也就没有必要去检查readystate属性了，而onload事件处理程序会接收到一个event对象，其target属性就指向xht对象实例。单并非所有浏览器都为这个事件实现了适当的事件对象。

var xhr=createXHR();

xhr.onload=function(){

  if((xhr.status>=200&&xhr.status<300)||xhr.status==304){

   alert(xhr.responseText);

}else{

  alert(“request was unsuccessful:”+xhr.status);

}

};

xhr.open(“get”,”alrevents.php”,true);

xhr.send(null);

1. progress事件

这个事件会在浏览器接收新数据期间周期性的触发，而onprogress事件处理程序会接收一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、position和totalSize。LengthComputable是一个表示进度信息是否可用的布尔值，position表示已经接收的字节数，totalSize表示根据Content-Length响应头部确定的预期字节数。

var xhr=createXHR();

xhr.onload=function(event){

  if((xhr.status>=200&&xhr.status<300)||xhr.status==304){

     alert(xhr.responseText);

}else{

  alert(“Request wa unsuccessful:”+xhr.status);

}

};

xhr.onprogress-function(event){

  var divStatus=document.getElementById(“status”);

   if(event.lengthComputable){

   if(event.lengthComputable){

    divStatus.innerHTML=”Received ”+event.position+” of ”+event.totalSize+”bytes”;

}

}

};

xhr.open(“get”,”altevents.php”,true);

xhr.send(null);