1、學(xué)習(xí)ajax第一天Ajax 由 HTML JavaScript 技術(shù) DHTML 和 DOM 組成，這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序 。本文的作者是一位 Ajax，他演示了這些技術(shù)如何協(xié)同工作 從總體概述到細(xì)節(jié)的 使高效的 Web 開(kāi)發(fā)成為現(xiàn)實(shí)。他還揭開(kāi)了 Ajax概念的神秘面紗，包括 XMLHttpRequest 對(duì)象。五年前，如果不知道 XML ，您就是一只無(wú)人重視的丑小鴨。十八個(gè)月前， Ruby 成了關(guān)注的中心， 不知道 Ruby 的程序員只能坐冷板凳了。，如果想跟上最新的技術(shù)時(shí)尚，那您的目標(biāo)就是 Ajax。但是， Ajax 不僅僅 是一種時(shí)尚，

2、它是一種構(gòu)建的強(qiáng)大方法，而且不像學(xué)種全新的語(yǔ)言那樣。但在詳細(xì)探討 Ajax 是什么之前，先讓花幾分鐘了解 Ajax 做 什么。目前，編寫(xiě)應(yīng)用程序時(shí)有兩種基本的選擇：桌面應(yīng)用程序Web 應(yīng)用程序兩者是類(lèi)似的，桌面應(yīng)用程序通常以 CD 為介質(zhì)（有時(shí)候可從）并完全安裝到您的計(jì)算機(jī)上。桌面應(yīng)用程序可能使用互聯(lián)網(wǎng)下載更新，但運(yùn)行這些應(yīng)用程序的代碼在桌面計(jì)算機(jī)上。Web 應(yīng)用程序運(yùn)行在某處的 Web 服務(wù)器上 毫不奇怪，要通過(guò) Web 瀏覽器這種應(yīng)用程序。不過(guò)，比這些應(yīng)用程序的運(yùn)行代碼放在何處更重要的是， 應(yīng)用程序如何運(yùn)轉(zhuǎn)以及如何與其進(jìn)行交互。桌面應(yīng)用程序一般很快（就在您的計(jì)算機(jī)上運(yùn)行，不用等待互聯(lián)網(wǎng)連接

3、），具有漂亮的用戶界面（通常和操作系統(tǒng)有關(guān)）和非凡的動(dòng)態(tài)性?？梢詥螕?選擇 輸入 打開(kāi)菜單菜單 到處巡游，基本上不需要等待。另一方面， Web 應(yīng)用程序是最新的潮流，它們提供了在桌面上不能實(shí)現(xiàn)的服務(wù)（ 比如 Amazon co m 和 eBay）。但是，伴隨著 Web 的強(qiáng)大而出現(xiàn)的是等待，等待服務(wù)器響應(yīng)，等待屏幕刷新，等待請(qǐng)求返回和生成新的頁(yè)面。顯然這樣說(shuō)過(guò)于簡(jiǎn)略了，但基本的概念就是如此。您可能已經(jīng)猜到，Ajax 嘗試建立桌面應(yīng)用程序的功能和交互性，與不斷更新的 Web 應(yīng)用程序之間的橋梁?？梢允褂孟褡烂鎽?yīng)用程序中常見(jiàn)的動(dòng)態(tài)用戶界面和漂亮的控件，不過(guò)是在 Web 應(yīng)用程序中。還等什么呢？來(lái)看

4、看 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 應(yīng)用程序所用到的基本技術(shù)：HTML 用于建立 Web 表單并確定應(yīng)用程序其他部分使用的字段。JavaScript 代碼是運(yùn)行 Ajax 應(yīng)用程序的代碼，幫助改進(jìn)與服務(wù)器應(yīng)用程序的通信。DHTML 或 Dynamic HTML，用于

5、動(dòng)態(tài)更新表單。使用 div span 和其他動(dòng)態(tài) HTML 元素來(lái)標(biāo)記 HTML。文檔對(duì)象模型 DOM 用于（通過(guò) JavaScript 代碼）處理 HTML 結(jié)構(gòu)和（某些情況下）服務(wù)器返回的 XML 。Ajax 的定義順便說(shuō)一下，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫(xiě)。這個(gè)短語(yǔ)是 Adaptive Path 的 Jesse James Garrett 發(fā)明的（請(qǐng)參閱 參考資料），按照 Jesse 的解釋?zhuān)@不是 個(gè)首字母縮寫(xiě)詞。來(lái)進(jìn)一步分析這些技術(shù)的職責(zé)。以后的文章中我將深入這些技術(shù)，目前只要熟悉這些組件和技術(shù)就可以了。對(duì)這

