Ajax基礎教程（2）-使用XMLHttpRequest對象 2.3 互動樣本

看到這裡，你可能想知道典型的Ajax互動是什麼樣。圖2-1顯示了Ajax應用中標準的互動模式。

圖2-1　標準Ajax互動

不同於標準Web客戶中所用的標準請求/回應程式法，Ajax應用的做法稍有差別。

1. 一個用戶端事件觸發一個Ajax事件。從簡單的onchange事件到某個特定的使用者動作，很多這樣的事件都可以觸發Ajax事件。可以有如下的代碼：

<input type="text"d="email" name="email" onblur="validateEmail()";>

2. 建立XMLHttpRequest對象的一個執行個體。使用open()方法建立調用，並設定URL以及所希望的HTTP方法（通常是GET或POST）。請求實際上通過一個send()方法調用觸發。可能的代碼如下所示：

var xmlHttp;
function validateEmail() {
var email = document.getElementById("email");
var url = "validate?email=" + escape(email.value);
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}

3. 向伺服器做出請求。可能調用servlet、CGI指令碼，或者任何伺服器端技術。

4. 伺服器可以做你想做的事情，包括訪問資料庫，甚至訪問另一個系統。

5. 請求返回到瀏覽器。Content-Type設定為text/xml——XMLHttpRequest對象只能處理text/html類型的結果。在另外一些更複雜樣本中，響應可能涉及更廣，還包括JavaScript、DOM管理以及其他相關的技術。需要說明，你還需要設定另外一些首部，使瀏覽器不會在本機快取結果。為此可以使用下面的代碼：

response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");

6. 在這個樣本中，XMLHttpRequest對象配置為處理返回時要調用callback()函數。這個函數會檢查XMLHttpRequest對象的readyState屬性，然後查看伺服器返回的狀態代碼。如果一切正常，callback()函數就會在用戶端上做些有意思的工作。以下就是一個典型的回調方法：

function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//do something interesting here
}
}
}

可以看到，這與正常的請求/響應模式有所不同，但對Web開發人員來說，並不是完全陌生的。顯然，在建立和建立XMLHttpRequest對象時還可以做些事情，另外當“回調”函數完成了狀態檢查之後也可以有所作為。一般地，你會把這些標準調用封裝在一個庫中，以便在整個應用中使用，或者可以使用Web上提供的庫。這個領域還很新，但是在開源社區中已經如火如荼地展開了大量的工作。

通常，Web上提供的各種架構和工具包負責基本的串連和瀏覽器抽象，有些還增加了使用者介面組件。有一些純粹基於客戶，還有一些需要在伺服器上工作。這些架構中的很多隻是剛開始開發，或者還處於發布的早期階段，隨著新的庫和新的版本的定期出現，情況還在不斷髮生變化。這個領域正在日漸成熟，最具優勢的將脫穎而出。一些比較成熟的庫包括libXmlRequest、RSLite、sarissa、JavaScript對象註解（JavaScript Object Notation，JSON）、JSRS、直接Web遠程通訊（Direct Web Remoting，DWR）和Rails on Ruby。這個領域日新月異，所以應當適當地配置你的RSS收集器，及時收集有關Ajax的所有網站上的資訊！

返回“Ajax基礎教程-目錄”