多數(shù) Web 應(yīng)用程序都使用請(qǐng)求/響應(yīng)模型從服務(wù)器上獲得完整的 HTML 頁(yè)面。常常是點(diǎn)擊一個(gè)按鈕，等待服務(wù)器響應(yīng)，再點(diǎn)擊另一個(gè)按鈕，然后再等待，這樣一個(gè)反復(fù)的過(guò)程。有了 Ajax 和 XMLHttpRequest 對(duì)象，就可以使用不必讓用戶等待服務(wù)器響應(yīng)的請(qǐng)求/響應(yīng)模型了。本文中，Brett McLaughlin 介紹了如何創(chuàng)建能夠適應(yīng)不同瀏覽器的 XMLHttpRequest 實(shí)例，建立和發(fā)送請(qǐng)求，并響應(yīng)服務(wù)器。

本系列的上一期文章（請(qǐng)參閱 參考資料 中的鏈接），我們介紹了 Ajax 應(yīng)用程序，考察了推動(dòng) Ajax 應(yīng)用程序的基本概念。其中的核心是很多您可能已經(jīng)了解的技術(shù)：JavaScript、HTML 和 XHTML、一點(diǎn)動(dòng)態(tài) HTML 以及 DOM（文檔對(duì)象模型）。本文將放大其中的一點(diǎn)，把目光放到具體的 Ajax 細(xì)節(jié)上。

本文中，您將開(kāi)始接觸最基本和基礎(chǔ)性的有關(guān) Ajax 的全部對(duì)象和編程方法：XMLHttpRequest 對(duì)象。該對(duì)象實(shí)際上僅僅是一個(gè)跨越所有 Ajax 應(yīng)用程序的公共線程，您可能已經(jīng)預(yù)料到，只有徹底理解該對(duì)象才能充分發(fā)揮編程的潛力。事實(shí)上，有時(shí)您會(huì)發(fā)現(xiàn)，要正確地使用 XMLHttpRequest，顯然不能 使用 XMLHttpRequest。這到底是怎么回事呢？

Web 2.0 一瞥

在深入研究代碼之前首先看看最近的觀點(diǎn) —— 一定要十分清楚 Web 2.0 這個(gè)概念。聽(tīng)到 Web 2.0 這個(gè)詞的時(shí)候，應(yīng)該首先問(wèn)一問(wèn) “Web 1.0 是什么？” 雖然很少聽(tīng)人提到 Web 1.0，實(shí)際上它指的就是具有完全不同的請(qǐng)求和響應(yīng)模型的傳統(tǒng) Web。比如，到 Amazon.com 網(wǎng)站上點(diǎn)擊一個(gè)按鈕或者輸入搜索項(xiàng)。就會(huì)對(duì)服務(wù)器發(fā)送一個(gè)請(qǐng)求，然后響應(yīng)再返回到瀏覽器。該請(qǐng)求不僅僅是圖書(shū)和書(shū)目列表，而是另一個(gè)完整的 HTML 頁(yè)面。因此當(dāng) Web 瀏覽器用新的 HTML 頁(yè)面重繪時(shí)，可能會(huì)看到閃爍或抖動(dòng)。事實(shí)上，通過(guò)看到的每個(gè)新頁(yè)面可以清晰地看到請(qǐng)求和響應(yīng)。

Web 2.0（在很大程度上）消除了這種看得見(jiàn)的往復(fù)交互。比如訪問(wèn) Google Maps 或 Flickr 這樣的站點(diǎn)（到這些支持 Web 2.0 和 Ajax 站點(diǎn)的鏈接請(qǐng)參閱 參考資料）。比如在 Google Maps 上，您可以拖動(dòng)地圖，放大和縮小，只有很少的重繪操作。當(dāng)然這里仍然有請(qǐng)求和響應(yīng)，只不過(guò)都藏到了幕后。作為用戶，體驗(yàn)更加舒適，感覺(jué)很像桌面應(yīng)用程序。這種新的感受和范型就是當(dāng)有人提到 Web 2.0 時(shí)您所體會(huì)到的。

需要關(guān)心的是如何使這些新的交互成為可能。顯然，仍然需要發(fā)出請(qǐng)求和接收響應(yīng)，但正是針對(duì)每次請(qǐng)求/響應(yīng)交互的 HTML 重繪造成了緩慢、笨拙的 Web 交互的感受。因此很清楚，我們需要一種方法使發(fā)送的請(qǐng)求和接收的響應(yīng)只 包含需要的數(shù)據(jù)而不是整個(gè) HTML 頁(yè)面。惟一需要獲得整個(gè)新 HTML 頁(yè)面的時(shí)候就是希望用戶看到 新頁(yè)面的時(shí)候。

但多數(shù)交互都是在已有頁(yè)面上增加細(xì)節(jié)、修改主體文本或者覆蓋原有數(shù)據(jù)。這些情況下，Ajax 和 Web 2.0 方法允許在不 更新整個(gè) HTML 頁(yè)面的情況下發(fā)送和接收數(shù)據(jù)。對(duì)于那些經(jīng)常上網(wǎng)的人，這種能力可以讓您的應(yīng)用程序感覺(jué)更快、響應(yīng)更及時(shí)，讓他們不時(shí)地光顧您的網(wǎng)站。