6、些代碼越熟悉，就越容易從對(duì)這些技術(shù)的零散了解轉(zhuǎn)變到真正把握這些技術(shù)（同時(shí)也真正打開(kāi)了 Web 應(yīng)用程序開(kāi)發(fā)的大門(mén)）。XMLHttpRequest 對(duì)象要了解的一個(gè)對(duì)象可能對(duì)您來(lái)說(shuō)也是最陌生的，即 XMLHttpRequest。這是一個(gè) JavaScript 對(duì)象，創(chuàng)建該對(duì)象很簡(jiǎn)單，如1 所示。1 創(chuàng)建新的 XMLHttpRequest 對(duì)象var xmlHttp = new XMLHttpRequest();下一期文章中將進(jìn)一步這個(gè)對(duì)象，現(xiàn)在要知道這是處理所有服務(wù)器通信的對(duì)象。繼續(xù)閱讀之前，先停下來(lái)想：通過(guò)XMLHttpRequest 對(duì)象與服務(wù)器進(jìn)行的是 JavaScript 技術(shù)。這不是一

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

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

9、理這些數(shù)據(jù)。它可以迅速更新表單數(shù)據(jù)，讓人感覺(jué)應(yīng)用程序是立即完成的，表單沒(méi)有提交或刷新而用戶得到了新數(shù)據(jù)。JavaScript 代碼甚至可以對(duì)收到的數(shù)據(jù)執(zhí)行某種計(jì)算，再發(fā)送另一個(gè)請(qǐng)求，完全不需要用戶干預(yù)！這就是 XMLHttpRequest 的強(qiáng)大之處。它可以根據(jù)需要自行與服務(wù)器進(jìn)行交互，用戶甚至可以完全不知道幕后發(fā)生的一切。結(jié)果就是類(lèi)似于桌面應(yīng)用程序的動(dòng)態(tài) 快速響應(yīng) 高交互性的體驗(yàn)，但是背后又擁有互聯(lián)網(wǎng)的全部強(qiáng)大力量。加入一些 JavaScript得到 XMLHttpRequest 的句柄后，其他的 JavaScript 代碼就非常簡(jiǎn)單了。事實(shí)上，使用 JavaScript 代碼完成非?；镜?/p>

10、任務(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)，需要非常熟悉 ge ementById() 方法，如2 所示。2 用 JavaScript 代碼捕獲和設(shè)置字/ Get the value of thephone field and stuff it in a variable called phonevar phone =ge ementB

11、yId(phone) value;/ Set some values on a form using an array called responsege ementById(order) value = response0;ge ementById(address) value = response1;這里沒(méi)有特別需要注意的地方，真是好極了！您應(yīng)該認(rèn)識(shí)到這里并沒(méi)有非常復(fù)雜的東西。只要掌握了 XMLHttpRequest，Ajax 應(yīng)用程序的其他部分就是如2 所示的簡(jiǎn)單 JavaScript 代碼了，混合有少量的 HTML。同時(shí)，還要用一點(diǎn)兒 DOM，就來(lái)看看吧。以 DOM 結(jié)束最后還有 DO

12、M，即文檔對(duì)象模型?？赡軐?duì)有些讀者來(lái)說(shuō) 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)該說(shuō)明如何使用 DOM，或者至少要給出一 些示例代碼，但這樣做也可能誤導(dǎo)您。即使不理會(huì) DOM，仍然能深入地探討 Ajax，這也是我準(zhǔn)備采用的方法。以后的文章將再次DOM，現(xiàn)在只要知道可能需要 DOM 就可以了。當(dāng)需要在 Java

13、Script 代碼和服務(wù)器之間傳遞 XML 和改變 HTML 表單的時(shí)候，再深入研究 DOM。沒(méi)有它也能做一些有趣的工作，因此現(xiàn)在就把 DOM 放到一邊吧。獲取 Request 對(duì)象有了上面的基礎(chǔ)知識(shí)后，來(lái)看看一些具體的例子。XMLHttpRequest 是 Ajax 應(yīng)用程序的，而且對(duì)很多讀者來(lái)說(shuō)可能還比較陌生， 1 可以看出，創(chuàng)建和使用這個(gè)對(duì)象非常簡(jiǎn)單，不是嗎？等一等。就從這里開(kāi)始吧。從還記得幾年前的那些討厭的瀏覽器嗎？沒(méi)有一樣?xùn)|西在不同的瀏覽器上得到同樣的結(jié)果。不管您是否相信， 這些仍然在繼續(xù)，雖然規(guī)模較小。但令人奇怪的是， XMLHttpRequest 成了這場(chǎng)的犧牲品之一。因此獲得

