Ajax?由?HTML、JavaScript??技術(shù)、DHTML?和?DOM?組成，這一杰出的方法可以將笨拙的?Web?界面轉(zhuǎn)化成交互性的?Ajax?應(yīng)用程序。本文的作者是一位?Ajax?專家，他演示了這些技術(shù)如何協(xié)同工作?——?從總體概述到細(xì)節(jié)的討論?——?使高效的?Web?開發(fā)成為現(xiàn)實(shí)。他還揭開了?Ajax?核心概念的神秘面紗，包括?XMLHttpRequest?對象。
五年前，如果不知道?XML，您就是一只無人重視的丑小鴨。十八個(gè)月前，Ruby?成了關(guān)注的中心，不知道?Ruby?的程序員只能坐冷板凳了。今天，如果想跟上最新的技術(shù)時(shí)尚，那您的目標(biāo)就是?Ajax。
但是，Ajax?不僅僅是一種時(shí)尚，它是一種構(gòu)建網(wǎng)站的強(qiáng)大方法，而且不像學(xué)習(xí)一種全新的語言那樣困難。
但在詳細(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)，等待屏幕刷新，等待請求返回和生成新的頁面。
顯然這樣說過于簡略了，但基本的概念就是如此。您可能已經(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í)，并不像完整的編程語言（如?Java?或?Ruby）那樣困難。
Ajax?的定義
順便說一下，Ajax?是?Asynchronous?JavaScript?and?XML（以及?DHTML?等）的縮寫。這個(gè)短語是?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。
????*?文檔對象模型?DOM?用于（通過?JavaScript?代碼）處理?HTML?結(jié)構(gòu)和（某些情況下）服務(wù)器返回的?XML。?

我們來進(jìn)一步分析這些技術(shù)的職責(zé)。以后的文章中我將深入討論這些技術(shù)，目前只要熟悉這些組件和技術(shù)就可以了。對這些代碼越熟悉，就越容易從對這些技術(shù)的零散了解轉(zhuǎn)變到真正把握這些技術(shù)（同時(shí)也真正打開了?Web?應(yīng)用程序開發(fā)的大門）。
XMLHttpRequest?對象
要了解的一個(gè)對象可能對您來說也是最陌生的，即XMLHttpRequest。這是一個(gè)?JavaScript?對象，創(chuàng)建該對象很簡單，如清單?1?所示。