XMLHttpRequest 簡(jiǎn)介

要真正實(shí)現(xiàn)這種絢麗的奇跡，必須非常熟悉一個(gè) JavaScript 對(duì)象，即 XMLHttpRequest。這個(gè)小小的對(duì)象實(shí)際上已經(jīng)在幾種瀏覽器中存在一段時(shí)間了，它是本專(zhuān)欄今后幾個(gè)月中要介紹的 Web 2.0、Ajax 和大部分其他內(nèi)容的核心。為了讓您快速地大體了解它，下面給出將要用于該對(duì)象的很少的幾個(gè) 方法和屬性。

·open()：建立到服務(wù)器的新請(qǐng)求。
·send()：向服務(wù)器發(fā)送請(qǐng)求。
·abort()：退出當(dāng)前請(qǐng)求。
·readyState：提供當(dāng)前 HTML 的就緒狀態(tài)。
·responseText：服務(wù)器返回的請(qǐng)求響應(yīng)文本。

如果不了解這些（或者其中的任何 一個(gè)），您也不用擔(dān)心，后面幾篇文章中我們將介紹每個(gè)方法和屬性。現(xiàn)在應(yīng)該 了解的是，明確用 XMLHttpRequest 做什么。要注意這些方法和屬性都與發(fā)送請(qǐng)求及處理響應(yīng)有關(guān)。事實(shí)上，如果看到 XMLHttpRequest 的所有方法和屬性，就會(huì)發(fā)現(xiàn)它們都 與非常簡(jiǎn)單的請(qǐng)求/響應(yīng)模型有關(guān)。顯然，我們不會(huì)遇到特別新的 GUI 對(duì)象或者創(chuàng)建用戶交互的某種超極神秘的方法，我們將使用非常簡(jiǎn)單的請(qǐng)求和非常簡(jiǎn)單的響應(yīng)。聽(tīng)起來(lái)似乎沒(méi)有多少吸引力，但是用好該對(duì)象可以徹底改變您的應(yīng)用程序。

簡(jiǎn)單的 new

首先需要?jiǎng)?chuàng)建一個(gè)新變量并賦給它一個(gè) XMLHttpRequest 對(duì)象實(shí)例。這在 JavaScript 中很簡(jiǎn)單，只要對(duì)該對(duì)象名使用 new 關(guān)鍵字即可，如 清單 1 所示。

清單 1. 創(chuàng)建新的 XMLHttpRequest 對(duì)象

<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>

不難吧？記住，JavaScript 不要求指定變量類(lèi)型，因此不需要像 清單 2 那樣做（在 Java 語(yǔ)言中可能需要這樣）。

清單 2. 創(chuàng)建 XMLHttpRequest 的 Java 偽代碼

XMLHttpRequest request = new XMLHttpRequest();

因此在 JavaScript 中用 var 創(chuàng)建一個(gè)變量，給它一個(gè)名字（如 “request”），然后賦給它一個(gè)新的 XMLHttpRequest 實(shí)例。此后就可以在函數(shù)中使用該對(duì)象了。

錯(cuò)誤處理

在實(shí)際上各種事情都可能出錯(cuò)，而上面的代碼沒(méi)有提供任何錯(cuò)誤處理。較好的辦法是創(chuàng)建該對(duì)象，并在出現(xiàn)問(wèn)題時(shí)優(yōu)雅地退出。比如，任何較早的瀏覽器（不論您是否相信，仍然有人在使用老版本的 Netscape Navigator）都不支持 XMLHttpRequest，您需要讓這些用戶知道有些地方出了問(wèn)題。清單 3 說(shuō)明如何創(chuàng)建該對(duì)象，以便在出現(xiàn)問(wèn)題的時(shí)候發(fā)出 JavaScript 警告。

清單 3. 創(chuàng)建具有錯(cuò)誤處理能力的 XMLHttpRequest

<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (failed) {
request = false;
}

if (!request)
alert("Error initializing XMLHttpRequest!");
</script>

一定要理解這些步驟：

1、創(chuàng)建一個(gè)新變量 request 并賦值 false。后面將使用 false 作為判定條件，它表示還沒(méi)有創(chuàng)建 XMLHttpRequest 對(duì)象。
2、增加 try/catch 塊：
1）嘗試創(chuàng)建 XMLHttpRequest 對(duì)象。
2）如果失敗（catch (failed)）則保證 request 的值仍然為 false。
3、檢查 request 是否仍為 false（如果一切正常就不會(huì)是 false）。
4、如果出現(xiàn)問(wèn)題（request 是 false）則使用 JavaScript 警告通知用戶出現(xiàn)了問(wèn)題。

代碼非常簡(jiǎn)單，對(duì)大多數(shù) JavaScript 和 Web 開(kāi)發(fā)人員來(lái)說(shuō)，真正理解它要比讀寫(xiě)代碼花更長(zhǎng)的時(shí)間。現(xiàn)在已經(jīng)得到了一段帶有錯(cuò)誤檢查的 XMLHttpRequest 對(duì)象創(chuàng)建代碼，還可以告訴您哪兒出了問(wèn)題。

應(yīng)付 Microsoft