14、XMLHttpRequest 對(duì)象可能需要采用不同的方法。下面我將詳細(xì)地進(jìn)行解釋。使用瀏覽器瀏覽器ernet Explorer 使用 MSXML器處理 XML（可以通過(guò) 參考資料 進(jìn)一步了解 MSXML ）。因此如果編寫(xiě)的 Ajax應(yīng)用程序要和ernet Explorer 打交道，那么必須用一種特殊的方式創(chuàng)建對(duì)象。但并不是這么簡(jiǎn)單。根據(jù)ernet Explorer 中安裝的 JavaScript 技術(shù)版本不同， MSXML 實(shí)際上有兩種不同的版本，因此必須對(duì)這兩種情況分別編寫(xiě)代碼。請(qǐng)參閱3，其中的代碼在瀏覽器上創(chuàng)建了一個(gè) XMLHttpRequest。3 在瀏覽器上創(chuàng)建 XMLHttpRequ

15、est 對(duì)象var xmlHttp = false;try xmlHttp = new ActiveXObject(Msxml2 XMLHTTP); catch (e) try xmlHttp = new ActiveXObject(XMLHTTP); catch (e2) xmlHttp = false;您對(duì)這些代碼可能還不完全理解，但沒(méi)有關(guān)系。當(dāng)本系列文章結(jié)束的時(shí)候，您將對(duì) JavaScript 編程 錯(cuò)誤處理 條件編譯等有更深的了解?，F(xiàn)在只要牢牢記住其中的兩行代碼：xmlHttp = new ActiveXObject(Msxml2 XMLHTTP);和xmlHttp = new Act

16、iveXObject(XMLHTTP);。這兩行代碼基本上就是嘗試使用一個(gè)版本的 MSXML 創(chuàng)建對(duì)象，如果失敗則使用另一個(gè)版本創(chuàng)建該對(duì)象。不錯(cuò)吧？如果都不成功，則將xmlHttp 變量設(shè)為 false，告訴您的代碼出現(xiàn)了問(wèn)題。如果出現(xiàn)這種情況，可能是因?yàn)榘惭b了非瀏覽器，需要使用不同的代碼。處理 Mozilla 和非瀏覽器ernet Explorer ，或者為非瀏覽器編寫(xiě)代碼，就需要使用不同的代碼。事實(shí)上就是1 所示的一如果選擇的瀏覽器不是行簡(jiǎn)單代碼：var xmlHttp = new XMLHttpRequest object;。這行簡(jiǎn)單得多的代碼在 Mozilla Firefox Safa

17、ri Opera 以及基本上所有以或方式支持 Ajax 的非瀏覽器中，創(chuàng)建了XMLHttpRequest 對(duì)象。結(jié)合起來(lái)關(guān)鍵是要支持所有 瀏覽器。誰(shuí)愿意編寫(xiě)一個(gè)只能用于ernet Explorer 或者非瀏覽器的應(yīng)用程序呢？或者更糟，要編寫(xiě)一個(gè)應(yīng)用程序兩次？當(dāng)然不！因此代碼要同時(shí)支持ernet Explorer 和非瀏覽器。4 顯示了這樣的代碼。4 以支持多種瀏覽器的方式創(chuàng)建 XMLHttpRequest 對(duì)象/* Create a new XMLHttpRequest object to talk to the Web server */var xmlHttp = false;/*cc_on

18、 */*if (_jscript_ver= 5)try xmlHttp = new ActiveXObject(Msxml2 XMLHTTP); catch (e) try xmlHttp = new ActiveXObject(XMLHTTP); catch (e2) xmlHttp = false;end */if (!xmlHttp & typeof XMLHttpRequest != undefined) xmlHttp = new XMLHttpRequest();現(xiàn)在先不管那些注釋掉的奇怪符號(hào)，如 cc_on，這是特殊的 JavaScript 編譯器命令，將在下一期針對(duì) XMLHt

19、tpRequest 的文章中詳細(xì)。這段代碼的分為三步：1建立一個(gè)變量 xmlHttp 來(lái)即將創(chuàng)建的 XMLHttpRequest 對(duì)象。2嘗試在瀏覽器中創(chuàng)建該對(duì)象：1）嘗試使用 Msxml2 XMLH TTP 對(duì)象創(chuàng)建它。2）如果失敗，再?lài)L試XMLHTTP 對(duì)象。2如果仍然沒(méi)有建立 xmlHttp，則以非的方式創(chuàng)建該對(duì)象。最后， xmlHttp 應(yīng)該一個(gè)有效的 XMLHttpRequest 對(duì)象，無(wú)論運(yùn)行什么樣的瀏覽器。關(guān)于安全性的一點(diǎn)說(shuō)明安全性如何呢？ 現(xiàn)在瀏覽器允許用戶提高他們的安全等級(jí)，關(guān)閉 JavaScript 技術(shù)，禁用瀏覽器中的任何選項(xiàng)。在這種情況下，代碼無(wú)論如何都不會(huì)工作。此時(shí)必

