Javascript Ajax
Ajax是对Asynchronous JavaScript +XML的简写，旨在异步向服务器请求数据，无需卸载页面，以达到更好的用户体验。
Ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR对象是由微软引入的一个特性，其他浏览器相继提供相同的实现。XHR对象为向服务器发送请求和解析服务器响应提供了流畅的接口。
IE5是第一款引入XMLHttpRequest对象的浏览器，在IE5中，XHR对象是由MSXML库中的一个ActiveX对象实现的，分别有三种版本：MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。
一、创建XHR
- IE7之前的版本
function createXHR(){
if(typeof arguments.callee.activeXString != "string"){
var version = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
i,len;
for(i=1,len=version.length;i<len;i++){
try{
new ActiveXObject(version[i]);
arguments.callee.activeXString = version[i];
break;
}
catch(ex){
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
该函数中的activeXString只是createXHR对象的一个自定义属性，在该函数中只有两个类型的值，null或string，当activeXString未被赋值，这个函数会尽力根据IE中可用的MSXML库的情况创建最新的XHR对象。若activeXString已被赋值，则直接创建activeXString字符串中存放版本的ActiveXObject对象。
- IE7+、Firefox、Opera、Chrome和Safari
var xhr = new XMLHttpRequest()
- 兼容各个版本的各种浏览器
function createXHR(){
//检测原生XHR对象是否存在，如果存在刚返回它的新实例；
//如果不存在，则检测ActiveX对象;
//如果两个都不存在，就抛出一个错误。
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
//适合IE7之前的版本
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML.XMLHttp"];
for(var i=0,len=versions.length; i<len; i++){
try{
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
}catch (ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object available.");
};
}
此时var xhr = createXHR()即可创建XHR对象。
二、初始化XMLHttpRequest对象
在创建XHR对象后，需要使用open()方法初始化XMLHttpRequest对象，试例如下：
xhr.open("get","example",false);
由例子可知，该方法接收三个参数，分别为：
- 要发送请求的类型（“get”、“post”等）
- 请求的URL
- 表示是否异步发送请求的布尔值
其中第二个参数URL是相对与执行代码的当前页面，调用open()方法并不是真正的发送请求，只是启动一个请求以备发送。第三个参数在默认情况下，是异步进行的。
三、设置回调函数
因为要做异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。当readyState值被改变时，会激发一个onreadystatechange属性来注册该回调函数处理器，代码如下：
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对象的readyState属性表示请求/响应过程的当前活动阶段。可取值如下：
0：未初始化。尚未调用open()方法。
1：启动。已经调用open()方法，但尚未调用send()方法。
2：发送。已经调用send()方法，但尚未接收到响应。
3：接收。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
只要readyState属性的值由一个值变为另一个值，都会触发一次onreadystatechange事件。
四、发送请求
xhr.send(null);
这里的send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对某些浏览器是必需的。调用send()方法后，请求就会被分派到服务器。
在收到响应，响应的数据会自动填充XHR对象的属性，相关属性如下：
- responseText：作为响应主体被返回的文本。
- responseXML：如果响应的内容类型是“text/xml”或“application/xml”，这个属性将保存包含着响应数据的XML DOM文档。
- status：响应的Http状态。
- statusText：Http状态说明。
Http状态在后续的文档详细讲解。
五、取消请求
在接收到响应之前可以调用abort()方法来取消起步请求。
xhr.abort();
