2006 年 1 月 04 日

　　五年前，如果不知道 XML，您就是一只無(wú)人重視的丑小鴨。十八個(gè)月前，Ruby 成了關(guān)注的中心，不知道 Ruby 的程序員只能坐冷板凳了。今天，如果想跟上最新的技術(shù)時(shí)尚，那您的目標(biāo)就是 Ajax。

　　但是，Ajax 不僅僅是一種時(shí)尚，它是一種構(gòu)建網(wǎng)站的強(qiáng)大方法，而且不像學(xué)習(xí)一種全新的語(yǔ)言那樣困難。

　　但在詳細(xì)探討 Ajax 是什么之前，先讓我們花幾分鐘了解 Ajax 做什么。目前，編寫應(yīng)用程序時(shí)有兩種基本的選擇：

　　桌面應(yīng)用程序，Web 應(yīng)用程序。兩者是類似的，桌面應(yīng)用程序通常以 CD 為介質(zhì)（有時(shí)候可從網(wǎng)站下載）并完全安裝到您的計(jì)算機(jī)上。桌面應(yīng)用程序可能使用互聯(lián)網(wǎng)下載更新，但運(yùn)行這些應(yīng)用程序的代碼在桌面計(jì)算機(jī)上。Web 應(yīng)用程序運(yùn)行在某處的 Web 服務(wù)器上 —— 毫不奇怪，要通過 Web 瀏覽器訪問這種應(yīng)用程序。

　　不過，比這些應(yīng)用程序的運(yùn)行代碼放在何處更重要的是，應(yīng)用程序如何運(yùn)轉(zhuǎn)以及如何與其進(jìn)行交互。桌面應(yīng)用程序一般很快（就在您的計(jì)算機(jī)上運(yùn)行，不用等待互聯(lián)網(wǎng)連接），具有漂亮的用戶界面（通常和操作系統(tǒng)有關(guān)）和非凡的動(dòng)態(tài)性。可以單擊、選擇、輸入、打開菜單和子菜單、到處巡游，基本上不需要等待。

　　另一方面，Web 應(yīng)用程序是最新的潮流，它們提供了在桌面上不能實(shí)現(xiàn)的服務(wù)（比如 Amazon.com 和 eBay）。但是，伴隨著 Web 的強(qiáng)大而出現(xiàn)的是等待，等待服務(wù)器響應(yīng)，等待屏幕刷新，等待請(qǐng)求返回和生成新的頁(yè)面。

　　顯然這樣說過于簡(jiǎn)略了，但基本的概念就是如此。您可能已經(jīng)猜到，Ajax 嘗試建立桌面應(yīng)用程序的功能和交互性，與不斷更新的 Web 應(yīng)用程序之間的橋梁。可以使用像桌面應(yīng)用程序中常見的動(dòng)態(tài)用戶界面和漂亮的控件，不過是在 Web 應(yīng)用程序中。

　　還等什么呢？我們來看看 Ajax 如何將笨拙的 Web 界面轉(zhuǎn)化成能迅速響應(yīng)的 Ajax 應(yīng)用程序吧。

　　老技術(shù)，新技巧

　　在談到 Ajax 時(shí)，實(shí)際上涉及到多種技術(shù)，要靈活地運(yùn)用它必須深入了解這些不同的技術(shù)（本系列的頭幾篇文章將分別討論這些技術(shù)）。好消息是您可能已經(jīng)非常熟悉其中的大部分技術(shù)，更好的是這些技術(shù)都很容易學(xué)習(xí)，并不像完整的編程語(yǔ)言（如 Java 或 Ruby）那樣困難。

　　Ajax 的定義

　　順便說一下，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫。這個(gè)短語(yǔ)是 Adaptive Path 的 Jesse James Garrett 發(fā)明的，按照 Jesse 的解釋，這不是個(gè)首字母縮寫詞。

　　下面是 Ajax 應(yīng)用程序所用到的基本技術(shù)：

HTML 用于建立 Web 表單并確定應(yīng)用程序其他部分使用的字段。
JavaScript 代碼是運(yùn)行 Ajax 應(yīng)用程序的核心代碼，幫助改進(jìn)與服務(wù)器應(yīng)用程序的通信。
DHTML 或 Dynamic HTML，用于動(dòng)態(tài)更新表單。我們將使用div、span和其他動(dòng)態(tài) HTML 元素來標(biāo)記 HTML。
文檔對(duì)象模型 DOM 用于（通過 JavaScript 代碼）處理 HTML 結(jié)構(gòu)和（某些情況下）服務(wù)器返回的 XML。

