原生ajax详解
Ajxa局部刷新用于提高用户体验。Ajax技术的核心是XMLHttpRequest对象（简称XHR）
- XMLHttpRequest对象
XMLHttpRequest对象在ie7及更高版本可以这样申明。
var xhr=new XMLHttpRequest();
- XHR的用法
发送get请求写法是这样：
xhr.open(“get”,”example”,false); xhr.send(null);
由于这次请求时同步的，JavaScript代码会等到服务器响应之后再继续执行，在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性如下：
- responseText：作为响应主体返回的文本。
- responseXML：如果响应的内容类型是”text/xml”或”application/xml”，这个属性中将保存包含着响应数据的XML DOM文档。
- status：响应的HTTP状态。
- 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属性，该属性表示请求/响应过程的当前活动阶段：
- 0：未初始化，未调用open方法。
- 1：启动，已经调用open方法，未调用send方法
- 2：发送，调用send方法，未接收到响应。
- 3：接收，已经接收到部分响应数据
- 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请求和响应都会带有相应的头部信息，头部信息有：
- Accept：浏览器能够处理的内容类型。
- Accept-Charset：浏览器能够现实的字符集。
- Accept-Encoding：浏览器能处理的压缩编码。
- Accept-Language：浏览器当前设置的语言。
- Connection：浏览器与服务器之间的连接类型。
- Cookie：当前页面设置的任何Cookie。
- Host：发出请求的页面所在的域
- Referer：发出请求的页面的URL。
- 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);
- 进度事件
- 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);
- 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);