20、須適當(dāng)?shù)靥幚韱?wèn)題，這需要單獨(dú)的一篇文章來(lái)，要放到以后了（這個(gè)系列夠長(zhǎng)了吧？不用擔(dān)心，讀完之前也許您就掌握了）。現(xiàn)在要編寫(xiě)一段健壯但不夠完美的代碼，對(duì)于掌握 Ajax 來(lái)說(shuō)就很好了。以后還將的細(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)檫@段代碼非常重要，您編寫(xiě)的每個(gè) Ajax 應(yīng)用程序都要以某種形式使用它，

21、先看看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í)）。接下來(lái)就是在所有 Ajax 應(yīng)用程序中基本都的流程：1從 Web 表單中獲取需要的數(shù)據(jù)。2建立要連接的 URL。3打開(kāi)到服務(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 s e from

22、the web formvar city =ge ementById(city) value;var s e =ge ementById(s e) value;/ Only go on if there are values for both fieldsif (city = null) | (city = ) return;if (s e = null) | (s e= ) return;/ Build the URL to connect tovar url = /scripts/getZipCode?city= + esc (city) + &s e= + esc (s e);/ Ope

23、n a connection to the serverxmlHttp open(GET, url, true);/ Setup a function for the server to run when its donexmlHttp onreadys echange= updatePage;/ Send therequestxmlHttp send(null);其中大部分代碼意義都很明確。開(kāi)始的代碼使用基本 JavaScript 代碼獲取幾個(gè)表單字段的值。然后設(shè)置一個(gè)作為的目標(biāo)。要注意URL 的指定方式， city 和 s e（來(lái)自表單）使用簡(jiǎn)單的 GET 參數(shù)附加在 URL 之后。然后打

24、開(kāi)接，這是您第一次看到使用 XMLHttpRequest。其中指定了連接方法（GET）和要連接的 URL。最后一個(gè)參數(shù)如果設(shè)為 true，那么將請(qǐng)求一個(gè)異步連接（這就是 Ajax 的由來(lái)）。如果使用 false，那么代碼發(fā)出請(qǐng)求后將等待服務(wù)器返回的響應(yīng)。如果設(shè)為 true，當(dāng)處理請(qǐng)求的時(shí)候用戶仍然可以使用表單（甚至調(diào)用其他 JavaScript 方法）。服務(wù)器在xmlHttp（要記住，這是 XMLHttpRequest 對(duì)象實(shí)例）的 onreadys echange 屬性可以告訴服務(wù)器在運(yùn)行完成 后（可能要用或者五個(gè)小時(shí)）做什么。因?yàn)榇a沒(méi)有等待服務(wù)器，必須讓服務(wù)器知道怎么做以便您能作出響應(yīng)。

25、在這個(gè)示例中，如果服務(wù)器處理完了請(qǐng)求，一個(gè)特殊的名為 updatePage() 的方法將被觸發(fā)。最后，使用值 null 調(diào)用 send() 。因?yàn)橐呀?jīng)在請(qǐng)求 URL 中添加了要發(fā)送給服務(wù)器的數(shù)據(jù)（ city 和 s e），所以請(qǐng)求中不需要發(fā)送任何數(shù)據(jù)。這樣就發(fā)出了請(qǐng)求，服務(wù)器按照您的要求工作。如果沒(méi)有發(fā)現(xiàn)任何新鮮的東西，您應(yīng)該體會(huì)到這是多么簡(jiǎn)單明了！除了牢牢記住 Ajax 的異步特性外，這些內(nèi)容都相當(dāng)簡(jiǎn)單。應(yīng)該感激Ajax 使您能夠?qū)Ｐ木帉?xiě)漂亮的應(yīng)用程序和界面，而不用擔(dān)心復(fù)雜的 HTTP 請(qǐng)求/響應(yīng)代碼。5 中的代碼說(shuō)明了 Ajax 的易用性。數(shù)據(jù)是簡(jiǎn)單的文本，可以作為請(qǐng)求 URL 的一部分。