　　我們來進(jìn)一步分析這些技術(shù)的職責(zé)。以后的文章中我將深入討論這些技術(shù)，目前只要熟悉這些組件和技術(shù)就可以了。對(duì)這些代碼越熟悉，就越容易從對(duì)這些技術(shù)的零散了解轉(zhuǎn)變到真正把握這些技術(shù)（同時(shí)也真正打開了 Web 應(yīng)用程序開發(fā)的大門）。

　　XMLHttpRequest 對(duì)象

　　要了解的一個(gè)對(duì)象可能對(duì)您來說也是最陌生的，即XMLHttpRequest。這是一個(gè) JavaScript 對(duì)象，創(chuàng)建該對(duì)象很簡(jiǎn)單，如清單 1 所示。

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

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

　　下一期文章中將進(jìn)一步討論這個(gè)對(duì)象，現(xiàn)在要知道這是處理所有服務(wù)器通信的對(duì)象。繼續(xù)閱讀之前，先停下來想一想：通過XMLHttpRequest對(duì)象與服務(wù)器進(jìn)行對(duì)話的是 JavaScript 技術(shù)。這不是一般的應(yīng)用程序流，這恰恰是 Ajax 的強(qiáng)大功能的來源。

　　在一般的 Web 應(yīng)用程序中，用戶填寫表單字段并單擊 Submit 按鈕。然后整個(gè)表單發(fā)送到服務(wù)器，服務(wù)器將它轉(zhuǎn)發(fā)給處理表單的腳本（通常是 PHP 或 Java，也可能是 CGI 進(jìn)程或者類似的東西），腳本執(zhí)行完成后再發(fā)送回全新的頁(yè)面。該頁(yè)面可能是帶有已經(jīng)填充某些數(shù)據(jù)的新表單的 HTML，也可能是確認(rèn)頁(yè)面，或者是具有根據(jù)原來表單中輸入數(shù)據(jù)選擇的某些選項(xiàng)的頁(yè)面。當(dāng)然，在服務(wù)器上的腳本或程序處理和返回新表單時(shí)用戶必須等待。屏幕變成一片空白，等到服務(wù)器返回?cái)?shù)據(jù)后再重新繪制。這就是交互性差的原因，用戶得不到立即反饋，因此感覺不同于桌面應(yīng)用程序。

　　Ajax 基本上就是把 JavaScript 技術(shù)和XMLHttpRequest對(duì)象放在 Web 表單和服務(wù)器之間。當(dāng)用戶填寫表單時(shí)，數(shù)據(jù)發(fā)送給一些 JavaScript 代碼而不是直接發(fā)送給服務(wù)器。相反，JavaScript 代碼捕獲表單數(shù)據(jù)并向服務(wù)器發(fā)送請(qǐng)求。同時(shí)用戶屏幕上的表單也不會(huì)閃爍、消失或延遲。換句話說，JavaScript 代碼在幕后發(fā)送請(qǐng)求，用戶甚至不知道請(qǐng)求的發(fā)出。更好的是，請(qǐng)求是異步發(fā)送的，就是說 JavaScript 代碼（和用戶）不用等待服務(wù)器的響應(yīng)。因此用戶可以繼續(xù)輸入數(shù)據(jù)、滾動(dòng)屏幕和使用應(yīng)用程序。

　　然后，服務(wù)器將數(shù)據(jù)返回 JavaScript 代碼（仍然在 Web 表單中），后者決定如何處理這些數(shù)據(jù)。它可以迅速更新表單數(shù)據(jù)，讓人感覺應(yīng)用程序是立即完成的，表單沒有提交或刷新而用戶得到了新數(shù)據(jù)。JavaScript 代碼甚至可以對(duì)收到的數(shù)據(jù)執(zhí)行某種計(jì)算，再發(fā)送另一個(gè)請(qǐng)求，完全不需要用戶干預(yù)！這就是XMLHttpRequest的強(qiáng)大之處。它可以根據(jù)需要自行與服務(wù)器進(jìn)行交互，用戶甚至可以完全不知道幕后發(fā)生的一切。結(jié)果就是類似于桌面應(yīng)用程序的動(dòng)態(tài)、快速響應(yīng)、高交互性的體驗(yàn)，但是背后又擁有互聯(lián)網(wǎng)的全部強(qiáng)大力量。