清單?1.?創(chuàng)建新的?XMLHttpRequest?對象
?
<script?language="javascript"?type="text/javascript">
var?xmlHttp?=?new?XMLHttpRequest();
</script>
?
下一期文章中將進(jìn)一步討論這個(gè)對象，現(xiàn)在要知道這是處理所有服務(wù)器通信的對象。繼續(xù)閱讀之前，先停下來想一想：通過XMLHttpRequest對象與服務(wù)器進(jìn)行對話的是?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ā)送回全新的頁面。該頁面可能是帶有已經(jīng)填充某些數(shù)據(jù)的新表單的?HTML，也可能是確認(rèn)頁面，或者是具有根據(jù)原來表單中輸入數(shù)據(jù)選擇的某些選項(xiàng)的頁面。當(dāng)然，在服務(wù)器上的腳本或程序處理和返回新表單時(shí)用戶必須等待。屏幕變成一片空白，等到服務(wù)器返回?cái)?shù)據(jù)后再重新繪制。這就是交互性差的原因，用戶得不到立即反饋，因此感覺不同于桌面應(yīng)用程序。
Ajax?基本上就是把?JavaScript?技術(shù)和XMLHttpRequest對象放在?Web?表單和服務(wù)器之間。當(dāng)用戶填寫表單時(shí)，數(shù)據(jù)發(fā)送給一些?JavaScript?代碼而不是直接發(fā)送給服務(wù)器。相反，JavaScript?代碼捕獲表單數(shù)據(jù)并向服務(wù)器發(fā)送請求。同時(shí)用戶屏幕上的表單也不會(huì)閃爍、消失或延遲。換句話說，JavaScript?代碼在幕后發(fā)送請求，用戶甚至不知道請求的發(fā)出。更好的是，請求是異步發(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?代碼甚至可以對收到的數(shù)據(jù)執(zhí)行某種計(jì)算，再發(fā)送另一個(gè)請求，完全不需要用戶干預(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?代碼就非常簡單了。事實(shí)上，我們將使用?JavaScript?代碼完成非?；镜娜蝿?wù)：

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

對于前兩點(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?所示的簡單?JavaScript?代碼了，混合有少量的?HTML。同時(shí)，還要用一點(diǎn)兒?DOM，我們就來看看吧。
以?DOM?結(jié)束
最后還有?DOM，即文檔對象模型?？赡軐τ行┳x者來說?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?很容易，也非常直觀?，F(xiàn)在，按照常規(guī)也許應(yīng)該說明如何使用?DOM，或者至少要給出一些示例代碼，但這樣做也可能誤導(dǎo)您。即使不理會(huì)?DOM，仍然能深入地探討?Ajax，這也是我準(zhǔn)備采用的方法。以后的文章將再次討論?DOM，現(xiàn)在只要知道可能需要?DOM?就可以了。當(dāng)需要在?JavaScript?代碼和服務(wù)器之間傳遞?XML?和改變?HTML?表單的時(shí)候，我們再深入研究?DOM。沒有它也能做一些有趣的工作，因此現(xiàn)在就把?DOM?放到一邊吧。
?
回頁首
?
獲取?Request?對象
有了上面的基礎(chǔ)知識(shí)后，我們來看看一些具體的例子。XMLHttpRequest是?Ajax?應(yīng)用程序的核心，而且對很多讀者來說可能還比較陌生，我們就從這里開始吧。從?清單?1?可以看出，創(chuàng)建和使用這個(gè)對象非常簡單，不是嗎？等一等。
還記得幾年前的那些討厭的瀏覽器戰(zhàn)爭嗎？沒有一樣?xùn)|西在不同的瀏覽器上得到同樣的結(jié)果。不管您是否相信，這些戰(zhàn)爭仍然在繼續(xù)，雖然規(guī)模較小。但令人奇怪的是，XMLHttpRequest成了這場戰(zhàn)爭的犧牲品之一。因此獲得XMLHttpRequest對象可能需要采用不同的方法。下面我將詳細(xì)地進(jìn)行解釋。
使用?Microsoft?瀏覽器
Microsoft?瀏覽器?Internet?Explorer?使用?MSXML?解析器處理?XML（可以通過?參考資料?進(jìn)一步了解?MSXML）。因此如果編寫的?Ajax?應(yīng)用程序要和?Internet?Explorer?打交道，那么必須用一種特殊的方式創(chuàng)建對象。
但并不是這么簡單。根據(jù)?Internet?Explorer?中安裝的?JavaScript?技術(shù)版本不同，MSXML?實(shí)際上有兩種不同的版本，因此必須對這兩種情況分別編寫代碼。請參閱?清單?3，其中的代碼在?Microsoft?瀏覽器上創(chuàng)建了一個(gè)XMLHttpRequest。

清單?3.?在?Microsoft?瀏覽器上創(chuàng)建?XMLHttpRequest?對象
?
var?xmlHttp?=?false;
try?{
?xmlHttp?=?new?ActiveXObject("Msxml2.XMLHTTP");
}?catch?(e)?{
?try?{
????xmlHttp?=?new?ActiveXObject("Microsoft.XMLHTTP");
?}?catch?(e2)?{
????xmlHttp?=?false;
?}
}
?
您對這些代碼可能還不完全理解，但沒有關(guān)系。當(dāng)本系列文章結(jié)束的時(shí)候，您將對?JavaScript?編程、錯(cuò)誤處理、條件編譯等有更深的了解?，F(xiàn)在只要牢牢記住其中的兩行代碼：
xmlHttp?=?new?ActiveXObject("Msxml2.XMLHTTP");
和
xmlHttp?=?new?ActiveXObject("Microsoft.XMLHTTP");。
這兩行代碼基本上就是嘗試使用一個(gè)版本的?MSXML?創(chuàng)建對象，如果失敗則使用另一個(gè)版本創(chuàng)建該對象。不錯(cuò)吧？如果都不成功，則將xmlHttp變量設(shè)為?false，告訴您的代碼出現(xiàn)了問題。如果出現(xiàn)這種情況，可能是因?yàn)榘惭b了非?Microsoft?瀏覽器，需要使用不同的代碼。
處理?Mozilla?和非?Microsoft?瀏覽器
如果選擇的瀏覽器不是?Internet?Explorer，或者為非?Microsoft?瀏覽器編寫代碼，就需要使用不同的代碼。事實(shí)上就是?清單?1?所示的一行簡單代碼：
var?xmlHttp?=?new?XMLHttpRequest?object;。
這行簡單得多的代碼在?Mozilla、Firefox、Safari、Opera?以及基本上所有以任何形式或方式支持?Ajax?的非?Microsoft?瀏覽器中，創(chuàng)建了XMLHttpRequest對象。
結(jié)合起來
關(guān)鍵是要支持所有瀏覽器。誰愿意編寫一個(gè)只能用于?Internet?Explorer?或者非?Microsoft?瀏覽器的應(yīng)用程序呢？或者更糟，要編寫一個(gè)應(yīng)用程序兩次？當(dāng)然不！因此代碼要同時(shí)支持?Internet?Explorer?和非?Microsoft?瀏覽器。清單?4?顯示了這樣的代碼。