26、用 GET 而不是更復(fù)雜的T 發(fā)送請(qǐng)求。沒(méi)有 XML 和要添加的內(nèi)容頭部，請(qǐng)求體中沒(méi)有要發(fā)送的數(shù)據(jù)；換句話說(shuō)，這就是 Ajax 的。不用擔(dān)心，隨著本系列文章的展開(kāi)，事情會(huì)變得越來(lái)越復(fù)雜。您將看到如何發(fā)送T 請(qǐng)求 如何設(shè)置請(qǐng)求頭部和內(nèi)容類(lèi)型 如何在消息中編碼 XML 如何增加請(qǐng)求的安全性，可以做的工作還有很多！暫時(shí)先不用管那些難點(diǎn)，掌握好基本的東西就行了，很快就會(huì)建立一整套的 Ajax 工具庫(kù)。處理響應(yīng)現(xiàn)在要面對(duì)服務(wù)器的響應(yīng)了。現(xiàn)在只要知道兩點(diǎn)：什么也不要做，直到 xmlHttp readyS e 屬性的值等于 4。服務(wù)器將把響應(yīng)填充到 xmlHttp responseText 屬性中。其中的第

27、一點(diǎn)，即就緒狀態(tài)，將在下一篇文章中詳細(xì)，您將進(jìn)一步了解 HTTP 請(qǐng)求的階段，可能比您設(shè)想的還多?，F(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 readyS e = 4) var response = xmlHttp responseText;ge ementById(zipCode) value = response;這些代碼同樣既不難也不復(fù)

28、雜。它等待服務(wù)器調(diào)用，如果是就緒狀態(tài)，則使用服務(wù)器返回的值（這里是用戶輸入的城市和州的 ZIP 編碼） 設(shè)置另一個(gè)表單字段的值。于是包含 ZIP 編碼的 zipCode 字段突然出現(xiàn)了，而用戶沒(méi)有按任何按鈕！這就是前面所說(shuō)的桌面應(yīng)用程序的感覺(jué)?？焖夙憫?yīng) 動(dòng)態(tài)感受等等，這些都只因?yàn)橛辛诵⌒〉囊欢?Ajax 代碼。細(xì)心的讀者可能注意到 zipCode 是一個(gè)普通的文本字段。一旦服務(wù)器返回 ZIP 編碼， updatePage() 方法就用城市/州的 ZIP 編碼設(shè)置那個(gè)字段的值，用戶就可以改寫(xiě)該值。這樣做有兩個(gè)原因：保持例子簡(jiǎn)單，說(shuō)明有時(shí)候可能希望 用戶能夠修改服務(wù)器返回的數(shù)據(jù)。要記住這兩點(diǎn)，它們

29、對(duì)于好的用戶界面設(shè)計(jì)來(lái)說(shuō)很重要。連接 Web 表單還有什么呢？實(shí)際上沒(méi)有多少了。一個(gè) JavaScript 方法捕捉用戶輸入表單的信息并將其發(fā)送到服務(wù)器，另一個(gè) JavaScript 方法和處理響應(yīng)，并在響應(yīng)返回時(shí)設(shè)置字段的值。所有這些實(shí)際上都依賴(lài)于調(diào)用 第一個(gè) JavaScript 方法，它啟動(dòng)了整個(gè)過(guò)程。最明顯的辦法是在HTML 表單中增加一個(gè)按鈕，但這是 2001 年的辦法，您不這樣認(rèn)為嗎？ 還是像7 這樣利用 JavaScript 技術(shù)吧。7 啟動(dòng)一個(gè) Ajax 過(guò)程City: S e: Zip Code: 如果感覺(jué)這像是一段相當(dāng)普通的代碼，那就對(duì)了，正是如此！當(dāng)用戶在 city 或

30、se 字段中輸入新的值時(shí)， callServer() 方法就被觸發(fā)，于是 Ajax 開(kāi)始運(yùn)行了。有點(diǎn)兒明白怎么回事了吧？好，就是如此！結(jié)束語(yǔ)現(xiàn)在您可能已經(jīng)準(zhǔn)備開(kāi)始編寫(xiě)第一個(gè) Ajax 應(yīng)用程序了，至少也希望認(rèn)真讀一下 參考資料 中的那些文章了吧？但可以首先從這些應(yīng)用程序如何工作的基本概念開(kāi)始，對(duì) XMLHttpRequest 對(duì)象有基本的了解。在下一期文章中，您將掌握這個(gè)對(duì)象，學(xué)會(huì)如何處理 JavaScript和服務(wù)器的通信 如何使用 HTML 表單以及如何獲得 DOM 句柄?，F(xiàn)在先花點(diǎn)兒時(shí)間考慮考慮 Ajax 應(yīng)用程序有多么強(qiáng)大。設(shè)想一下，當(dāng)單擊按鈕 輸入一個(gè)字段 從組合框中選擇一個(gè)選項(xiàng)或者