　　加入一些 JavaScript

　　得到XMLHttpRequest的句柄后，其他的 JavaScript 代碼就非常簡(jiǎn)單了。事實(shí)上，我們將使用 JavaScript 代碼完成非常基本的任務(wù)：

獲取表單數(shù)據(jù)：JavaScript 代碼很容易從 HTML 表單中抽取數(shù)據(jù)并發(fā)送到服務(wù)器。
修改表單上的數(shù)據(jù)：更新表單也很簡(jiǎn)單，從設(shè)置字段值到迅速替換圖像。
解析 HTML 和 XML：使用 JavaScript 代碼操縱 DOM（請(qǐng)參閱 下一節(jié)），處理 HTML 表單服務(wù)器返回的 XML 數(shù)據(jù)的結(jié)構(gòu)。

　　對(duì)于前兩點(diǎn)，需要非常熟悉getElementById()方法，如清單 2 所示。

　　清單 2. 用 JavaScript 代碼捕獲和設(shè)置字段值

// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;
// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

　　這里沒有特別需要注意的地方，真是好極了！您應(yīng)該認(rèn)識(shí)到這里并沒有非常復(fù)雜的東西。只要掌握了XMLHttpRequest，Ajax 應(yīng)用程序的其他部分就是如清單 2 所示的簡(jiǎn)單 JavaScript 代碼了，混合有少量的 HTML。同時(shí)，還要用一點(diǎn)兒 DOM，我們就來看看吧。

　　以 DOM 結(jié)束

　　最后還有 DOM，即文檔對(duì)象模型。可能對(duì)有些讀者來說 DOM 有點(diǎn)兒令人生畏，HTML 設(shè)計(jì)者很少使用它，即使 JavaScript 程序員也不大用到它，除非要完成某項(xiàng)高端編程任務(wù)。大量使用 DOM 的是復(fù)雜的 Java 和 C/C++ 程序，這可能就是 DOM 被認(rèn)為難以學(xué)習(xí)的原因。

　　幸運(yùn)的是，在 JavaScript 技術(shù)中使用 DOM 很容易，也非常直觀。現(xiàn)在，按照常規(guī)也許應(yīng)該說明如何使用 DOM，或者至少要給出一些示例代碼，但這樣做也可能誤導(dǎo)您。即使不理會(huì) DOM，仍然能深入地探討 Ajax，這也是我準(zhǔn)備采用的方法。以后的文章將再次討論 DOM，現(xiàn)在只要知道可能需要 DOM 就可以了。當(dāng)需要在 JavaScript 代碼和服務(wù)器之間傳遞 XML 和改變 HTML 表單的時(shí)候，我們?cè)偕钊胙芯?DOM。沒有它也能做一些有趣的工作，因此現(xiàn)在就把 DOM 放到一邊吧。

　　獲取 Request 對(duì)象

　　有了上面的基礎(chǔ)知識(shí)后，我們來看看一些具體的例子。XMLHttpRequest是 Ajax 應(yīng)用程序的核心，而且對(duì)很多讀者來說可能還比較陌生，我們就從這里開始吧。從清單 1 可以看出，創(chuàng)建和使用這個(gè)對(duì)象非常簡(jiǎn)單，不是嗎？等一等。

　　還記得幾年前的那些討厭的瀏覽器戰(zhàn)爭(zhēng)嗎？沒有一樣?xùn)|西在不同的瀏覽器上得到同樣的結(jié)果。不管您是否相信，這些戰(zhàn)爭(zhēng)仍然在繼續(xù)，雖然規(guī)模較小。但令人奇怪的是，XMLHttpRequest成了這場(chǎng)戰(zhàn)爭(zhēng)的犧牲品之一。因此獲得XMLHttpRequest對(duì)象可能需要采用不同的方法。下面我將詳細(xì)地進(jìn)行解釋。

　　使用 Microsoft 瀏覽器

　　Microsoft 瀏覽器 Internet Explorer 使用 MSXML 解析器處理 XML（可以通過參考資料進(jìn)一步了解 MSXML）。因此如果編寫的 Ajax 應(yīng)用程序要和 Internet Explorer 打交道，那么必須用一種特殊的方式創(chuàng)建對(duì)象。