看起來(lái)似乎一切良好，至少在用 Internet Explorer 試驗(yàn)這些代碼之前是這樣的。如果這樣試驗(yàn)的話，就會(huì)看到 圖 1 所示的糟糕情形。

圖 1. Internet Explorer 報(bào)告錯(cuò)誤

顯然有什么地方不對(duì)勁，而 Internet Explorer 很難說(shuō)是一種過(guò)時(shí)的瀏覽器，因?yàn)槿澜缬?70% 在使用 Internet Explorer。換句話說(shuō)，如果不支持 Microsoft 和 Internet Explorer 就不會(huì)受到 Web 世界的歡迎！因此我們需要采用不同的方法處理 Microsoft 瀏覽器。

經(jīng)驗(yàn)證發(fā)現(xiàn) Microsoft 支持 Ajax，但是其 XMLHttpRequest 版本有不同的稱(chēng)呼。事實(shí)上，它將其稱(chēng)為幾種 不同的東西。如果使用較新版本的 Internet Explorer，則需要使用對(duì)象 Msxml2.XMLHTTP，而較老版本的 Internet Explorer 則使用 Microsoft.XMLHTTP。我們需要支持這兩種對(duì)象類(lèi)型（同時(shí)還要支持非 Microsoft 瀏覽器）。請(qǐng)看看 清單 4，它在前述代碼的基礎(chǔ)上增加了對(duì) Microsoft 的支持。

Microsoft 參與了嗎？

關(guān)于 Ajax 和 Microsoft 對(duì)該領(lǐng)域不斷增長(zhǎng)的興趣和參與已經(jīng)有很多文章進(jìn)行了介紹。事實(shí)上，據(jù)說(shuō) Microsoft 最新版本的 Internet Explorer —— version 7.0，將在 2006 年下半年推出 —— 將開(kāi)始直接支持 XMLHttpRequest，讓您使用 new 關(guān)鍵字代替所有的 Msxml2.XMLHTTP 創(chuàng)建代碼。但不要太激動(dòng)，仍然需要支持舊的瀏覽器，因此跨瀏覽器代碼不會(huì)很快消失。

清單 4. 增加對(duì) Microsoft 瀏覽器的支持

<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!");
</script>

很容易被這些花括號(hào)迷住了眼睛，因此下面分別介紹每一步：

1、創(chuàng)建一個(gè)新變量 request 并賦值 false。使用 false 作為判斷條件，它表示還沒(méi)有創(chuàng)建 XMLHttpRequest 對(duì)象。
2、增加 try/catch 塊：
1）嘗試創(chuàng)建 XMLHttpRequest 對(duì)象。
2）如果失敗（catch (trymicrosoft)）：
1>嘗試使用較新版本的 Microsoft 瀏覽器創(chuàng)建 Microsoft 兼容的對(duì)象（Msxml2.XMLHTTP）。
2> 如果失敗（catch (othermicrosoft)）嘗試使用較老版本的 Microsoft 瀏覽器創(chuàng)建 Microsoft 兼容的對(duì)象（Microsoft.XMLHTTP）。
2）如果失敗（catch (failed)）則保證 request 的值仍然為 false。
3、檢查 request 是否仍然為 false（如果一切順利就不會(huì)是 false）。
4、如果出現(xiàn)問(wèn)題（request 是 false）則使用 JavaScript 警告通知用戶出現(xiàn)了問(wèn)題。

這樣修改代碼之后再使用 Internet Explorer 試驗(yàn)，就應(yīng)該看到已經(jīng)創(chuàng)建的表單（沒(méi)有錯(cuò)誤消息）。我實(shí)驗(yàn)的結(jié)果如 圖 2 所示。

圖 2. Internet Explorer 正常工作

靜態(tài)與動(dòng)態(tài)

再看一看清單 1、3 和 4，注意，所有這些代碼都直接嵌套在 script 標(biāo)記中。像這種不放到方法或函數(shù)體中的 JavaScript 代碼稱(chēng)為靜態(tài) JavaScript。就是說(shuō)代碼是在頁(yè)面顯示給用戶之前的某個(gè)時(shí)候運(yùn)行。（雖然根據(jù)規(guī)范不能完全精確地 知道這些代碼何時(shí)運(yùn)行對(duì)瀏覽器有什么影響，但是可以保證這些代碼在用戶能夠與頁(yè)面交互之前運(yùn)行。）這也是多數(shù) Ajax 程序員創(chuàng)建 XMLHttpRequest 對(duì)象的一般方式。

就是說(shuō)，也可以像 清單 5 那樣將這些代碼放在一個(gè)方法中。

清單 5. 將 XMLHttpRequest 創(chuàng)建代碼移動(dòng)到方法中

<script language="javascript" type="text/javascript">

var request;

function createRequest() {
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!");
}
</script>

如果按照這種方式編寫(xiě)代碼，那么在處理 Ajax 之前需要調(diào)用該方法。因此還需要 清單 6 這樣的代碼。

清單 6. 使用 XMLHttpRequest 的創(chuàng)建方法

<script language="javascript" type="text/javascript">

var request;