31、用鼠標(biāo)在屏幕上拖動(dòng)時(shí)， Web 表單能夠立刻作出響應(yīng)會(huì)是什么情形。想異步 究竟意味著什么，想JavaScript 代碼運(yùn)行而且不等待 服務(wù)器對(duì)它的請(qǐng)求作出響應(yīng)。會(huì)遇到什么樣的問(wèn)題？ 會(huì)進(jìn)入什么樣的領(lǐng)域？考慮到這種新的方法，編程的時(shí)候應(yīng)如何改變表單的設(shè)計(jì)？如果在這些問(wèn)題上花一點(diǎn)兒時(shí)間，與簡(jiǎn)單地剪切/粘貼某些代碼到您根本不理解的應(yīng)用程序中相比， 收益會(huì)。在下一期文章中，將把這些概念付諸實(shí)踐，詳細(xì)介紹使應(yīng)用程序按照這種方式工作所需要的代碼。因此，現(xiàn)在先享受一下 Ajax 所帶來(lái)的可能性吧。學(xué)第二天，JavaScript 和 Ajax 發(fā)出異步請(qǐng)求多數(shù) Web 應(yīng)用程序都使用請(qǐng)求/響應(yīng)模型從服務(wù)器上獲

32、得完整的 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

33、（文檔對(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 是什么

34、？ ” 雖然很少聽(tīng)人提到 Web 1 0，實(shí)際上它指的就是具有完全不同的請(qǐng) 求和響應(yīng)模型的傳統(tǒng) Web。比如，到 Ama zon com上點(diǎn)擊一個(gè)按鈕或者輸入搜索項(xiàng)。就會(huì)對(duì)服務(wù)器發(fā)送一個(gè)請(qǐng)求，然后響應(yīng)再返回到瀏覽器。該請(qǐng)求不僅僅是和書(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ù)交互。比如Maps 或 Flickr 這樣的站點(diǎn)（到這些支持 Web 2 0 和 Ajax 站點(diǎn)的請(qǐng)參閱 參考資料）。比如在Maps 上，您可

35、以拖動(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ù)。這些情

36、況下，Ajax 和 Web 2 0 方法允許在不 更新整個(gè) HTML頁(yè)面的情況下發(fā)送和接收數(shù)據(jù)。對(duì)于那些經(jīng)常上網(wǎng)的人， 這種能力可以的應(yīng)用程序感覺(jué)更快 響應(yīng)更及時(shí)，讓他們不時(shí)地光顧您的。XMLHttpRequest 簡(jiǎn)介，必須非常熟悉一個(gè) JavaScript 對(duì)象，即 XMLHttpRequest。這個(gè)小小的對(duì) 象實(shí)際上已經(jīng)在幾種瀏覽器中存要真正實(shí)現(xiàn)這種絢麗的在一段時(shí)間了， 它是本專(zhuān)欄今后幾個(gè)月中要介紹的 Web 2 0 Ajax 和大部分其他內(nèi)容的。為了快速地大體了解它，下面給出將要用于該對(duì)象的很少的幾個(gè) 方法和屬性。open() ：建立到服務(wù)器的新請(qǐng)求。send() ：向服務(wù)器發(fā)送請(qǐng)求。

37、abort()：退出當(dāng)前請(qǐng)求。readyS e：提供當(dāng)前 HTML 的就緒狀態(tài)。responseText ：服務(wù)器返回的請(qǐng)求響應(yīng)文本。如果不了解這些（或者其中的任何 一個(gè)），您也不用擔(dān)心，后面幾篇文章中介紹每個(gè)方法和屬性?，F(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ì)象可

38、以徹底改變您的應(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ì)象var request = new XMLHttpRequest();不難吧？記住， JavaScript 不要求指定變量類(lèi)型，因此不需要像2 那樣做（在 Java 語(yǔ)言中可能需要這樣）。2 創(chuàng)建 XMLHttpRequest 的 Java 偽代碼XMLHttpRequest request = new XMLHttpRequest();因此在

39、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)雅地退出。比如，任何較早的瀏覽器（不論您是否相信，仍然有人在使用老版本的 NetscNavigator）都不支持 XMLHttpRequest，您需要讓這些用戶知道有些地方出了問(wèn)題。3 說(shuō)明如何創(chuàng)建該對(duì)象，以便在出現(xiàn)問(wèn)題的時(shí)候發(fā)出 JavaScript 警告。3 創(chuàng)建具有錯(cuò)誤處理能力的 XMLHttpReque

