Ajax的核心技術是XMLHttpRequest對象,它可以在不向服務器提交整個頁面的情況下，實現局部更新網頁。通過這個對象，Ajax可以像桌面應用程序那樣只與服務器進行數據層的交換，而不必每次都刷新界面，也不必每次將數據處理的工作都交給服務器來做。這樣既減輕了服務器負擔又提高了響應速度，還縮短了用戶的等待時間。通常一個Ajax的實現過程有五步，下面我們以上篇博客中的小實例為例來逐步學習。

1.建立XMLHttpRequest對象。

IE瀏覽器將XMLHttpRequest實現為一個ActiveX對象，其他瀏覽器如Firefox，Opera，Netscape等將其實現為一個本地javascript對象，IE7.0及以上版本這兩種創建方式都支持。

 //定義用戶存儲XMLHttpRequest對象的變量var xmlHttp = null;//創建XMLHttpRequest對象function creatXMLHTTP(){//判斷瀏覽器是否支持ActiveX控件，針對IE6及之前版本if (window.ActiveXObject){//將所有可能出現的ActiveXObject版本都放在一個數組中var arrXmlHttpTypes = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];//通過循環創建XMLHttpRequest對象for (var i=0;i<arrXmlHttpTypes.length;i++){try{//創建XMLHttpRequest對象xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);//如果創建XMLHttpRequest對象成功，則跳出循環break;}catch(ex){//如果創建不成功，則從數組中取出下一個版本繼續創建}}}//判斷瀏覽器是否將XMLHttpRequest作為本地對象實現，針對IE7及以上，Firefox，Opera等瀏覽器else if(window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}}

  //創建XMLHttpRequest對象，調用前面定義好的函數 
creatXMLHTTP();

        if (xmlHttp!=null){//創建響應XMLHttpRequest對象狀態變化的函數//創建http請求//發送http請求}else{alert("您的瀏覽器不支持XMLHTTP");}</pre>

2.注冊回調函數。

   //創建響應XMLHttpRequest對象狀態變化的函數xmlHttp.onreadystatechange = httpStateChange;

在異步調用時，XMLHttpRequest對象有幾個不同的狀態，這些狀態表示了異步調用的過程。

0：未初始化狀態，剛創建完一個XMLHttpRequest對象；

1：初始化狀態，即XMLHttpRequest對象已經獲得了要將數據發送到哪個服務器上、以什么方式發送等信息；

2：發送狀態，XMLHttpRequest開始發送數據；

3：數據傳送狀態，此時XMLHttpRequest正在接受從服務器端返回的數據，但是數據還沒有傳送完畢；

4：完成狀態：此時XMLHttpRequest對象已經將從服務器端返回的數據接受完畢。

使用XMLHttpRequest對象的onreadystatechange屬性，可以設置響應XMLHttpRequest對象狀態變化的函數。

設置回調函數時，不要在函數名后而加括號。加括號表示將回調函數的返回值注冊給onreadystatechange屬性。

3.使用open方法設置和服務器端交互的基本信息。

 //創建http請求xmlHttp.open("get","userName.txt", true);

4.設置發送的數據，開始和服務器端交互。

  //發送http請求xmlHttp.send(null);

發送http請求使用XMLHttpRequest的send(data)方法，data參數就是傳遞給open()方法中URL參數所指定的文件的參數。若果要傳遞多個參數，用”&”來分隔，不需要傳遞參數寫”null”。

5.在回調函數中判斷交互是否結束，響應是否正確，并根據需要獲取服務器端返回的數據，更新頁面內容。

1）判斷異步調用是否成功：

if (xmlHttp.readyState==4)//異步調用完畢
{if (xmlHttp.status==200 || xmlHttp.status==0)//異步調用成功||在本機上調試{                    }
}

200：服務器成功返回網頁。

404：客戶端請求的網頁不存在。

503：服務器響應超時。

2）獲得服務器返回的數據：

<span style="font-family:SimSun;font-size:18px;"><strong> var userNames = xmlHttp.responseText;</strong></span>

異步調用的最終目的是接收從服務器返回的數據，并根據該數據決定如何顯示在客戶端網頁中。異步調用成功后，XMLHttpRequest對象通過使用以下4個屬性來獲得服務器返回的數據。

responseText：表示將服務器返回的數據以字符串形式返回。

responseXML：表示以XML的形式返回。

responseBody：表示以unsigned byte數組的形式返回。

responseStream：表示以IStream對象的形式返回。

3）局部更新：

<span style="font-family:SimSun;font-size:18px;"><strong>//查找用于顯示提示信息的節點
var node = document.getElementById("myDiv");
//更新數據                   
node.firstChild.nodeValue = text;</strong></span>

獲取服務器返回的數據之后就要顯示出來。Ajax通過DOM來完成局部更新數據。

在Ajax編程中離不開對XMLHttpRequest對象的使用，每次使用都是做這五步工作。面對重復的事情我們就要想辦法了。由于這項編程步驟比較固定現在已經被封裝好了，從而使代碼重用，簡化編程。但是想要成為一名優秀的程序員，還是有必要了解一下這五個步驟。