function createRequest() {
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() {
createRequest();
// Do something with the request variable
}
</script>

此代碼惟一的問(wèn)題是推遲了錯(cuò)誤通知，這也是多數(shù) Ajax 程序員不采用這一方法的原因。假設(shè)一個(gè)復(fù)雜的表單有 10 或 15 個(gè)字段、選擇框等，當(dāng)用戶在第 14 個(gè)字段（按照表單順序從上到下）輸入文本時(shí)要激活某些 Ajax 代碼。這時(shí)候運(yùn)行 getCustomerInfo() 嘗試創(chuàng)建一個(gè) XMLHttpRequest 對(duì)象，但（對(duì)于本例來(lái)說(shuō)）失敗了。然后向用戶顯示一條警告，明確地告訴他們不能使用該應(yīng)用程序。但用戶已經(jīng)花費(fèi)了很多時(shí)間在表單中輸入數(shù)據(jù)！這是非常令人討厭的，而討厭顯然不會(huì)吸引用戶再次訪問(wèn)您的網(wǎng)站。

如果使用靜態(tài) JavaScript，用戶在點(diǎn)擊頁(yè)面的時(shí)候很快就會(huì)看到錯(cuò)誤信息。這樣也很煩人，是不是？可能令用戶錯(cuò)誤地認(rèn)為您的 Web 應(yīng)用程序不能在他的瀏覽器上運(yùn)行。不過(guò)，當(dāng)然要比他們花費(fèi)了 10 分鐘輸入信息之后再顯示同樣的錯(cuò)誤要好。因此，我建議編寫(xiě)靜態(tài)的代碼，讓用戶盡可能早地發(fā)現(xiàn)問(wèn)題。

用 XMLHttpRequest 發(fā)送請(qǐng)求

得到請(qǐng)求對(duì)象之后就可以進(jìn)入請(qǐng)求/響應(yīng)循環(huán)了。記住，XMLHttpRequest 惟一的目的是讓您發(fā)送請(qǐng)求和接收響應(yīng)。其他一切都是 JavaScript、CSS 或頁(yè)面中其他代碼的工作：改變用戶界面、切換圖像、解釋服務(wù)器返回的數(shù)據(jù)。準(zhǔn)備好 XMLHttpRequest 之后，就可以向服務(wù)器發(fā)送請(qǐng)求了。

歡迎使用沙箱

Ajax 采用一種沙箱安全模型。因此，Ajax 代碼（具體來(lái)說(shuō)就是 XMLHttpRequest 對(duì)象）只能對(duì)所在的同一個(gè)域發(fā)送請(qǐng)求。以后的文章中將進(jìn)一步介紹安全和 Ajax，現(xiàn)在只要知道在本地機(jī)器上運(yùn)行的代碼只能對(duì)本地機(jī)器上的服務(wù)器端腳本發(fā)送請(qǐng)求。如果讓 Ajax 代碼在 www.breakneckpizza.com 上運(yùn)行，則必須 www.breakneck.com 中運(yùn)行的腳本發(fā)送請(qǐng)求。

設(shè)置服務(wù)器 URL

首先要確定連接的服務(wù)器的 URL。這并不是 Ajax 的特殊要求，但仍然是建立連接所必需的，顯然現(xiàn)在您應(yīng)該知道如何構(gòu)造 URL 了。多數(shù)應(yīng)用程序中都會(huì)結(jié)合一些靜態(tài)數(shù)據(jù)和用戶處理的表單中的數(shù)據(jù)來(lái)構(gòu)造該 URL。比如，清單 7 中的 JavaScript 代碼獲取電話號(hào)碼字段的值并用其構(gòu)造 URL。

清單 7. 建立請(qǐng)求 URL

<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);
}
</script>

這里沒(méi)有難懂的地方。首先，代碼創(chuàng)建了一個(gè)新變量 phone，并把 ID 為 “phone” 的表單字段的值賦給它。清單 8 展示了這個(gè)表單的 XHTML，其中可以看到 phone 字段及其 id 屬性。

清單 8. Break Neck Pizza 表單

<body>
<p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p>
<form action="POST">
<p>Enter your phone number:
<input type="text" size="14" name="phone" id="phone"
onChange="getCustomerInfo();" />
</p>
<p>Your order will be delivered t</p>
<div id="address"></div>
<p>Type your order in here:</p>
<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
<p><input type="submit" value="Order Pizza" id="submit" /></p>
</form>
</body>

還要注意，當(dāng)用戶輸入電話號(hào)碼或者改變電話號(hào)碼時(shí)，將觸發(fā) 清單 8 所示的 getCustomerInfo() 方法。該方法取得電話號(hào)碼并構(gòu)造存儲(chǔ)在 url 變量中的 URL 字符串。記住，由于 Ajax 代碼是沙箱型的，因而只能連接到同一個(gè)域，實(shí)際上 URL 中不需要域名。該例中的腳本名為 /cgi-local/lookupCustomer.php。最后，電話號(hào)碼作為 GET 參數(shù)附加到該腳本中："phone=" + escape(phone)。

如果以前沒(méi)用見(jiàn)過(guò) escape() 方法，它用于轉(zhuǎn)義不能用明文正確發(fā)送的任何字符。比如，電話號(hào)碼中的空格將被轉(zhuǎn)換成字符 %20，從而能夠在 URL 中傳遞這些字符。