40、stvar request = false;try request = new XMLHttpRequest(); catch (failed) request = false;if (!request)alert(Error initializing XMLHttpRequest!);一定要理解這些步驟：1創(chuàng)建一個(gè)新變量 request 并賦值 false。后面將使用 false 作為判定條件，它表示還沒(méi)有創(chuàng)建 XMLHttpRequest 對(duì)象。2增加 try/catch 塊：1）嘗試創(chuàng)建 XMLHttpRequest 對(duì)象。2）如果失?。?catch (failed)）則保證 reque

41、st 的值仍然為 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í)間?，F(xiàn)在已經(jīng)得到了一段帶有錯(cuò)誤檢查的 XMLHttpRequest 對(duì)象創(chuàng)建代碼，還可以告訴您哪兒出了問(wèn)題。應(yīng)付看起來(lái)似乎一切良好， 至少在用ernet Explorer 試驗(yàn)這些代碼之前是這樣的。如果這樣試驗(yàn)的話， 就會(huì)看到 圖 1 所示的糟糕情形。圖 1ernet Explore

42、r錯(cuò)誤顯然有什么地方不對(duì)勁，而ernet Explorer 很難說(shuō)是一種過(guò)時(shí)的瀏覽器，因?yàn)槿澜缬?70% 在使用ernet Explorer 。換句話說(shuō)，如果不支持和ernet Explorer 就不會(huì)受到 Web 世界的歡迎！因此需要采用不同的方法處理瀏覽器。經(jīng)驗(yàn)證發(fā)現(xiàn)支持 Ajax，但是其 XMLHttpRequest 版本有不同的稱(chēng)呼。事實(shí)上，它將其稱(chēng)為幾種 不同的東西。如果使用較新版本的ernet Explorer ，則需要使用對(duì)象 Msxml2 XMLH TTP，而較老版本的ernet Explorer 則使用XMLHTTP 。需要支持這兩種對(duì)象類(lèi)型（同時(shí)還要支持非瀏覽器）。請(qǐng)看看

43、4，它述代碼的基礎(chǔ)上增加了對(duì)的支持。參與了嗎？關(guān)于 Ajax 和對(duì)該領(lǐng)域不斷增長(zhǎng)的和參與已經(jīng)有很多文章進(jìn)行了介紹。事實(shí)上，據(jù)說(shuō)最新版本的ernetExplorer ver7 0，將在 2006 年下半年推出 將開(kāi)始直接支持 XMLHttpRequest，使用 new 關(guān)鍵字代替所有的Msxml2 XMLH TTP 創(chuàng)建代碼。但不要太激動(dòng)，仍然需要支持舊的瀏覽器，因此跨瀏覽器代碼不會(huì)很快。4 增加對(duì)瀏覽器的支持var request = false;try request = new XMLHttpRequest(); catch (try) try request = new ActiveXO

44、bject(Msxml2 XMLHTTP); catch (other) try request = new ActiveXObject(XMLHTTP); catch (failed) request = false;if (!request)alert(Error initializing XMLHttpRequest!);很容易被這些花括號(hào)迷住了眼睛，因此下面分別介紹每一步：1 創(chuàng)建一個(gè)新變量 request 并賦值 false。使用 false 作為判斷條件，它表示還沒(méi)有創(chuàng)建 XMLHttpRequest 對(duì)象。2 增加 try/catch 塊：1）嘗試創(chuàng)建 XMLHttpReques

45、t 對(duì)象。2）如果失?。?catch (try)）：1嘗試使用較新版本的瀏覽器創(chuàng)建兼容的對(duì)象（ Msxml2 XMLH TTP ）。2 如果失?。?catch (other)）嘗試使用較老版本的瀏覽器創(chuàng)建兼容的對(duì)象（XMLHTTP ）。2）如果失敗（ catch (failed)）則保證 request 的值仍然為 false。3 檢查 request 是否仍然為 false（如果一切順利就不會(huì)是 false）。4 如果出現(xiàn)問(wèn)題（ request 是 false）則使用 JavaScript 警告通知用戶出現(xiàn)了問(wèn)題。這樣修改代碼之后再使用ernet Explorer 試驗(yàn)，就應(yīng)該看到已經(jīng)創(chuàng)建的

46、表單（沒(méi)有錯(cuò)誤消息）。我實(shí)驗(yàn)的結(jié)果如圖 2 所示。圖 2ernet 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 將 XMLHttpReque

47、st 創(chuàng)建代碼移動(dòng)到方法中var request;function createRequest() try request = new XMLHttpRequest(); catch (try) try request = new ActiveXObject(Msxml2 XMLHTTP); catch (other) try request = new ActiveXObject(XMLHTTP); catch (failed) request = false;if (!request)alert(Error initializing XMLHttpRequest!);如果按照這種方式編寫(xiě)代