清單?4.?以支持多種瀏覽器的方式創(chuàng)建?XMLHttpRequest?對象
?
/*?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?編譯器命令，將在下一期針對XMLHttpRequest的文章中詳細(xì)討論。這段代碼的核心分為三步：
1.???????建立一個(gè)變量xmlHttp來引用即將創(chuàng)建的XMLHttpRequest對象。
2.???????嘗試在?Microsoft?瀏覽器中創(chuàng)建該對象：
o????????嘗試使用Msxml2.XMLHTTP對象創(chuàng)建它。
o????????如果失敗，再嘗試Microsoft.XMLHTTP對象。
3.???????如果仍然沒有建立xmlHttp，則以非?Microsoft?的方式創(chuàng)建該對象。
最后，xmlHttp應(yīng)該引用一個(gè)有效的XMLHttpRequest對象，無論運(yùn)行什么樣的瀏覽器。
關(guān)于安全性的一點(diǎn)說明
安全性如何呢？現(xiàn)在瀏覽器允許用戶提高他們的安全等級，關(guān)閉?JavaScript?技術(shù)，禁用瀏覽器中的任何選項(xiàng)。在這種情況下，代碼無論如何都不會(huì)工作。此時(shí)必須適當(dāng)?shù)靥幚韱栴}，這需要單獨(dú)的一篇文章來討論，要放到以后了（這個(gè)系列夠長了吧？不用擔(dān)心，讀完之前也許您就掌握了）。現(xiàn)在要編寫一段健壯但不夠完美的代碼，對于掌握?Ajax?來說就很好了。以后我們還將討論更多的細(xì)節(jié)。
?
回頁首
?
Ajax?世界中的請求/響應(yīng)
現(xiàn)在我們介紹了?Ajax，對XMLHttpRequest對象以及如何創(chuàng)建它也有了基本的了解。如果閱讀得很仔細(xì)，您可能已經(jīng)知道與服務(wù)器上的?Web?應(yīng)用程序打交道的是?JavaScript?技術(shù)，而不是直接提交給那個(gè)應(yīng)用程序的?HTML?表單。
還缺少什么呢？到底如何使用XMLHttpRequest。因?yàn)檫@段代碼非常重要，您編寫的每個(gè)?Ajax?應(yīng)用程序都要以某種形式使用它，先看看?Ajax?的基本請求/響應(yīng)模型是什么樣吧。
發(fā)出請求
您已經(jīng)有了一個(gè)嶄新的XMLHttpRequest對象，現(xiàn)在讓它干點(diǎn)活兒吧。首先需要一個(gè)?Web?頁面能夠調(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ā)送請求。
清單?5?中的示例?Ajax?方法就是按照這個(gè)順序組織的：

清單?5.?發(fā)出?Ajax?請求
?
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（來自表單）使用簡單的?GET?參數(shù)附加在?URL?之后。
然后打開一個(gè)連接，這是您第一次看到使用XMLHttpRequest。其中指定了連接方法（GET）和要連接的?URL。最后一個(gè)參數(shù)如果設(shè)為true，那么將請求一個(gè)異步連接（這就是?Ajax?的由來）。如果使用false，那么代碼發(fā)出請求后將等待服務(wù)器返回的響應(yīng)。如果設(shè)為true，當(dāng)服務(wù)器在后臺(tái)處理請求的時(shí)候用戶仍然可以使用表單（甚至調(diào)用其他?JavaScript?方法）。
xmlHttp（要記住，這是XMLHttpRequest對象實(shí)例）的onreadystatechange屬性可以告訴服務(wù)器在運(yùn)行完成后（可能要用五分鐘或者五個(gè)小時(shí)）做什么。因?yàn)榇a沒有等待服務(wù)器，必須讓服務(wù)器知道怎么做以便您能作出響應(yīng)。在這個(gè)示例中，如果服務(wù)器處理完了請求，一個(gè)特殊的名為updatePage()的方法將被觸發(fā)。
最后，使用值null調(diào)用send()。因?yàn)橐呀?jīng)在請求?URL?中添加了要發(fā)送給服務(wù)器的數(shù)據(jù)（city?和?state），所以請求中不需要發(fā)送任何數(shù)據(jù)。這樣就發(fā)出了請求，服務(wù)器按照您的要求工作。
如果沒有發(fā)現(xiàn)任何新鮮的東西，您應(yīng)該體會(huì)到這是多么簡單明了！除了牢牢記住?Ajax?的異步特性外，這些內(nèi)容都相當(dāng)簡單。應(yīng)該感激?Ajax?使您能夠?qū)Ｐ木帉懫恋膽?yīng)用程序和界面，而不用擔(dān)心復(fù)雜的?HTTP?請求/響應(yīng)代碼。
清單?5?中的代碼說明了?Ajax?的易用性。數(shù)據(jù)是簡單的文本，可以作為請求?URL?的一部分。用?GET?而不是更復(fù)雜的?POST?發(fā)送請求。沒有?XML?和要添加的內(nèi)容頭部，請求體中沒有要發(fā)送的數(shù)據(jù)；換句話說，這就是?Ajax?的烏托邦。
不用擔(dān)心，隨著本系列文章的展開，事情會(huì)變得越來越復(fù)雜。您將看到如何發(fā)送?POST?請求、如何設(shè)置請求頭部和內(nèi)容類型、如何在消息中編碼?XML、如何增加請求的安全性，可以做的工作還有很多！暫時(shí)先不用管那些難點(diǎn)，掌握好基本的東西就行了，很快我們就會(huì)建立一整套的?Ajax?工具庫。
處理響應(yīng)
現(xiàn)在要面對服務(wù)器的響應(yīng)了?，F(xiàn)在只要知道兩點(diǎn)：

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

其中的第一點(diǎn)，即就緒狀態(tài)，將在下一篇文章中詳細(xì)討論，您將進(jìn)一步了解?HTTP?請求的階段，可能比您設(shè)想的還多?，F(xiàn)在只要檢查一個(gè)特定的值（4）就可以了（下一期文章中還有更多的值要介紹）。第二點(diǎn)，使用xmlHttp.responseText屬性獲得服務(wù)器的響應(yīng)，這很簡單。清單?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è)原因：保持例子簡單，說明有時(shí)候可能希望用戶能夠修改服務(wù)器返回的數(shù)據(jù)。要記住這兩點(diǎn)，它們對于好的用戶界面設(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)普通的代碼，那就對了，正是如此！當(dāng)用戶在?city?或?state?字段中輸入新的值時(shí)，callServer()方法就被觸發(fā)，于是?Ajax?開始運(yùn)行了。有點(diǎn)兒明白怎么回事了吧？好，就是如此！
?
回頁首
?
結(jié)束語
現(xiàn)在您可能已經(jīng)準(zhǔn)備開始編寫第一個(gè)?Ajax?應(yīng)用程序了，至少也希望認(rèn)真讀一下?參考資料?中的那些文章了吧？但可以首先從這些應(yīng)用程序如何工作的基本概念開始，對XMLHttpRequest對象有基本的了解。在下一期文章中，您將掌握這個(gè)對象，學(xué)會(huì)如何處理?JavaScript?和服務(wù)器的通信、如何使用?HTML?表單以及如何獲得?DOM?句柄。
現(xiàn)在先花點(diǎn)兒時(shí)間考慮考慮?Ajax?應(yīng)用程序有多么強(qiáng)大。設(shè)想一下，當(dāng)單擊按鈕、輸入一個(gè)字段、從組合框中選擇一個(gè)選項(xiàng)或者用鼠標(biāo)在屏幕上拖動(dòng)時(shí)，Web?表單能夠立刻作出響應(yīng)會(huì)是什么情形。想一想異步究竟意味著什么，想一想?JavaScript?代碼運(yùn)行而且不等待服務(wù)器對它的請求作出響應(yīng)。會(huì)遇到什么樣的問題？會(huì)進(jìn)入什么樣的領(lǐng)域？考慮到這種新的方法，編程的時(shí)候應(yīng)如何改變表單的設(shè)計(jì)？
如果在這些問題上花一點(diǎn)兒時(shí)間，與簡單地剪切/粘貼某些代碼到您根本不理解的應(yīng)用程序中相比，收益會(huì)更多。在下一期文章中，我們將把這些概念付諸實(shí)踐，詳細(xì)介紹使應(yīng)用程序按照這種方式工作所需要的代碼。因此，現(xiàn)在先享受一下?Ajax?所帶來的可能性吧。