可以根據(jù)需要添加任意多個(gè)參數(shù)。比如，如果需要增加另一個(gè)參數(shù)，只需要將其附加到 URL 中并用 “與”（&）字符分開(kāi) [第一個(gè)參數(shù)用問(wèn)號(hào)（?）和腳本名分開(kāi)]。

打開(kāi)請(qǐng)求

有了要連接的 URL 后就可以配置請(qǐng)求了。可以用 XMLHttpRequest 對(duì)象的 open() 方法來(lái)完成。該方法有五個(gè)參數(shù)：

request-type：發(fā)送請(qǐng)求的類(lèi)型。典型的值是 GET 或 POST，但也可以發(fā)送 HEAD 請(qǐng)求。
url：要連接的 URL。
asynch：如果希望使用異步連接則為 true，否則為 false。該參數(shù)是可選的，默認(rèn)為 true。
username：如果需要身份驗(yàn)證，則可以在此指定用戶名。該可選參數(shù)沒(méi)有默認(rèn)值。 password：如果需要身份驗(yàn)證，則可以在此指定口令。該可選參數(shù)沒(méi)有默認(rèn)值。

open() 是打開(kāi)嗎？
Internet 開(kāi)發(fā)人員對(duì) open() 方法到底做什么沒(méi)有達(dá)成一致。但它實(shí)際上并不是 打開(kāi)一個(gè)請(qǐng)求。如果監(jiān)控 XHTML/Ajax 頁(yè)面及其連接腳本之間的網(wǎng)絡(luò)和數(shù)據(jù)傳遞，當(dāng)調(diào)用 open() 方法時(shí)將看不到任何通信。不清楚為何選用了這個(gè)名字，但顯然不是一個(gè)好的選擇。

通常使用其中的前三個(gè)參數(shù)。事實(shí)上，即使需要異步連接，也應(yīng)該指定第三個(gè)參數(shù)為 “true”。這是默認(rèn)值，但堅(jiān)持明確指定請(qǐng)求是異步的還是同步的更容易理解。

將這些結(jié)合起來(lái)，通常會(huì)得到 清單 9 所示的一行代碼。

清單 9. 打開(kāi)請(qǐng)求

function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
}

一旦設(shè)置好了 URL，其他就簡(jiǎn)單了。多數(shù)請(qǐng)求使用 GET 就夠了（后面的文章中將看到需要使用 POST 的情況），再加上 URL，這就是使用 open() 方法需要的全部?jī)?nèi)容了。

挑戰(zhàn)異步性

本系列的后面一篇文章中，我將用很多時(shí)間編寫(xiě)和使用異步代碼，但是您應(yīng)該明白為什么 open() 的最后一個(gè)參數(shù)這么重要。在一般的請(qǐng)求/響應(yīng)模型中，比如 Web 1.0，客戶機(jī)（瀏覽器或者本地機(jī)器上運(yùn)行的代碼）向服務(wù)器發(fā)出請(qǐng)求。該請(qǐng)求是同步的，換句話說(shuō)，客戶機(jī)等待服務(wù)器的響應(yīng)。當(dāng)客戶機(jī)等待的時(shí)候，至少會(huì)用某種形式通知您在等待：

·沙漏（特別是 Windows 上）。
·旋轉(zhuǎn)的皮球（通常在 Mac 機(jī)器上）。
·應(yīng)用程序基本上凍結(jié)了，然后過(guò)一段時(shí)間光標(biāo)變化了。

這正是 Web 應(yīng)用程序讓人感到笨拙或緩慢的原因 —— 缺乏真正的交互性。按下按鈕時(shí)，應(yīng)用程序?qū)嶋H上變得不能使用，直到剛剛觸發(fā)的請(qǐng)求得到響應(yīng)。如果請(qǐng)求需要大量服務(wù)器處理，那么等待的時(shí)間可能很長(zhǎng)（至少在這個(gè)多處理器、DSL 沒(méi)有等待的世界中是如此）。

而異步請(qǐng)求不 等待服務(wù)器響應(yīng)。發(fā)送請(qǐng)求后應(yīng)用程序繼續(xù)運(yùn)行。用戶仍然可以在 Web 表單中輸入數(shù)據(jù)，甚至離開(kāi)表單。沒(méi)有旋轉(zhuǎn)的皮球或者沙漏，應(yīng)用程序也沒(méi)有明顯的凍結(jié)。服務(wù)器悄悄地響應(yīng)請(qǐng)求，完成后告訴原來(lái)的請(qǐng)求者工作已經(jīng)結(jié)束（具體的辦法很快就會(huì)看到）。結(jié)果是，應(yīng)用程序感覺(jué)不 那么遲鈍或者緩慢，而是響應(yīng)迅速、交互性強(qiáng)，感覺(jué)快多了。這僅僅是 Web 2.0 的一部分，但它是很重要的一部分。所有老套的 GUI 組件和 Web 設(shè)計(jì)范型都不能克服緩慢、同步的請(qǐng)求/響應(yīng)模型。

發(fā)送請(qǐng)求

一旦用 open() 配置好之后，就可以發(fā)送請(qǐng)求了。幸運(yùn)的是，發(fā)送請(qǐng)求的方法的名稱(chēng)要比 open() 適當(dāng)，它就是 send()。

