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);

　　由例子可知，该方法接收三个参数，分别为：

1. 要发送请求的类型（“get”、“post”等）
2. 请求的URL
3. 表示是否异步发送请求的布尔值

　　其中第二个参数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();