　　但并不是這么簡(jiǎn)單。根據(jù) Internet Explorer 中安裝的 JavaScript 技術(shù)版本不同，MSXML 實(shí)際上有兩種不同的版本，因此必須對(duì)這兩種情況分別編寫代碼。請(qǐng)參閱清單 3，其中的代碼在 Microsoft 瀏覽器上創(chuàng)建了一個(gè)XMLHttpRequest。

　　清單 3. 在 Microsoft 瀏覽器上創(chuàng)建 XMLHttpRequest 對(duì)象

var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}

　　您對(duì)這些代碼可能還不完全理解，但沒有關(guān)系。當(dāng)本系列文章結(jié)束的時(shí)候，您將對(duì) JavaScript 編程、錯(cuò)誤處理、條件編譯等有更深的了解。現(xiàn)在只要牢牢記住其中的兩行代碼：

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

　和

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");。

　　這兩行代碼基本上就是嘗試使用一個(gè)版本的 MSXML 創(chuàng)建對(duì)象，如果失敗則使用另一個(gè)版本創(chuàng)建該對(duì)象。不錯(cuò)吧？如果都不成功，則將xmlHttp變量設(shè)為 false，告訴您的代碼出現(xiàn)了問題。如果出現(xiàn)這種情況，可能是因?yàn)榘惭b了非 Microsoft 瀏覽器，需要使用不同的代碼。

　　處理 Mozilla 和非 Microsoft 瀏覽器

　　如果選擇的瀏覽器不是 Internet Explorer，或者為非 Microsoft 瀏覽器編寫代碼，就需要使用不同的代碼。事實(shí)上就是清單 1 所示的一行簡(jiǎn)單代碼：

var xmlHttp = new XMLHttpRequest object;。

　　這行簡(jiǎn)單得多的代碼在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 瀏覽器中，創(chuàng)建了XMLHttpRequest對(duì)象。

　　結(jié)合起來

　　關(guān)鍵是要支持所有瀏覽器。誰(shuí)愿意編寫一個(gè)只能用于 Internet Explorer 或者非 Microsoft 瀏覽器的應(yīng)用程序呢？或者更糟，要編寫一個(gè)應(yīng)用程序兩次？當(dāng)然不！因此代碼要同時(shí)支持 Internet Explorer 和非 Microsoft 瀏覽器。清單 4 顯示了這樣的代碼。

　　清單 4. 以支持多種瀏覽器的方式創(chuàng)建 XMLHttpRequest 對(duì)象

/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}

　　現(xiàn)在先不管那些注釋掉的奇怪符號(hào)，如@cc_on，這是特殊的 JavaScript 編譯器命令，將在下一期針對(duì)XMLHttpRequest的文章中詳細(xì)討論。這段代碼的核心分為三步：

　　1. 建立一個(gè)變量xmlHttp來引用即將創(chuàng)建的XMLHttpRequest對(duì)象。
　　2. 嘗試在 Microsoft 瀏覽器中創(chuàng)建該對(duì)象：
　　o 嘗試使用Msxml2.XMLHTTP對(duì)象創(chuàng)建它。
　　o 如果失敗，再嘗試Microsoft.XMLHTTP對(duì)象。
　　3. 如果仍然沒有建立xmlHttp，則以非 Microsoft 的方式創(chuàng)建該對(duì)象。

　　最后，xmlHttp應(yīng)該引用一個(gè)有效的XMLHttpRequest對(duì)象，無(wú)論運(yùn)行什么樣的瀏覽器。

　　關(guān)于安全性的一點(diǎn)說明

　　安全性如何呢？現(xiàn)在瀏覽器允許用戶提高他們的安全等級(jí)，關(guān)閉 JavaScript 技術(shù)，禁用瀏覽器中的任何選項(xiàng)。在這種情況下，代碼無(wú)論如何都不會(huì)工作。此時(shí)必須適當(dāng)?shù)靥幚韱栴}，這需要單獨(dú)的一篇文章來討論，要放到以后了（這個(gè)系列夠長(zhǎng)了吧？不用擔(dān)心，讀完之前也許您就掌握了）。現(xiàn)在要編寫一段健壯但不夠完美的代碼，對(duì)于掌握 Ajax 來說就很好了。以后我們還將討論更多的細(xì)節(jié)。

