有了要連接的 URL 后就可以配置請求了。可以用 XMLHttpRequest 對象的 open() 方法來完成。該方法有五個參數(shù):
?。畆equest-type:發(fā)送請求的類型。典型的值是 GET 或 POST，但也可以發(fā)送 HEAD 請求。
．url:要連接的 URL。
．a(chǎn)synch:如果希望使用異步連接則為 true，否則為 false。該參數(shù)是可選的，默認為 true。
?。畊sername:如果需要身份驗證，則可以在此指定用戶名。該可選參數(shù)沒有默認值。
?。畃assword:如果需要身份驗證，則可以在此指定口令。該可選參數(shù)沒有默認值。
通常使用其中的前三個參數(shù)。事實上，即使需要異步連接，也應(yīng)該指定第三個參數(shù)為 “true”。這是默認值，但堅持明確指定請求是異步的還是同步的更容易理解。
將這些結(jié)合起來，通常會得到 清單 9 所示的一行代碼。
清單 9. 打開請求
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
}
一旦設(shè)置好了 URL，其他就簡單了。多數(shù)請求使用 GET 就夠了(后面的文章中將看到需要使用 POST 的情況)，再加上 URL，這就是使用 open() 方法需要的全部內(nèi)容了。
挑戰(zhàn)異步性
本系列的后面一篇文章中，我將用很多時間編寫和使用異步代碼，但是您應(yīng)該明白為什么 open() 的最后一個參數(shù)這么重要。在一般的請求/響應(yīng)模型中，比如 Web 1.0，客戶機(瀏覽器或者本地機器上運行的代碼)向服務(wù)器發(fā)出請求。該請求是同步的，換句話說，客戶機等待服務(wù)器的響應(yīng)。當(dāng)客戶機等待的時候，至少會用某種形式通知您在等待:
．沙漏(特別是 Windows 上)。
?。D(zhuǎn)的皮球(通常在 Mac 機器上)。
?。畱?yīng)用程序基本上凍結(jié)了，然后過一段時間光標(biāo)變化了。
這正是 Web 應(yīng)用程序讓人感到笨拙或緩慢的原因 —— 缺乏真正的交互性。按下按鈕時，應(yīng)用程序?qū)嶋H上變得不能使用，直到剛剛觸發(fā)的請求得到響應(yīng)。如果請求需要大量服務(wù)器處理，那么等待的時間可能很長(至少在這個多處理器、DSL 沒有等待的世界中是如此)。
而異步請求不 等待服務(wù)器響應(yīng)。發(fā)送請求后應(yīng)用程序繼續(xù)運行。用戶仍然可以在 Web 表單中輸入數(shù)據(jù)，甚至離開表單。沒有旋轉(zhuǎn)的皮球或者沙漏，應(yīng)用程序也沒有明顯的凍結(jié)。服務(wù)器悄悄地響應(yīng)請求，完成后告訴原來的請求者工作已經(jīng)結(jié)束(具體的辦法很快就會看到)。結(jié)果是，應(yīng)用程序感覺不 那么遲鈍或者緩慢，而是響應(yīng)迅速、交互性強，感覺快多了。這僅僅是 Web 2.0 的一部分，但它是很重要的一部分。所有老套的 GUI 組件和 Web 設(shè)計范型都不能克服緩慢、同步的請求/響應(yīng)模型。
發(fā)送請求
一旦用 open() 配置好之后，就可以發(fā)送請求了。幸運的是，發(fā)送請求的方法的名稱要比 open() 適當(dāng)，它就是 send()。
send() 只有一個參數(shù)，就是要發(fā)送的內(nèi)容。但是在考慮這個方法之前，回想一下前面已經(jīng)通過 URL 本身發(fā)送過數(shù)據(jù)了：
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
雖然可以使用 send() 發(fā)送數(shù)據(jù)，但也能通過 URL 本身發(fā)送數(shù)據(jù)。事實上，GET 請求(在典型的 Ajax 應(yīng)用中大約占 80%)中，用 URL 發(fā)送數(shù)據(jù)要容易得多。如果需要發(fā)送安全信息或 XML，可能要考慮使用 send() 發(fā)送內(nèi)容(本系列的后續(xù)文章中將討論安全數(shù)據(jù)和 XML 消息)。如果不需要通過 send() 傳遞數(shù)據(jù)，則只要傳遞 null 作為該方法的參數(shù)即可。因此您會發(fā)現(xiàn)在本文中的例子中只需要這樣發(fā)送請求(參見 清單 10)。
清單 10. 發(fā)送請求
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.send(null);
}
指定回調(diào)方法
現(xiàn)在我們所做的只有很少一點是新的、革命性的或異步的。必須承認，open() 方法中 “true” 這個小小的關(guān)鍵字建立了異步請求。但是除此之外，這些代碼與用 Java servlet 及 JSP、PHP 或 Perl 編程沒有什么兩樣。那么 Ajax 和 Web 2.0 最大的秘密是什么呢?秘密就在于 XMLHttpRequest 的一個簡單屬性 onreadystatechange。
首先一定要理解這些代碼中的流程(如果需要請回顧 清單 10)。建立其請求然后發(fā)出請求。此外，因為是異步請求，所以 JavaScript 方法(例子中的 getCustomerInfo())不會等待服務(wù)器。因此代碼將繼續(xù)執(zhí)行，就是說，將退出該方法而把控制返回給表單。用戶可以繼續(xù)輸入信息，應(yīng)用程序不會等待服務(wù)器。
這就提出了一個有趣的問題:服務(wù)器完成了請求之后會發(fā)生什么?答案是什么也不發(fā)生，至少對現(xiàn)在的代碼而言如此!顯然這樣不行，因此服務(wù)器在完成通過 XMLHttpRequest 發(fā)送給它的請求處理之后需要某種指示說明怎么做。
現(xiàn)在 onreadystatechange 屬性該登場了。該屬性允許指定一個回調(diào)函數(shù)?；卣{(diào)允許服務(wù)器(猜得到嗎?)反向調(diào)用 Web 頁面中的代碼。它也給了服務(wù)器一定程度的控制權(quán)，當(dāng)服務(wù)器完成請求之后，會查看 XMLHttpRequest 對象，特別是 onreadystatechange 屬性。然后調(diào)用該屬性指定的任何方法。之所以稱為回調(diào)是因為服務(wù)器向網(wǎng)頁發(fā)起調(diào)用，無論網(wǎng)頁本身在做什么。比方說，可能在用戶坐在椅子上手沒有碰鍵盤的時候調(diào)用該方法，但是也可能在用戶輸入、移動鼠標(biāo)、滾動屏幕或者點擊按鈕時調(diào)用該方法。它并不關(guān)心用戶在做什么。
這就是稱之為異步的原因:用戶在一層上操作表單，而在另一層上服務(wù)器響應(yīng)請求并觸發(fā) onreadystatechange 屬性指定的回調(diào)方法。因此需要像 清單 11 一樣在代碼中指定該方法。
清單 11. 設(shè)置回調(diào)方法
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
需要特別注意的是該屬性在代碼中設(shè)置的位置 —— 它是在調(diào)用 send()之前設(shè)置的。發(fā)送請求之前必須設(shè)置該屬性，這樣服務(wù)器在回答完成請求之后才能查看該屬性?，F(xiàn)在剩下的就只有編寫 updatePage() 方法了，這是本文最后一節(jié)要討論的重點。
處理服務(wù)器響應(yīng)
發(fā)送請求，用戶高興地使用 Web 表單(同時服務(wù)器在處理請求)，而現(xiàn)在服務(wù)器完成了請求處理。服務(wù)器查看 onreadystatechange 屬性確定要調(diào)用的方法。除此以外，可以將您的應(yīng)用程序看作其他應(yīng)用程序一樣，無論是否異步。換句話說，不一定要采取特殊的動作編寫響應(yīng)服務(wù)器的方法，只需要改變表單，讓用戶訪問另一個 URL 或者做響應(yīng)服務(wù)器需要的任何事情。這一節(jié)我們重點討論對服務(wù)器的響應(yīng)和一種典型的動作 —— 即時改變用戶看到的表單中的一部分。
回調(diào)和 Ajax
現(xiàn)在我們已經(jīng)看到如何告訴服務(wù)器完成后應(yīng)該做什么:將 XMLHttpRequest 對象的 onreadystatechange 屬性設(shè)置為要運行的函數(shù)名。這樣，當(dāng)服務(wù)器處理完請求后就會自動調(diào)用該函數(shù)。也不需要擔(dān)心該函數(shù)的任何參數(shù)。我們從一個簡單的方法開始，如 清單 12 所示。
清單 12. 回調(diào)方法的代碼
<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
alert("Server is done!");
}
</script>
它僅僅發(fā)出一些簡單的警告，告訴您服務(wù)器什么時候完成了任務(wù)。在自己的網(wǎng)頁中試驗這些代碼，然后在瀏覽器中打開(如果希望查看該例中的 XHTML，請參閱 清單 8)。輸入電話號碼然后離開該字段，將看到一個彈出的警告窗口，但是點擊 OK 又出現(xiàn)了……
根據(jù)瀏覽器的不同，在表單停止彈出警告之前會看到兩次、三次甚至四次警告。這是怎么回事呢?原來我們還沒有考慮 HTTP 就緒狀態(tài)，這是請求/響應(yīng)循環(huán)中的一個重要部分。
HTTP 就緒狀態(tài)
前面提到，服務(wù)器在完成請求之后會在 XMLHttpRequest 的 onreadystatechange 屬性中查找要調(diào)用的方法。這是真的，但還不完整。事實上，每當(dāng) HTTP 就緒狀態(tài)改變時它都會調(diào)用該方法。這意味著什么呢?首先必須理解 HTTP 就緒狀態(tài)。
HTTP 就緒狀態(tài)表示請求的狀態(tài)或情形。它用于確定該請求是否已經(jīng)開始、是否得到了響應(yīng)或者請求/響應(yīng)模型是否已經(jīng)完成。它還可以幫助確定讀取服務(wù)器提供的響應(yīng)文本或數(shù)據(jù)是否安全。在 Ajax 應(yīng)用程序中需要了解五種就緒狀態(tài):
?。?:請求沒有發(fā)出(在調(diào)用 open() 之前)。
?。?:請求已經(jīng)建立但還沒有發(fā)出(調(diào)用 send() 之前)。
．2:請求已經(jīng)發(fā)出正在處理之中(這里通?？梢詮捻憫?yīng)得到內(nèi)容頭部)。
?。?:請求已經(jīng)處理，響應(yīng)中通常有部分?jǐn)?shù)據(jù)可用，但是服務(wù)器還沒有完成響應(yīng)。
?。?:響應(yīng)已完成，可以訪問服務(wù)器響應(yīng)并使用它。
與大多數(shù)跨瀏覽器問題一樣，這些就緒狀態(tài)的使用也不盡一致。您也許期望任務(wù)就緒狀態(tài)從 0 到 1、2、3 再到 4，但實際上很少是這種情況。一些瀏覽器從不報告 0 或 1 而直接從 2 開始，然后是 3 和 4。其他瀏覽器則報告所有的狀態(tài)。還有一些則多次報告就緒狀態(tài) 1。在上一節(jié)中看到，服務(wù)器多次調(diào)用 updatePage()，每次調(diào)用都會彈出警告框 —— 可能和預(yù)期的不同!
對于 Ajax 編程，需要直接處理的惟一狀態(tài)就是就緒狀態(tài) 4，它表示服務(wù)器響應(yīng)已經(jīng)完成，可以安全地使用響應(yīng)數(shù)據(jù)了。基于此，回調(diào)方法中的第一行應(yīng)該如 清單 13 所示。
清單 13. 檢查就緒狀態(tài)
function updatePage() {
if (request.readyState == 4)
alert("Server is done!");
}
修改后就可以保證服務(wù)器的處理已經(jīng)完成。嘗試運行新版本的 Ajax 代碼，現(xiàn)在就會看到與預(yù)期的一樣，只顯示一次警告信息了。
HTTP 狀態(tài)碼
雖然 清單 13 中的代碼看起來似乎不錯，但是還有一個問題 —— 如果服務(wù)器響應(yīng)請求并完成了處理但是報告了一個錯誤怎么辦?要知道，服務(wù)器端代碼應(yīng)該明白它是由 Ajax、JSP、普通 HTML 表單或其他類型的代碼調(diào)用的，但只能使用傳統(tǒng)的 Web 專用方法報告信息。而在 Web 世界中，HTTP 代碼可以處理請求中可能發(fā)生的各種問題。
比方說，您肯定遇到過輸入了錯誤的 URL 請求而得到 404 錯誤碼的情形，它表示該頁面不存在。這僅僅是 HTTP 請求能夠收到的眾多錯誤碼中的一種(完整的狀態(tài)碼列表請參閱 參考資料 中的鏈接)。表示所訪問數(shù)據(jù)受到保護或者禁止訪問的 403 和 401 也很常見。無論哪種情況，這些錯誤碼都是從完成的響應(yīng) 得到的。換句話說，服務(wù)器履行了請求(即 HTTP 就緒狀態(tài)是 4)但是沒有返回客戶機預(yù)期的數(shù)據(jù)。
因此除了就緒狀態(tài)外，還需要檢查 HTTP 狀態(tài)。我們期望的狀態(tài)碼是 200，它表示一切順利。如果就緒狀態(tài)是 4 而且狀態(tài)碼是 200，就可以處理服務(wù)器的數(shù)據(jù)了，而且這些數(shù)據(jù)應(yīng)該就是要求的數(shù)據(jù)(而不是錯誤或者其他有問題的信息)。因此還要在回調(diào)方法中增加狀態(tài)檢查，如 清單 14 所示。
清單 14. 檢查 HTTP 狀態(tài)碼
function updatePage() {
if (request.readyState == 4)
if (request.status == 200)
alert("Server is done!");
}
為了增加更健壯的錯誤處理并盡量避免過于復(fù)雜，可以增加一兩個狀態(tài)碼檢查，請看一看 清單 15 中修改后的 updatePage() 版本。
清單 15. 增加一點錯誤檢查
function updatePage() {
if (request.readyState == 4)
if (request.status == 200)
alert("Server is done!");
else if (request.status == 404)
alert("Request URL does not exist");
else
alert("Error: status code is " + request.status);
}
現(xiàn)在將 getCustomerInfo() 中的 URL 改為不存在的 URL 看看會發(fā)生什么。應(yīng)該會看到警告信息說明要求的 URL 不存在 —— 好極了!很難處理所有的錯誤條件，但是這一小小的改變能夠涵蓋典型 Web 應(yīng)用程序中 80% 的問題。
讀取響應(yīng)文本
現(xiàn)在可以確保請求已經(jīng)處理完成(通過就緒狀態(tài))，服務(wù)器給出了正常的響應(yīng)(通過狀態(tài)碼)，最后我們可以處理服務(wù)器返回的數(shù)據(jù)了。返回的數(shù)據(jù)保存在 XMLHttpRequest 對象的 responseText 屬性中。
關(guān)于 responseText 中的文本內(nèi)容，比如格式和長度，有意保持含糊。這樣服務(wù)器就可以將文本設(shè)置成任何內(nèi)容。比方說，一種腳本可能返回逗號分隔的值，另一種則使用管道符(即 | 字符)分隔的值，還有一種則返回長文本字符串。何去何從由服務(wù)器決定。
在本文使用的例子中，服務(wù)器返回客戶的上一個訂單和客戶地址，中間用管道符分開。然后使用訂單和地址設(shè)置表單中的元素值，清單 16 給出了更新顯示內(nèi)容的代碼。
清單 16. 處理服務(wù)器響應(yīng)
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML =
response[1].replace(/\n/g, "");
} else
alert("status is " + request.status);
}
}
首先，得到 responseText 并使用 JavaScript split() 方法從管道符分開。得到的數(shù)組放到 response 中。數(shù)組中的第一個值 —— 上一個訂單 —— 用 response[0] 訪問，被設(shè)置為 ID 為 “order” 的字段的值。第二個值 response[1]，即客戶地址，則需要更多一點處理。因為地址中的行用一般的行分隔符(“\n”字符)分隔，代碼中需要用 XHTML 風(fēng)格的行分隔符
來代替。替換過程使用 replace() 函數(shù)和正則表達式完成。最后，修改后的文本作為 HTML 表單 div 中的內(nèi)部 HTML。結(jié)果就是表單突然用客戶信息更新了。
結(jié)束本文之前，我還要介紹 XMLHttpRequest 的另一個重要屬性 responseXML。如果服務(wù)器選擇使用 XML 響應(yīng)則該屬性包含(也許您已經(jīng)猜到)XML 響應(yīng)。處理 XML 響應(yīng)和處理普通文本有很大不同，涉及到解析、文檔對象模型(DOM)和其他一些問題。后面的文章中將進一步介紹 XML。但是因為 responseXML 通常和 responseText 一起討論，這里有必要提一提。對于很多簡單的 Ajax 應(yīng)用程序 responseText 就夠了，但是您很快就會看到通過 Ajax 應(yīng)用程序也能很好地處理 XML。
結(jié)束語
您可能對 XMLHttpRequest 感到有點厭倦了，我很少看到一整篇文章討論一個對象，特別是這種簡單的對象。但是您將在使用 Ajax 編寫的每個頁面和應(yīng)用程序中反復(fù)使用該對象。坦白地說，關(guān)于 XMLHttpRequest 還真有一些可說的內(nèi)容。下一期文章中將介紹如何在請求中使用 POST 及 GET，來設(shè)置請求中的內(nèi)容頭部和從服務(wù)器響應(yīng)讀取內(nèi)容頭部，理解如何在請求/響應(yīng)模型中編碼請求和處理 XML。
再往后我們將介紹常見 Ajax 工具箱。這些工具箱實際上隱藏了本文所述的很多細節(jié)，使得 Ajax 編程更容易。您也許會想，既然有這么多工具箱為何還要對底層的細節(jié)編碼。答案是，如果不知道應(yīng)用程序在做什么，就很難發(fā)現(xiàn)應(yīng)用程序中的問題。
因此不要忽略這些細節(jié)或者簡單地瀏覽一下，如果便捷華麗的工具箱出現(xiàn)了錯誤，您就不必撓頭或者發(fā)送郵件請求支持了。如果了解如何直接使用 XMLHttpRequest，就會發(fā)現(xiàn)很容易調(diào)試和解決最奇怪的問題。只有讓其解決您的問題，工具箱才是好東西。
