brett mclaughlin , 作家，編輯, o‘reilly and associates
2006 年 1 月 04 日
五年前，如果不知道 xml，您就是一只無(wú)人重視的丑小鴨。十八個(gè)月前，ruby 成了關(guān)注的中心，不知道 ruby 的程序員只能坐冷板凳了。今天，如果想跟上最新的技術(shù)時(shí)尚，那您的目標就是 ajax。
但是，ajax 不僅僅是一種時(shí)尚，它是一種構建網(wǎng)站的強大方法，而且不像學(xué)習一種全新的語(yǔ)言那樣困難。
但在詳細探討 ajax 是什么之前，先讓我們花幾分鐘了解 ajax 做什么。目前，編寫(xiě)應用程序時(shí)有兩種基本的選擇：
桌面應用程序，web 應用程序。兩者是類(lèi)似的，桌面應用程序通常以 cd 為介質(zhì)（有時(shí)候可從網(wǎng)站下載）并完全安裝到您的計算機上。桌面應用程序可能使用互聯(lián)網(wǎng)下載更新，但運行這些應用程序的代碼在桌面計算機上。web 應用程序運行在某處的 web 服務(wù)器上 —— 毫不奇怪，要通過(guò) web 瀏覽器訪(fǎng)問(wèn)這種應用程序。
不過(guò)，比這些應用程序的運行代碼放在何處更重要的是，應用程序如何運轉以及如何與其進(jìn)行交互。桌面應用程序一般很快（就在您的計算機上運行，不用等待互聯(lián)網(wǎng)連接），具有漂亮的用戶(hù)界面（通常和操作系統有關(guān)）和非凡的動(dòng)態(tài)性?？梢詥螕?、選擇、輸入、打開(kāi)菜單和子菜單、到處巡游，基本上不需要等待。
另一方面，web 應用程序是最新的潮流，它們提供了在桌面上不能實(shí)現的服務(wù)（比如 amazon.com 和 ebay）。但是，伴隨著(zhù) web 的強大而出現的是等待，等待服務(wù)器響應，等待屏幕刷新，等待請求返回和生成新的頁(yè)面。
顯然這樣說(shuō)過(guò)于簡(jiǎn)略了，但基本的概念就是如此。您可能已經(jīng)猜到，ajax 嘗試建立桌面應用程序的功能和交互性，與不斷更新的 web 應用程序之間的橋梁?？梢允褂孟褡烂鎽贸绦蛑谐Ｒ?jiàn)的動(dòng)態(tài)用戶(hù)界面和漂亮的控件，不過(guò)是在 web 應用程序中。
還等什么呢？我們來(lái)看看 ajax 如何將笨拙的 web 界面轉化成能迅速響應的 ajax 應用程序吧。
老技術(shù)，新技巧
在談到 ajax 時(shí)，實(shí)際上涉及到多種技術(shù)，要靈活地運用它必須深入了解這些不同的技術(shù)（本系列的頭幾篇文章將分別討論這些技術(shù)）。好消息是您可能已經(jīng)非常熟悉其中的大部分技術(shù)，更好的是這些技術(shù)都很容易學(xué)習，并不像完整的編程語(yǔ)言（如 java 或 ruby）那樣困難。
ajax 的定義
順便說(shuō)一下，ajax 是 asynchronous javascript and xml（以及 dhtml 等）的縮寫(xiě)。這個(gè)短語(yǔ)是 adaptive path 的 jesse james garrett 發(fā)明的，按照 jesse 的解釋?zhuān)@不是個(gè)首字母縮寫(xiě)詞。
下面是 ajax 應用程序所用到的基本技術(shù)：
html 用于建立 web 表單并確定應用程序其他部分使用的字段。
javascript 代碼是運行 ajax 應用程序的核心代碼，幫助改進(jìn)與服務(wù)器應用程序的通信。
dhtml 或 dynamic html，用于動(dòng)態(tài)更新表單。我們將使用div、span和其他動(dòng)態(tài) html 元素來(lái)標記 html。
文檔對象模型 dom 用于（通過(guò) javascript 代碼）處理 html 結構和（某些情況下）服務(wù)器返回的 xml。
我們來(lái)進(jìn)一步分析這些技術(shù)的職責。以后的文章中我將深入討論這些技術(shù)，目前只要熟悉這些組件和技術(shù)就可以了。對這些代碼越熟悉，就越容易從對這些技術(shù)的零散了解轉變到真正把握這些技術(shù)（同時(shí)也真正打開(kāi)了 web 應用程序開(kāi)發(fā)的大門(mén)）。
xmlhttprequest 對象
要了解的一個(gè)對象可能對您來(lái)說(shuō)也是最陌生的，即xmlhttprequest。這是一個(gè) javascript 對象，創(chuàng )建該對象很簡(jiǎn)單，如清單 1 所示。
清單 1. 創(chuàng )建新的 xmlhttprequest 對象
<script language="javascript" type="text/javascript">
var xmlhttp = new xmlhttprequest();
</script>
下一期文章中將進(jìn)一步討論這個(gè)對象，現在要知道這是處理所有服務(wù)器通信的對象。繼續閱讀之前，先停下來(lái)想一想：通過(guò)xmlhttprequest對象與服務(wù)器進(jìn)行對話(huà)的是 javascript 技術(shù)。這不是一般的應用程序流，這恰恰是 ajax 的強大功能的來(lái)源。
在一般的 web 應用程序中，用戶(hù)填寫(xiě)表單字段并單擊 submit 按鈕。然后整個(gè)表單發(fā)送到服務(wù)器，服務(wù)器將它轉發(fā)給處理表單的腳本（通常是 php 或 java，也可能是 cgi 進(jìn)程或者類(lèi)似的東西），腳本執行完成后再發(fā)送回全新的頁(yè)面。該頁(yè)面可能是帶有已經(jīng)填充某些數據的新表單的 html，也可能是確認頁(yè)面，或者是具有根據原來(lái)表單中輸入數據選擇的某些選項的頁(yè)面。當然，在服務(wù)器上的腳本或程序處理和返回新表單時(shí)用戶(hù)必須等待。屏幕變成一片空白，等到服務(wù)器返回數據后再重新繪制。這就是交互性差的原因，用戶(hù)得不到立即反饋，因此感覺(jué)不同于桌面應用程序。
ajax 基本上就是把 javascript 技術(shù)和xmlhttprequest對象放在 web 表單和服務(wù)器之間。當用戶(hù)填寫(xiě)表單時(shí)，數據發(fā)送給一些 javascript 代碼而不是直接發(fā)送給服務(wù)器。相反，javascript 代碼捕獲表單數據并向服務(wù)器發(fā)送請求。同時(shí)用戶(hù)屏幕上的表單也不會(huì )閃爍、消失或延遲。換句話(huà)說(shuō)，javascript 代碼在幕后發(fā)送請求，用戶(hù)甚至不知道請求的發(fā)出。更好的是，請求是異步發(fā)送的，就是說(shuō) javascript 代碼（和用戶(hù)）不用等待服務(wù)器的響應。因此用戶(hù)可以繼續輸入數據、滾動(dòng)屏幕和使用應用程序。
然后，服務(wù)器將數據返回 javascript 代碼（仍然在 web 表單中），后者決定如何處理這些數據。它可以迅速更新表單數據，讓人感覺(jué)應用程序是立即完成的，表單沒(méi)有提交或刷新而用戶(hù)得到了新數據。javascript 代碼甚至可以對收到的數據執行某種計算，再發(fā)送另一個(gè)請求，完全不需要用戶(hù)干預！這就是xmlhttprequest的強大之處。它可以根據需要自行與服務(wù)器進(jìn)行交互，用戶(hù)甚至可以完全不知道幕后發(fā)生的一切。結果就是類(lèi)似于桌面應用程序的動(dòng)態(tài)、快速響應、高交互性的體驗，但是背后又擁有互聯(lián)網(wǎng)的全部強大力量。
加入一些 javascript
得到xmlhttprequest的句柄后，其他的 javascript 代碼就非常簡(jiǎn)單了。事實(shí)上，我們將使用 javascript 代碼完成非?；镜娜蝿?wù)：
獲取表單數據：javascript 代碼很容易從 html 表單中抽取數據并發(fā)送到服務(wù)器。
修改表單上的數據：更新表單也很簡(jiǎn)單，從設置字段值到迅速替換圖像。
解析 html 和 xml：使用 javascript 代碼操縱 dom（請參閱 下一節），處理 html 表單服務(wù)器返回的 xml 數據的結構。
對于前兩點(diǎn)，需要非常熟悉getelementbyid()方法，如清單 2 所示。
清單 2. 用 javascript 代碼捕獲和設置字段值
/ 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];
這里沒(méi)有特別需要注意的地方，真是好極了！您應該認識到這里并沒(méi)有非常復雜的東西。只要掌握了xmlhttprequest，ajax 應用程序的其他部分就是如清單 2 所示的簡(jiǎn)單 javascript 代碼了，混合有少量的 html。同時(shí)，還要用一點(diǎn)兒 dom，我們就來(lái)看看吧。
以 dom 結束
最后還有 dom，即文檔對象模型?？赡軐τ行┳x者來(lái)說(shuō) dom 有點(diǎn)兒令人生畏，html 設計者很少使用它，即使 javascript 程序員也不大用到它，除非要完成某項高端編程任務(wù)。大量使用 dom 的是復雜的 java 和 c/c++ 程序，這可能就是 dom 被認為難以學(xué)習的原因。
幸運的是，在 javascript 技術(shù)中使用 dom 很容易，也非常直觀(guān)?，F在，按照常規也許應該說(shuō)明如何使用 dom，或者至少要給出一些示例代碼，但這樣做也可能誤導您。即使不理會(huì ) dom，仍然能深入地探討 ajax，這也是我準備采用的方法。以后的文章將再次討論 dom，現在只要知道可能需要 dom 就可以了。當需要在 javascript 代碼和服務(wù)器之間傳遞 xml 和改變 html 表單的時(shí)候，我們再深入研究 dom。沒(méi)有它也能做一些有趣的工作，因此現在就把 dom 放到一邊吧。
獲取 request 對象
有了上面的基礎知識后，我們來(lái)看看一些具體的例子。xmlhttprequest是 ajax 應用程序的核心，而且對很多讀者來(lái)說(shuō)可能還比較陌生，我們就從這里開(kāi)始吧。從清單 1 可以看出，創(chuàng )建和使用這個(gè)對象非常簡(jiǎn)單，不是嗎？等一等。
還記得幾年前的那些討厭的瀏覽器戰爭嗎？沒(méi)有一樣東西在不同的瀏覽器上得到同樣的結果。不管您是否相信，這些戰爭仍然在繼續，雖然規模較小。但令人奇怪的是，xmlhttprequest成了這場(chǎng)戰爭的犧牲品之一。因此獲得xmlhttprequest對象可能需要采用不同的方法。下面我將詳細地進(jìn)行解釋。
使用 microsoft 瀏覽器
microsoft 瀏覽器 internet explorer 使用 msxml 解析器處理 xml（可以通過(guò)參考資料進(jìn)一步了解 msxml）。因此如果編寫(xiě)的 ajax 應用程序要和 internet explorer 打交道，那么必須用一種特殊的方式創(chuàng )建對象。
但并不是這么簡(jiǎn)單。根據 internet explorer 中安裝的 javascript 技術(shù)版本不同，msxml 實(shí)際上有兩種不同的版本，因此必須對這兩種情況分別編寫(xiě)代碼。請參閱清單 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;
}
}
您對這些代碼可能還不完全理解，但沒(méi)有關(guān)系。當本系列文章結束的時(shí)候，您將對 javascript 編程、錯誤處理、條件編譯等有更深的了解?，F在只要牢牢記住其中的兩行代碼：
xmlhttp = new activexobject("msxml2.xmlhttp");
和
xmlhttp = new activexobject("microsoft.xmlhttp");。
這兩行代碼基本上就是嘗試使用一個(gè)版本的 msxml 創(chuàng )建對象，如果失敗則使用另一個(gè)版本創(chuàng )建該對象。不錯吧？如果都不成功，則將xmlhttp變量設為 false，告訴您的代碼出現了問(wèn)題。如果出現這種情況，可能是因為安裝了非 microsoft 瀏覽器，需要使用不同的代碼。
處理 mozilla 和非 microsoft 瀏覽器
如果選擇的瀏覽器不是 internet explorer，或者為非 microsoft 瀏覽器編寫(xiě)代碼，就需要使用不同的代碼。事實(shí)上就是清單 1 所示的一行簡(jiǎn)單代碼：
var xmlhttp = new xmlhttprequest object;。
這行簡(jiǎn)單得多的代碼在 mozilla、firefox、safari、opera 以及基本上所有以任何形式或方式支持 ajax 的非 microsoft 瀏覽器中，創(chuàng )建了xmlhttprequest對象。
結合起來(lái)
關(guān)鍵是要支持所有瀏覽器。誰(shuí)愿意編寫(xiě)一個(gè)只能用于 internet explorer 或者非 microsoft 瀏覽器的應用程序呢？或者更糟，要編寫(xiě)一個(gè)應用程序兩次？當然不！因此代碼要同時(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();
}
現在先不管那些注釋掉的奇怪符號，如@cc_on，這是特殊的 javascript 編譯器命令，將在下一期針對xmlhttprequest的文章中詳細討論。這段代碼的核心分為三步：
1. 建立一個(gè)變量xmlhttp來(lái)引用即將創(chuàng )建的xmlhttprequest對象。
2. 嘗試在 microsoft 瀏覽器中創(chuàng )建該對象：
o 嘗試使用msxml2.xmlhttp對象創(chuàng )建它。
o 如果失敗，再?lài)L試microsoft.xmlhttp對象。
3. 如果仍然沒(méi)有建立xmlhttp，則以非 microsoft 的方式創(chuàng )建該對象。
最后，xmlhttp應該引用一個(gè)有效的xmlhttprequest對象，無(wú)論運行什么樣的瀏覽器。
關(guān)于安全性的一點(diǎn)說(shuō)明
安全性如何呢？現在瀏覽器允許用戶(hù)提高他們的安全等級，關(guān)閉 javascript 技術(shù)，禁用瀏覽器中的任何選項。在這種情況下，代碼無(wú)論如何都不會(huì )工作。此時(shí)必須適當地處理問(wèn)題，這需要單獨的一篇文章來(lái)討論，要放到以后了（這個(gè)系列夠長(cháng)了吧？不用擔心，讀完之前也許您就掌握了）?，F在要編寫(xiě)一段健壯但不夠完美的代碼，對于掌握 ajax 來(lái)說(shuō)就很好了。以后我們還將討論更多的細節。
ajax 世界中的請求/響應
現在我們介紹了 ajax，對xmlhttprequest對象以及如何創(chuàng )建它也有了基本的了解。如果閱讀得很仔細，您可能已經(jīng)知道與服務(wù)器上的 web 應用程序打交道的是 javascript 技術(shù)，而不是直接提交給那個(gè)應用程序的 html 表單。
還缺少什么呢？到底如何使用xmlhttprequest。因為這段代碼非常重要，您編寫(xiě)的每個(gè) ajax 應用程序都要以某種形式使用它，先看看 ajax 的基本請求/響應模型是什么樣吧。
發(fā)出請求
您已經(jīng)有了一個(gè)嶄新的xmlhttprequest對象，現在讓它干點(diǎn)活兒吧。首先需要一個(gè) web 頁(yè)面能夠調用的 javascript 方法（比如當用戶(hù)輸入文本或者從菜單中選擇一項時(shí)）。接下來(lái)就是在所有 ajax 應用程序中基本都雷同的流程：
1. 從 web 表單中獲取需要的數據。
2. 建立要連接的 url。
3. 打開(kāi)到服務(wù)器的連接。
4. 設置服務(wù)器在完成后要運行的函數。
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);
}
其中大部分代碼意義都很明確。開(kāi)始的代碼使用基本 javascript 代碼獲取幾個(gè)表單字段的值。然后設置一個(gè) php 腳本作為鏈接的目標。要注意腳本 url 的指定方式，city 和 state（來(lái)自表單）使用簡(jiǎn)單的 get 參數附加在 url 之后。
然后打開(kāi)一個(gè)連接，這是您第一次看到使用xmlhttprequest。其中指定了連接方法（get）和要連接的 url。最后一個(gè)參數如果設為true，那么將請求一個(gè)異步連接（這就是 ajax 的由來(lái)）。如果使用false，那么代碼發(fā)出請求后將等待服務(wù)器返回的響應。如果設為true，當服務(wù)器在后臺處理請求的時(shí)候用戶(hù)仍然可以使用表單（甚至調用其他 javascript 方法）。
xmlhttp（要記住，這是xmlhttprequest對象實(shí)例）的onreadystatechange屬性可以告訴服務(wù)器在運行完成后（可能要用五分鐘或者五個(gè)小時(shí)）做什么。因為代碼沒(méi)有等待服務(wù)器，必須讓服務(wù)器知道怎么做以便您能作出響應。在這個(gè)示例中，如果服務(wù)器處理完了請求，一個(gè)特殊的名為updatepage()的方法將被觸發(fā)。
最后，使用值null調用send()。因為已經(jīng)在請求 url 中添加了要發(fā)送給服務(wù)器的數據（city 和 state），所以請求中不需要發(fā)送任何數據。這樣就發(fā)出了請求，服務(wù)器按照您的要求工作。
如果沒(méi)有發(fā)現任何新鮮的東西，您應該體會(huì )到這是多么簡(jiǎn)單明了！除了牢牢記住 ajax 的異步特性外，這些內容都相當簡(jiǎn)單。應該感激 ajax 使您能夠專(zhuān)心編寫(xiě)漂亮的應用程序和界面，而不用擔心復雜的 http 請求/響應代碼。
清單 5 中的代碼說(shuō)明了 ajax 的易用性。數據是簡(jiǎn)單的文本，可以作為請求 url 的一部分。用 get 而不是更復雜的 post 發(fā)送請求。沒(méi)有 xml 和要添加的內容頭部，請求體中沒(méi)有要發(fā)送的數據；換句話(huà)說(shuō)，這就是 ajax 的烏托邦。
不用擔心，隨著(zhù)本系列文章的展開(kāi)，事情會(huì )變得越來(lái)越復雜。您將看到如何發(fā)送 post 請求、如何設置請求頭部和內容類(lèi)型、如何在消息中編碼 xml、如何增加請求的安全性，可以做的工作還有很多！暫時(shí)先不用管那些難點(diǎn)，掌握好基本的東西就行了，很快我們就會(huì )建立一整套的 ajax 工具庫。
處理響應
現在要面對服務(wù)器的響應了?，F在只要知道兩點(diǎn)：
什么也不要做，直到xmlhttp.readystate屬性的值等于 4。 服務(wù)器將把響應填充到xmlhttp.responsetext屬性中。
其中的第一點(diǎn)，即就緒狀態(tài)，將在下一篇文章中詳細討論，您將進(jìn)一步了解 http 請求的階段，可能比您設想的還多?，F在只要檢查一個(gè)特定的值（4）就可以了（下一期文章中還有更多的值要介紹）。第二點(diǎn)，使用xmlhttp.responsetext屬性獲得服務(wù)器的響應，這很簡(jiǎn)單。清單 6 中的示例方法可供服務(wù)器根據清單 5 中發(fā)送的數據調用。
清單 6. 處理服務(wù)器響應
function updatepage() {
if (xmlhttp.readystate == 4) {
var response = xmlhttp.responsetext;
document.getelementbyid("zipcode").value = response;
}
}
這些代碼同樣既不難也不復雜。它等待服務(wù)器調用，如果是就緒狀態(tài)，則使用服務(wù)器返回的值（這里是用戶(hù)輸入的城市和州的 zip 編碼）設置另一個(gè)表單字段的值。于是包含 zip 編碼的zipcode字段突然出現了，而用戶(hù)沒(méi)有按任何按鈕！這就是前面所說(shuō)的桌面應用程序的感覺(jué)?？焖夙憫?、動(dòng)態(tài)感受等等，這些都只因為有了小小的一段 ajax 代碼。
細心的讀者可能注意到zipcode是一個(gè)普通的文本字段。一旦服務(wù)器返回 zip 編碼，updatepage()方法就用城市/州的 zip 編碼設置那個(gè)字段的值，用戶(hù)就可以改寫(xiě)該值。這樣做有兩個(gè)原因：保持例子簡(jiǎn)單，說(shuō)明有時(shí)候可能希望用戶(hù)能夠修改服務(wù)器返回的數據。要記住這兩點(diǎn)，它們對于好的用戶(hù)界面設計來(lái)說(shuō)很重要。
連接 web 表單
還有什么呢？實(shí)際上沒(méi)有多少了。一個(gè) javascript 方法捕捉用戶(hù)輸入表單的信息并將其發(fā)送到服務(wù)器，另一個(gè) javascript 方法監聽(tīng)和處理響應，并在響應返回時(shí)設置字段的值。所有這些實(shí)際上都依賴(lài)于調用第一個(gè) javascript 方法，它啟動(dòng)了整個(gè)過(guò)程。最明顯的辦法是在 html 表單中增加一個(gè)按鈕，但這是 2001 年的辦法，您不這樣認為嗎？還是像清單 7 這樣利用 javascript 技術(shù)吧。
清單 7. 啟動(dòng)一個(gè) ajax 過(guò)程
<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>
如果感覺(jué)這像是一段相當普通的代碼，那就對了，正是如此！當用戶(hù)在 city 或 state 字段中輸入新的值時(shí)，callserver()方法就被觸發(fā)，于是 ajax 開(kāi)始運行了。有點(diǎn)兒明白怎么回事了吧？好，就是如此！
聯(lián)系客服