　　Ajax 世界中的請(qǐng)求/響應(yīng)

　　現(xiàn)在我們介紹了 Ajax，對(duì)XMLHttpRequest對(duì)象以及如何創(chuàng)建它也有了基本的了解。如果閱讀得很仔細(xì)，您可能已經(jīng)知道與服務(wù)器上的 Web 應(yīng)用程序打交道的是 JavaScript 技術(shù)，而不是直接提交給那個(gè)應(yīng)用程序的 HTML 表單。

　　還缺少什么呢？到底如何使用XMLHttpRequest。因?yàn)檫@段代碼非常重要，您編寫的每個(gè) Ajax 應(yīng)用程序都要以某種形式使用它，先看看 Ajax 的基本請(qǐng)求/響應(yīng)模型是什么樣吧。

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

　　您已經(jīng)有了一個(gè)嶄新的XMLHttpRequest對(duì)象，現(xiàn)在讓它干點(diǎn)活兒吧。首先需要一個(gè) Web 頁(yè)面能夠調(diào)用的 JavaScript 方法（比如當(dāng)用戶輸入文本或者從菜單中選擇一項(xiàng)時(shí)）。接下來就是在所有 Ajax 應(yīng)用程序中基本都雷同的流程：

1. 從 Web 表單中獲取需要的數(shù)據(jù)。
2. 建立要連接的 URL。
3. 打開到服務(wù)器的連接。
4. 設(shè)置服務(wù)器在完成后要運(yùn)行的函數(shù)。
5. 發(fā)送請(qǐng)求。

　　清單 5 中的示例 Ajax 方法就是按照這個(gè)順序組織的：

　　清單 5. 發(fā)出 Ajax 請(qǐng)求

function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;

// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

// Open a connection to the server
xmlHttp.open("GET", url, true);

// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;

// Send the request
xmlHttp.send(null);
}

　　其中大部分代碼意義都很明確。開始的代碼使用基本 JavaScript 代碼獲取幾個(gè)表單字段的值。然后設(shè)置一個(gè) PHP 腳本作為鏈接的目標(biāo)。要注意腳本 URL 的指定方式，city 和 state（來自表單）使用簡(jiǎn)單的 GET 參數(shù)附加在 URL 之后。

　　然后打開一個(gè)連接，這是您第一次看到使用XMLHttpRequest。其中指定了連接方法（GET）和要連接的 URL。最后一個(gè)參數(shù)如果設(shè)為true，那么將請(qǐng)求一個(gè)異步連接（這就是 Ajax 的由來）。如果使用false，那么代碼發(fā)出請(qǐng)求后將等待服務(wù)器返回的響應(yīng)。如果設(shè)為true，當(dāng)服務(wù)器在后臺(tái)處理請(qǐng)求的時(shí)候用戶仍然可以使用表單（甚至調(diào)用其他 JavaScript 方法）。

　　xmlHttp（要記住，這是XMLHttpRequest對(duì)象實(shí)例）的onreadystatechange屬性可以告訴服務(wù)器在運(yùn)行完成后（可能要用五分鐘或者五個(gè)小時(shí)）做什么。因?yàn)榇a沒有等待服務(wù)器，必須讓服務(wù)器知道怎么做以便您能作出響應(yīng)。在這個(gè)示例中，如果服務(wù)器處理完了請(qǐng)求，一個(gè)特殊的名為updatePage()的方法將被觸發(fā)。

　　最后，使用值null調(diào)用send()。因?yàn)橐呀?jīng)在請(qǐng)求 URL 中添加了要發(fā)送給服務(wù)器的數(shù)據(jù)（city 和 state），所以請(qǐng)求中不需要發(fā)送任何數(shù)據(jù)。這樣就發(fā)出了請(qǐng)求，服務(wù)器按照您的要求工作。

　　如果沒有發(fā)現(xiàn)任何新鮮的東西，您應(yīng)該體會(huì)到這是多么簡(jiǎn)單明了！除了牢牢記住 Ajax 的異步特性外，這些內(nèi)容都相當(dāng)簡(jiǎn)單。應(yīng)該感激 Ajax 使您能夠?qū)Ｐ木帉懫恋膽?yīng)用程序和界面，而不用擔(dān)心復(fù)雜的 HTTP 請(qǐng)求/響應(yīng)代碼。

