Ajax的原理簡單來說通過XmlHttpRequest物件來向伺服器發非同步請求,從伺服器獲得資料,然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。要清楚這個過程和原理,我們必須對 XMLHttpRequest有所瞭解。

XMLHttpRequest是ajax的核心機制,它是在IE5中首先引入的,是一種支援非同步請求的技術。簡單的說,也就是javascript可以及時向伺服器提出請求和處理響應,而不阻塞使用者。達到無重新整理的效果。

所以我們先從XMLHttpRequest講起,來看看它的工作原理。

首先,我們先來看看XMLHttpRequest這個物件的屬性。

它的屬性有:

  onreadystatechange  每次狀態改變所觸發事件的事件處理程式。

  responseText     從伺服器程序返回資料的字串形式。

  responseXML    從伺服器程序返回的DOM相容的文件資料物件。

  status           從伺服器返回的數字程式碼,比如常見的404(未找到)和200(已就緒)

  status Text       伴隨狀態碼的字串資訊

  readyState       物件狀態值

    0 (未初始化) 物件已建立,但是尚未初始化(尚未呼叫open方法)

    1 (初始化) 物件已建立,尚未呼叫send方法

    2 (傳送資料) send方法已呼叫,但是當前的狀態及http頭未知

    3 (資料傳送中) 已接收部分資料,因為響應及http頭不全,這時通過responseBody和responseText獲取部分資料會出現錯誤,

    4 (完成) 資料接收完畢,此時可以通過通過responseXml和responseText獲取完整的迴應資料

  但是,由於各瀏覽器之間存在差異,所以建立一個XMLHttpRequest物件可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。下面是一個比較標準的建立XMLHttpRequest物件的方法。

function CreateXmlHttp() {

    //非IE瀏覽器建立XmlHttpRequest物件
if (window.XmlHttpRequest) {
xmlhttp = new XmlHttpRequest();
} //IE瀏覽器建立XmlHttpRequest物件
if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
}
catch (ex) { }
}
}
} function Ustbwuyi() { var data = document.getElementById("username").value;
CreateXmlHttp();
if (!xmlhttp) {
alert("建立xmlhttp物件異常!");
return false;
} xmlhttp.open("POST", url, false); xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
document.getElementById("user1").innerHTML = "資料正在載入...";
if (xmlhttp.status == 200) {
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

如上所示,函式首先檢查XMLHttpRequest的整體狀態並且保證它已經完成(readyStatus=4),即資料已經發送完畢。然後根據伺服器的設定詢問請求狀態,如果一切已經就緒(status=200),那麼就執行下面需要的操作。

對於XmlHttpRequest的兩個方法,open和send,其中open方法指定了:

a、向伺服器提交資料的型別,即post還是get。

b、請求的url地址和傳遞的引數。

c、傳輸方式,false為同步,true為非同步。預設為true。如果是非同步通訊方式(true),客戶機就不等待伺服器的響應;如果是同步方式(false),客戶機就要等到伺服器返回訊息後才去執行其他操作。我們需要根據實際需要來指定同步方式,在某些頁面中,可能會發出多個請求,甚至是有組織有計劃有隊形大規模的高強度的request,而後一個是會覆蓋前一個的,這個時候當然要指定同步方式。

Send方法用來發送請求。

知道了XMLHttpRequest的工作流程,我們可以看出,XMLHttpRequest是完全用來向伺服器發出一個請求的,它的作用也侷限於此,但它的作用是整個ajax實現的關鍵,因為ajax無非是兩個過程,發出請求和響應請求。並且它完全是一種客戶端的技術。而XMLHttpRequest正是處理了伺服器端和客戶端通訊的問題所以才會如此的重要。

現在,我們對ajax的原理大概可以有一個瞭解了。我們可以把伺服器端看成一個數據介面,它返回的是一個純文字流,當然,這個文字流可以是XML格式,可以是Html,可以是Javascript程式碼,也可以只是一個字串。這時候,XMLHttpRequest向伺服器端請求這個頁面,伺服器端將文字的結果寫入頁面,這和普通的web開發流程是一樣的,不同的是,客戶端在非同步獲取這個結果後,不是直接顯示在頁面,而是先由javascript來處理,然後再顯示在頁面。至於現在流行的很多ajax控制元件,比如magicajax等,可以返回DataSet等其它資料型別,只是將這個過程封裝了的結果,本質上他們並沒有什麼太大的區別。