javascript實現Ajax的六個步驟

經過jQuery的封裝以後，對於Ajax的使用變得很是的簡單，可是我的對於javascript實現的Ajax的原理卻一無所知，今天在看《鋒利的jQuery》這本書的時候，在書上看到了關於這個實現的例子，特此摘抄下來。

例子描述：單擊一個按鈕，而後經過傳統的javascript的Ajax的方式從服務器端取回一個「Hello Ajax！」的字符串並顯示在頁面上。

首先在前臺頁面中書寫HTML代碼，代碼以下：

<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText"></div>

<button>按鈕用來觸發Ajax，id爲"resText"的元素用來顯示從服務器返回的HTML文本。

接下來的任務就是完成Ajax()函數，實現步驟以下：

(1)定義一個函數，經過該函數來異步獲取信息，代碼以下：

function Ajax(){
//...
}

(2)聲明一個空對象用來裝入XMLHttpRequest對象，代碼以下：

var xmlHttpReq=null;

(3)給XMLHttpRequest對象賦值，代碼以下：

if(window.ActiveXObject){                                    //IE五、IE6是以ActiveXObject的方式
                                                             //引入xmlHttpRequest對象的
    xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){                             //除IE五、IE6之外的瀏覽器
                                                             //XMLHttpRequest是window的子對象
    xmlHttpReq=new XMLHttpRequest();                         //實例化一個XMLHttpRequest對象
}

IE五、IE6是以ActiveXObject的方式引入XMLHttpRequest對象的，而其餘瀏覽器的XMLHttpRequest對象是window的子對象。

(4)實例化成功後，使用open()方式初始化XMLHttpRequest對象，指定HTTP方法和要使用的服務器URL，代碼以下：

xmlHttpReq.open("GET","test.php",true);    //調用open()方法並採用

默認狀況下，使用XMLHttpRequest對象發送的HTTP請求是異步進行的，可是能夠顯示地把async參數設置爲true，如上面代碼所示。

(5)由於要作一個異步調用，因此須要註冊一個XMLHttpRequest對象，將調用的回調事件處理器當它的readyState值改變時調用。當readState值被改變時，會激發一個readstatechange事件，可使用onreadstatechange屬性來註冊該回調事件處理器，代碼以下：

xmlHttpReq.onreadstatechange=RequestCallBack;    //設置回調函數

(6)使用send()方法發送該請求，由於這個請求使用的是HTTP的GET方式，因此能夠在不指定參數或使用null參數的狀況下調用send()放法，代碼以下：

xmlHttpReq.send(null);        //由於使用GET方法提交，因此可使用null做爲參數調用

當請求狀態改變時，XMLHttpRequest對象調用onreaystatechange屬性註冊的事件處理器。所以，在處理該響應以前，事件處理器應該首先檢查readyState的值和HTTP的狀態。當請求完成加載(readyState值爲4)而且響應已經成功(HTTP狀態爲200)時，就能夠調用一個javascript函數來處理該響應內容，代碼以下：

function RequestCallBack(){//一旦readyState值改變，將會調用該函數
    if(xmlHttpReq.readyState == 4)
    {
        if(xmlHttpReq.status == 200){
        //將xmlHttpReq.responseText的值賦予id爲resText的元素
            document.getElementById("resText").innerHTML=xmlHttpReq.responseText;
        }
    }
}

最後，若是單擊"Ajax提交"按鈕後發現網頁上出現了"Hello Ajax！",那麼就完成了第一個Ajax調用。