send() 只有一個(gè)參數(shù)，就是要發(fā)送的內(nèi)容。但是在考慮這個(gè)方法之前，回想一下前面已經(jīng)通過(guò) URL 本身發(fā)送過(guò)數(shù)據(jù)了：

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

雖然可以使用 send() 發(fā)送數(shù)據(jù)，但也能通過(guò) URL 本身發(fā)送數(shù)據(jù)。事實(shí)上，GET 請(qǐng)求（在典型的 Ajax 應(yīng)用中大約占 80%）中，用 URL 發(fā)送數(shù)據(jù)要容易得多。如果需要發(fā)送安全信息或 XML，可能要考慮使用 send() 發(fā)送內(nèi)容（本系列的后續(xù)文章中將討論安全數(shù)據(jù)和 XML 消息）。如果不需要通過(guò) send() 傳遞數(shù)據(jù)，則只要傳遞 null 作為該方法的參數(shù)即可。因此您會(huì)發(fā)現(xiàn)在本文中的例子中只需要這樣發(fā)送請(qǐng)求（參見(jiàn) 清單 10）。

清單 10. 發(fā)送請(qǐng)求

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)在我們所做的只有很少一點(diǎn)是新的、革命性的或異步的。必須承認(rèn)，open() 方法中 “true” 這個(gè)小小的關(guān)鍵字建立了異步請(qǐng)求。但是除此之外，這些代碼與用 Java servlet 及 JSP、PHP 或 Perl 編程沒(méi)有什么兩樣。那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLHttpRequest 的一個(gè)簡(jiǎn)單屬性 onreadystatechange。

首先一定要理解這些代碼中的流程（如果需要請(qǐng)回顧 清單 10）。建立其請(qǐng)求然后發(fā)出請(qǐng)求。此外，因?yàn)槭钱惒秸?qǐng)求，所以 JavaScript 方法（例子中的 getCustomerInfo()）不會(huì)等待服務(wù)器。因此代碼將繼續(xù)執(zhí)行，就是說(shuō)，將退出該方法而把控制返回給表單。用戶可以繼續(xù)輸入信息，應(yīng)用程序不會(huì)等待服務(wù)器。

這就提出了一個(gè)有趣的問(wèn)題：服務(wù)器完成了請(qǐng)求之后會(huì)發(fā)生什么？答案是什么也不發(fā)生，至少對(duì)現(xiàn)在的代碼而言如此！顯然這樣不行，因此服務(wù)器在完成通過(guò) XMLHttpRequest 發(fā)送給它的請(qǐng)求處理之后需要某種指示說(shuō)明怎么做。

在 JavaScript 中引用函數(shù)：
JavaScript 是一種弱類(lèi)型的語(yǔ)言，可以用變量引用任何東西。因此如果聲明了一個(gè)函數(shù) updatePage()，JavaScript 也將該函數(shù)名看作是一個(gè)變量。換句話說(shuō)，可用變量名 updatePage 在代碼中引用函數(shù)。

清單 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ā)送請(qǐng)求之前必須設(shè)置該屬性，這樣服務(wù)器在回答完成請(qǐng)求之后才能查看該屬性。現(xiàn)在剩下的就只有編寫(xiě) updatePage() 方法了，這是本文最后一節(jié)要討論的重點(diǎn)。

處理服務(wù)器響應(yīng)

發(fā)送請(qǐng)求，用戶高興地使用 Web 表單（同時(shí)服務(wù)器在處理請(qǐng)求），而現(xiàn)在服務(wù)器完成了請(qǐng)求處理。服務(wù)器查看 onreadystatechange 屬性確定要調(diào)用的方法。除此以外，可以將您的應(yīng)用程序看作其他應(yīng)用程序一樣，無(wú)論是否異步。換句話說(shuō)，不一定要采取特殊的動(dòng)作編寫(xiě)響應(yīng)服務(wù)器的方法，只需要改變表單，讓用戶訪問(wèn)另一個(gè) URL 或者做響應(yīng)服務(wù)器需要的任何事情。這一節(jié)我們重點(diǎn)討論對(duì)服務(wù)器的響應(yīng)和一種典型的動(dòng)作 —— 即時(shí)改變用戶看到的表單中的一部分。

回調(diào)和 Ajax

現(xiàn)在我們已經(jīng)看到如何告訴服務(wù)器完成后應(yīng)該做什么：將 XMLHttpRequest 對(duì)象的 onreadystatechange 屬性設(shè)置為要運(yùn)行的函數(shù)名。這樣，當(dāng)服務(wù)器處理完請(qǐng)求后就會(huì)自動(dòng)調(diào)用該函數(shù)。也不需要擔(dān)心該函數(shù)的任何參數(shù)。我們從一個(gè)簡(jiǎn)單的方法開(kāi)始，如 清單 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ā)出一些簡(jiǎn)單的警告，告訴您服務(wù)器什么時(shí)候完成了任務(wù)。在自己的網(wǎng)頁(yè)中試驗(yàn)這些代碼，然后在瀏覽器中打開(kāi)（如果希望查看該例中的 XHTML，請(qǐng)參閱 清單 8）。輸入電話號(hào)碼然后離開(kāi)該字段，將看到一個(gè)彈出的警告窗口（如 圖 3 所示），但是點(diǎn)擊 OK 又出現(xiàn)了……