　　清單 5 中的代碼說明了 Ajax 的易用性。數(shù)據(jù)是簡(jiǎn)單的文本，可以作為請(qǐng)求 URL 的一部分。用 GET 而不是更復(fù)雜的 POST 發(fā)送請(qǐng)求。沒有 XML 和要添加的內(nèi)容頭部，請(qǐng)求體中沒有要發(fā)送的數(shù)據(jù)；換句話說，這就是 Ajax 的烏托邦。

　　不用擔(dān)心，隨著本系列文章的展開，事情會(huì)變得越來越復(fù)雜。您將看到如何發(fā)送 POST 請(qǐng)求、如何設(shè)置請(qǐng)求頭部和內(nèi)容類型、如何在消息中編碼 XML、如何增加請(qǐng)求的安全性，可以做的工作還有很多！暫時(shí)先不用管那些難點(diǎn)，掌握好基本的東西就行了，很快我們就會(huì)建立一整套的 Ajax 工具庫(kù)。

　　處理響應(yīng)

　　現(xiàn)在要面對(duì)服務(wù)器的響應(yīng)了。現(xiàn)在只要知道兩點(diǎn)：

　　什么也不要做，直到xmlHttp.readyState屬性的值等于 4。 服務(wù)器將把響應(yīng)填充到xmlHttp.responseText屬性中。

　　其中的第一點(diǎn)，即就緒狀態(tài)，將在下一篇文章中詳細(xì)討論，您將進(jìn)一步了解 HTTP 請(qǐng)求的階段，可能比您設(shè)想的還多。現(xiàn)在只要檢查一個(gè)特定的值（4）就可以了（下一期文章中還有更多的值要介紹）。第二點(diǎn)，使用xmlHttp.responseText屬性獲得服務(wù)器的響應(yīng)，這很簡(jiǎn)單。清單 6 中的示例方法可供服務(wù)器根據(jù)清單 5 中發(fā)送的數(shù)據(jù)調(diào)用。

　　清單 6. 處理服務(wù)器響應(yīng)

function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}

　　這些代碼同樣既不難也不復(fù)雜。它等待服務(wù)器調(diào)用，如果是就緒狀態(tài)，則使用服務(wù)器返回的值（這里是用戶輸入的城市和州的 ZIP 編碼）設(shè)置另一個(gè)表單字段的值。于是包含 ZIP 編碼的zipCode字段突然出現(xiàn)了，而用戶沒有按任何按鈕！這就是前面所說的桌面應(yīng)用程序的感覺。快速響應(yīng)、動(dòng)態(tài)感受等等，這些都只因?yàn)橛辛诵⌒〉囊欢?Ajax 代碼。

　　細(xì)心的讀者可能注意到zipCode是一個(gè)普通的文本字段。一旦服務(wù)器返回 ZIP 編碼，updatePage()方法就用城市/州的 ZIP 編碼設(shè)置那個(gè)字段的值，用戶就可以改寫該值。這樣做有兩個(gè)原因：保持例子簡(jiǎn)單，說明有時(shí)候可能希望用戶能夠修改服務(wù)器返回的數(shù)據(jù)。要記住這兩點(diǎn)，它們對(duì)于好的用戶界面設(shè)計(jì)來說很重要。

　　連接 Web 表單

　　還有什么呢？實(shí)際上沒有多少了。一個(gè) JavaScript 方法捕捉用戶輸入表單的信息并將其發(fā)送到服務(wù)器，另一個(gè) JavaScript 方法監(jiān)聽和處理響應(yīng)，并在響應(yīng)返回時(shí)設(shè)置字段的值。所有這些實(shí)際上都依賴于調(diào)用第一個(gè) JavaScript 方法，它啟動(dòng)了整個(gè)過程。最明顯的辦法是在 HTML 表單中增加一個(gè)按鈕，但這是 2001 年的辦法，您不這樣認(rèn)為嗎？還是像清單 7 這樣利用 JavaScript 技術(shù)吧。

　　清單 7. 啟動(dòng)一個(gè) Ajax 過程

<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>

　　如果感覺這像是一段相當(dāng)普通的代碼，那就對(duì)了，正是如此！當(dāng)用戶在 city 或 state 字段中輸入新的值時(shí)，callServer()方法就被觸發(fā)，于是 Ajax 開始運(yùn)行了。有點(diǎn)兒明白怎么回事了吧？好，就是如此！