48、碼，那么在處理 Ajax 之前需要調(diào)用該方法。因此還需要6 這樣的代碼。6 使用 XMLHttpRequest 的創(chuàng)建方法var request;function createRequest() try request = new XMLHttpRequest(); catch (try) try request = new ActiveXObject(Msxml2 XMLHTTP); catch (other) try request = new ActiveXObject(XMLHTTP); catch (failed) request = false;if (!request)alert

49、(Error initializing XMLHttpRequest!);function getCustomerInfo() createRequest();/ Do something with the request variable此代碼惟一的問(wèn)題是推遲了錯(cuò)誤通知，這也是多數(shù)Ajax 程序員不采用這一方法的原因。假設(shè)一個(gè)復(fù)雜的表單有 10 或 15 個(gè)字段 選擇框等，當(dāng)用戶在第 14 個(gè)字段（按照表單順序從上到下）輸入文本時(shí)要激活某些 Ajax 代碼。這時(shí)候運(yùn)行 getCustomerIn fo() 嘗試創(chuàng)建一個(gè) XMLHttpRequest 對(duì)象，但（對(duì)于本例來(lái)說(shuō)）失敗了。然后向用戶

50、顯示一條警告，明確地們不能使用該應(yīng)用程序。但用戶已經(jīng)花費(fèi)了很多時(shí)間在表單中輸入數(shù)據(jù)！這是非常令人討厭的，而討厭顯然不會(huì)吸戶再次您的。如果使用靜態(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)。其他一切都是Java

51、Script 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 co m 上運(yùn)行，則必須 www breakneck com 中運(yùn)行的發(fā)送請(qǐng)求。設(shè)置服務(wù)器 URL首先要確定連接的

52、服務(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)求 URLvar request = false;try request = new XMLHttpRequest(); catch (try) try request = new ActiveXObject(Msxml2 XMLHTTP); catch (other) try request = new Activ

53、eXObject(XMLHTTP); catch (failed) request = false;if (!request)alert(Error initializing XMLHttpRequest!);function getCustomerInfo() var phone =ge ementById(phone) value;var url = /cgi-local/lookupCustom hp?phone= + esc(phone);這里沒(méi)有難懂的地方。首先，代碼創(chuàng)建了一個(gè)新變量 phone，并把 ID 為 “phone” 的表單字段的值賦給它。8 展示了這個(gè)表單的XHTML ，

54、其中可以看到 phone 字段及其 id 屬性。8 Break Neck Pizza 表單Enter your phone number:Your order will be delivered tType your order in here:還要注意，當(dāng)用戶輸入號(hào)碼或者改變號(hào)碼時(shí)， 將觸發(fā)8 所示的 getCustomerInfo() 方法。該方法取得號(hào)碼并構(gòu)造在 url 變量中的 URL 字符串。記住，由于 Ajax 代碼是沙箱型的，因而只能連接到同一個(gè)域，實(shí)際上 URL 中不需要。該例中的名為 /cgi-local/lookupCustom hp。最后，號(hào)碼作為 GET 參數(shù)附加到該中

55、： phone= + esc (phone)。如果以前沒(méi)用見(jiàn)過(guò) esc () 方法，它用于轉(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 或T，但也可以發(fā)送 HEAD 請(qǐng)求。url：要連

56、接的 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)嗎？ernet 開(kāi)發(fā)對(duì) open() 方法到底做什么沒(méi)有達(dá)成一致。但它實(shí)際上并不是 打開(kāi)一個(gè)請(qǐng)求。如果XHTML/Ajax 頁(yè)面及其連接腳本之間的網(wǎng)絡(luò)和數(shù)據(jù)傳遞，當(dāng)調(diào)用 open() 方法時(shí)將看不到任何通信。不清楚為何選用了這個(gè)名字，但顯然不是一個(gè)好的選擇。通常使用其中的前三個(gè)參數(shù)。事實(shí)上，即使需要異步連接

57、，也應(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 =ge ementById(phone) value;var url = /cgi-local/lookupCustom hp?phone= + esc (phone);request open(GET, url, true);一旦設(shè)置好了 URL，其他就簡(jiǎn)單了。多數(shù)請(qǐng)求使用 GET 就夠了（后面的文章中將看到需要使用T 的情況），再加上 URL，這就是使用 ope

58、n() 方法需要的全部?jī)?nèi)容了。異步性本系列的后面一篇文章中，我將用很多時(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上變得不能使用，直到剛剛觸

59、發(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)求一

60、旦用 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/lookupCustom hp?phone= + esc (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)