圖 3. 彈出警告的 Ajax 代碼

根據(jù)瀏覽器的不同，在表單停止彈出警告之前會(huì)看到兩次、三次甚至四次警告。這是怎么回事呢？原來(lái)我們還沒(méi)有考慮 HTTP 就緒狀態(tài)，這是請(qǐng)求/響應(yīng)循環(huán)中的一個(gè)重要部分。

HTTP 就緒狀態(tài)

前面提到，服務(wù)器在完成請(qǐng)求之后會(huì)在 XMLHttpRequest 的 onreadystatechange 屬性中查找要調(diào)用的方法。這是真的，但還不完整。事實(shí)上，每當(dāng) HTTP 就緒狀態(tài)改變時(shí)它都會(huì)調(diào)用該方法。這意味著什么呢？首先必須理解 HTTP 就緒狀態(tài)。

HTTP 就緒狀態(tài)表示請(qǐng)求的狀態(tài)或情形。它用于確定該請(qǐng)求是否已經(jīng)開(kāi)始、是否得到了響應(yīng)或者請(qǐng)求/響應(yīng)模型是否已經(jīng)完成。它還可以幫助確定讀取服務(wù)器提供的響應(yīng)文本或數(shù)據(jù)是否安全。在 Ajax 應(yīng)用程序中需要了解五種就緒狀態(tài)：

·0：請(qǐng)求沒(méi)有發(fā)出（在調(diào)用 open() 之前）。
·1：請(qǐng)求已經(jīng)建立但還沒(méi)有發(fā)出（調(diào)用 send() 之前）。
·2：請(qǐng)求已經(jīng)發(fā)出正在處理之中（這里通常可以從響應(yīng)得到內(nèi)容頭部）。
·3：請(qǐng)求已經(jīng)處理，響應(yīng)中通常有部分?jǐn)?shù)據(jù)可用，但是服務(wù)器還沒(méi)有完成響應(yīng)。
·4：響應(yīng)已完成，可以訪問(wèn)服務(wù)器響應(yīng)并使用它。

與大多數(shù)跨瀏覽器問(wèn)題一樣，這些就緒狀態(tài)的使用也不盡一致。您也許期望任務(wù)就緒狀態(tài)從 0 到 1、2、3 再到 4，但實(shí)際上很少是這種情況。一些瀏覽器從不報(bào)告 0 或 1 而直接從 2 開(kāi)始，然后是 3 和 4。其他瀏覽器則報(bào)告所有的狀態(tài)。還有一些則多次報(bào)告就緒狀態(tài) 1。在上一節(jié)中看到，服務(wù)器多次調(diào)用 updatePage()，每次調(diào)用都會(huì)彈出警告框 —— 可能和預(yù)期的不同！

對(duì)于 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)完成。嘗試運(yùn)行新版本的 Ajax 代碼，現(xiàn)在就會(huì)看到與預(yù)期的一樣，只顯示一次警告信息了。

HTTP 狀態(tài)碼

雖然 清單 13 中的代碼看起來(lái)似乎不錯(cuò)，但是還有一個(gè)問(wèn)題 —— 如果服務(wù)器響應(yīng)請(qǐng)求并完成了處理但是報(bào)告了一個(gè)錯(cuò)誤怎么辦？要知道，服務(wù)器端代碼應(yīng)該明白它是由 Ajax、JSP、普通 HTML 表單或其他類(lèi)型的代碼調(diào)用的，但只能使用傳統(tǒng)的 Web 專(zhuān)用方法報(bào)告信息。而在 Web 世界中，HTTP 代碼可以處理請(qǐng)求中可能發(fā)生的各種問(wèn)題。

比方說(shuō)，您肯定遇到過(guò)輸入了錯(cuò)誤的 URL 請(qǐng)求而得到 404 錯(cuò)誤碼的情形，它表示該頁(yè)面不存在。這僅僅是 HTTP 請(qǐng)求能夠收到的眾多錯(cuò)誤碼中的一種（完整的狀態(tài)碼列表請(qǐng)參閱 參考資料 中的鏈接）。表示所訪問(wèn)數(shù)據(jù)受到保護(hù)或者禁止訪問(wèn)的 403 和 401 也很常見(jiàn)。無(wú)論哪種情況，這些錯(cuò)誤碼都是從完成的響應(yīng) 得到的。換句話說(shuō)，服務(wù)器履行了請(qǐng)求（即 HTTP 就緒狀態(tài)是 4）但是沒(méi)有返回客戶機(jī)預(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ù)（而不是錯(cuò)誤或者其他有問(wèn)題的信息）。因此還要在回調(diào)方法中增加狀態(tài)檢查，如 清單 14 所示。

清單 14. 檢查 HTTP 狀態(tài)碼

function updatePage() {
if (request.readyState == 4)
if (request.status == 200)
alert("Server is done!");
}

為了增加更健壯的錯(cuò)誤處理并盡量避免過(guò)于復(fù)雜，可以增加一兩個(gè)狀態(tài)碼檢查，請(qǐng)看一看 清單 15 中修改后的 updatePage() 版本。

清單 15. 增加一點(diǎn)錯(cuò)誤檢查

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 看看會(huì)發(fā)生什么。應(yīng)該會(huì)看到警告信息說(shuō)明要求的 URL 不存在 —— 好極了！很難處理所有的錯(cuò)誤條件，但是這一小小的改變能夠涵蓋典型 Web 應(yīng)用程序中 80% 的問(wèn)題。

讀取響應(yīng)文本

現(xiàn)在可以確保請(qǐng)求已經(jīng)處理完成（通過(guò)就緒狀態(tài)），服務(wù)器給出了正常的響應(yīng)（通過(guò)狀態(tài)碼），最后我們可以處理服務(wù)器返回的數(shù)據(jù)了。返回的數(shù)據(jù)保存在 XMLHttpRequest 對(duì)象的 responseText 屬性中。

關(guān)于 responseText 中的文本內(nèi)容，比如格式和長(zhǎng)度，有意保持含糊。這樣服務(wù)器就可以將文本設(shè)置成任何內(nèi)容。比方說(shuō)，一種腳本可能返回逗號(hào)分隔的值，另一種則使用管道符（即 | 字符）分隔的值，還有一種則返回長(zhǎng)文本字符串。何去何從由服務(wù)器決定。

在本文使用的例子中，服務(wù)器返回客戶的上一個(gè)訂單和客戶地址，中間用管道符分開(kāi)。然后使用訂單和地址設(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() 方法從管道符分開(kāi)。得到的數(shù)組放到 response 中。數(shù)組中的第一個(gè)值 —— 上一個(gè)訂單 —— 用 response[0] 訪問(wèn)，被設(shè)置為 ID 為 “order” 的字段的值。第二個(gè)值 response[1]，即客戶地址，則需要更多一點(diǎn)處理。因?yàn)榈刂分械男杏靡话愕男蟹指舴?ldquo;/n”字符）分隔，代碼中需要用 XHTML 風(fēng)格的行分隔符 <br /> 來(lái)代替。替換過(guò)程使用 replace() 函數(shù)和正則表達(dá)式完成。最后，修改后的文本作為 HTML 表單 div 中的內(nèi)部 HTML。結(jié)果就是表單突然用客戶信息更新了，如圖 4 所示。

圖 4. 收到客戶數(shù)據(jù)后的 Break Neck 表單

結(jié)束本文之前，我還要介紹 XMLHttpRequest 的另一個(gè)重要屬性 responseXML。如果服務(wù)器選擇使用 XML 響應(yīng)則該屬性包含（也許您已經(jīng)猜到）XML 響應(yīng)。處理 XML 響應(yīng)和處理普通文本有很大不同，涉及到解析、文檔對(duì)象模型（DOM）和其他一些問(wèn)題。后面的文章中將進(jìn)一步介紹 XML。但是因?yàn)?responseXML 通常和 responseText 一起討論，這里有必要提一提。對(duì)于很多簡(jiǎn)單的 Ajax 應(yīng)用程序 responseText 就夠了，但是您很快就會(huì)看到通過(guò) Ajax 應(yīng)用程序也能很好地處理 XML。

結(jié)束語(yǔ)

您可能對(duì) XMLHttpRequest 感到有點(diǎn)厭倦了，我很少看到一整篇文章討論一個(gè)對(duì)象，特別是這種簡(jiǎn)單的對(duì)象。但是您將在使用 Ajax 編寫(xiě)的每個(gè)頁(yè)面和應(yīng)用程序中反復(fù)使用該對(duì)象。坦白地說(shuō)，關(guān)于 XMLHttpRequest 還真有一些可說(shuō)的內(nèi)容。下一期文章中將介紹如何在請(qǐng)求中使用 POST 及 GET，來(lái)設(shè)置請(qǐng)求中的內(nèi)容頭部和從服務(wù)器響應(yīng)讀取內(nèi)容頭部，理解如何在請(qǐng)求/響應(yīng)模型中編碼請(qǐng)求和處理 XML。

再往后我們將介紹常見(jiàn) Ajax 工具箱。這些工具箱實(shí)際上隱藏了本文所述的很多細(xì)節(jié)，使得 Ajax 編程更容易。您也許會(huì)想，既然有這么多工具箱為何還要對(duì)底層的細(xì)節(jié)編碼。答案是，如果不知道應(yīng)用程序在做什么，就很難發(fā)現(xiàn)應(yīng)用程序中的問(wèn)題。

因此不要忽略這些細(xì)節(jié)或者簡(jiǎn)單地瀏覽一下，如果便捷華麗的工具箱出現(xiàn)了錯(cuò)誤，您就不必?fù)项^或者發(fā)送郵件請(qǐng)求支持了。如果了解如何直接使用 XMLHttpRequest，就會(huì)發(fā)現(xiàn)很容易調(diào)試和解決最奇怪的問(wèn)題。只有讓其解決您的問(wèn)題，工具箱才是好東西。

因此請(qǐng)熟悉 XMLHttpRequest 吧。事實(shí)上，如果您有使用工具箱的 Ajax 代碼，可以嘗試使用 XMLHttpRequest 對(duì)象及其屬性和方法重新改寫(xiě)。這是一種不錯(cuò)的練習(xí)，可以幫助您更好地理解其中的原理。