Ajax 由 HTML、Javascript™ 技術(shù)、DHTML 和 DOM 組成，這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序。本系列的作者是一位 Ajax 專家，他演示了這些技術(shù)如何協(xié)同工作 —— 從總體概述到細(xì)節(jié)的討論 —— 使高效的 Web 開發(fā)成為現(xiàn)實(shí)。他還揭開了 Ajax 核心概念的神秘面紗，包括 XMLHttpRequest 對(duì)象。

　　五年前，如果不知道 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)，等待屏幕刷新，等待請(qǐng)求返回和生成新的頁面。

　　顯然這樣說過于簡(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í)，并不像完整的編程語言(如 Java 或 Ruby)那樣困難。

　　Ajax 的定義

　　Ajax 是 Asynchronous Javascript and XML(以及 DHTML 等)的縮寫。這個(gè)短語是 Adaptive Path 的 Jesse James Garrett 發(fā)明的(請(qǐng)參閱 參考資料)，按照 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ì)象

　　現(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ā)送回全新的頁面。該頁面可能是帶有已經(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 對(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 很容易，也非常直觀?，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í)候，我們?cè)偕钊胙芯?nbsp;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ò)誤處理、條件編譯等有更深的了解?，F(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)鍵是要支持所有 瀏覽器。誰愿意編寫一個(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ì)討論。這段代碼的核心分為三步：

　　建立一個(gè)變量 xmlHttp 來引用即將創(chuàng)建的 XMLHttpRequest 對(duì)象。

　　嘗試在 Microsoft 瀏覽器中創(chuàng)建該對(duì)象：

　　嘗試使用 Msxml2.XMLHTTP 對(duì)象創(chuàng)建它。

　　如果失敗，再嘗試 Microsoft.XMLHTTP 對(duì)象。

　　如果仍然沒有建立 xmlHttp，則以非 Microsoft 的方式創(chuàng)建該對(duì)象。

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

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

　　安全性如何呢?現(xiàn)在瀏覽器允許用戶提高他們的安全等級(jí)，關(guān)閉 Javascript 技術(shù)，禁用瀏覽器中的任何選項(xiàng)。在這種情況下，代碼無論如何都不會(huì)工作。此時(shí)必須適當(dāng)?shù)靥幚韱栴}，這需要單獨(dú)的一篇文章來討論，要放到以后了(這個(gè)系列夠長(zhǎng)了吧?不用擔(dān)心，讀完之前也許您就掌握了)?，F(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 頁面能夠調(diào)用的 Javascript 方法(比如當(dāng)用戶輸入文本或者從菜單中選擇一項(xiàng)時(shí))。接下來就是在所有 Ajax 應(yīng)用程序中基本都雷同的流程：

　　從 Web 表單中獲取需要的數(shù)據(jù)。

　　建立要連接的 URL。

　　打開到服務(wù)器的連接。

　　設(shè)置服務(wù)器在完成后要運(yùn)行的函數(shù)。

　　發(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 工具庫。

　　處理響應(yīng)

　　現(xiàn)在要面對(duì)服務(wù)器的響應(yīng)了?，F(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)橛辛诵⌒〉囊欢?nbsp;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)行了。

　　Ajax 應(yīng)該不是一項(xiàng)技術(shù)，是一種思想而已，跟 ASP.NET 以及其它 Web 開發(fā)語言沒有什么太大關(guān)系，這里只是談?wù)?nbsp;ASP.NET 中目前使用的 Ajax 技術(shù)以及其它一些實(shí)現(xiàn) Ajax 的優(yōu)秀框架。 

　　Ajax 已經(jīng)很流行一陣子了，現(xiàn)在談 Ajax 覺得有點(diǎn)老土。目前所謂的 Web2.0 網(wǎng)站，基本上沒有不使用 Ajax 的，就如使用 RSS 一樣，就如同一個(gè)標(biāo)簽，貼上去就成了 2.0。Ajax 具體細(xì)節(jié)不談，其目的就是讓用戶觸發(fā)一些操作的時(shí)候，頁面不會(huì)全部刷新，只刷新待更新的“部分頁面”，加載數(shù)據(jù)的過程中，用 Loading 的圖片來表示正在加載數(shù)據(jù)，不只是看起來挺不錯(cuò)，也提高了用戶的訪問體驗(yàn)，有一種酷酷的感覺。

　　至于 ASP.NET 中用到的 Ajax ，我想大多數(shù)人使用的是 Ajax.net / AjaxProfessional 或者 ASP.NET 2.0 中帶有的 Atlas 框架。因?yàn)槎加眠^，我感覺這些都不是很好的 Ajax 解決方案。

　　AjaxPro 用起來不是很方便，頁面需要在 Page_Load 里面注冊(cè)，類似于

以下是引用片段：
　　privatevoidPage_Load(objectsender,System.EventArgse)
　　{
　　AjaxPro.Utility.RegisterTypeForAjax(typeof(DataAccess.MyAjax));
　　}

　　而且 ASPX 頁面要包含一個(gè) Runat=Server 的 標(biāo)記，這樣 Ajax.net 會(huì)將用到的一些通用函數(shù)以及你自定義的函數(shù)加載進(jìn)來，如果沒有 其實(shí)也可以，手動(dòng)添加就可以了。但是，在我以前做過的應(yīng)用中，時(shí)常出現(xiàn)的一些問題，比如，經(jīng)常發(fā)現(xiàn)瀏覽器狀態(tài)欄會(huì)有 js 腳本錯(cuò)誤，而此時(shí)你所做的 Ajax 效果會(huì)全部失效，解決辦法就是，把那個(gè) Ajax.dll /AjaxPro.dll 給重新覆蓋一下就可以了，問題的原因究竟是什么，目前還不知道。 

　　至于 Atlas，我對(duì)它的感覺其實(shí)就跟對(duì) DataGrid 的感覺一樣，嗯，這種控件的好用是好用，很方便，但是，真正做一些 Web 應(yīng)用的時(shí)候，你不得不考慮到性能以及分層等各種問題。我想，在比較正式的 Web 應(yīng)用中，沒幾個(gè)人去用 DataGrid 去顯示一些數(shù)據(jù)吧，建議大家盡量少用這些控件。

 

一．ASP.NET AJAX組成部分

　　在ASP.NET AJAX官方網(wǎng)站上有如下三個(gè)下載：

　　1．ASP.NET AJAX：這部分是ASP.NET AJAX的核心部分，包括了核心AJAX類型系統(tǒng)，網(wǎng)絡(luò)協(xié)議層(networking stack)，組件模型，擴(kuò)展器(extender)基類，以及與ASP.NET集成的服務(wù)器端功能(包括廣受歡迎的ScriptManager，UpdatePanel，和 Timer控件)。功能列表如下：

服務(wù)端功能列表 
Asynchronous client-to-server networking 
Authentication as a Web service 
ControlExtender class 
Profile as a Web service 
ScriptManager and ScriptManagerProxy controls 
Static page methods as Web services 
Timer control 
UpdatePanel control 
UpdateProgress control 
客戶端功能列表 
Authentication for JavaScript 
Behavior class 
Calling .asmx Web services from JavaScript 
Component class 
Control class 
Debug class 
JavaScript Array type extensions 
JavaScript Boolean type extensions 
JavaScript Error type extensions 
JavaScript Number type extensions 
JavaScript Object type extensions 
JavaScript String type extensions 
JSON serialization 
Profile for JavaScript 
Trace class 


　　2．ASP.NET AJAX “Value-Add”CTP：ASP.NET AJAX社區(qū)支持的“增值”CTP部分，包括了以前各個(gè)Atlas CTP版本包含的，但并不在完全支持的“核心”1.0 版本內(nèi)的額外的高級(jí)特性。通過進(jìn)一步的反饋，這些將會(huì)逐步穩(wěn)定的增加到核心1.0中去。功能列表如下：

服務(wù)端功能列表 
AutoCompleteExtender class 
Cross-browser Web Parts drag-and-drop 
DragOverlayExtender control 
PopupExtender class 
客戶端功能列表 
Actions components 
AutoCompleteBehavior class 
BatchResponse class 
Binding component 
Button control 
Checkbox control 
Click behavior 
Counter class 
Cross-browser Web Parts 
Data control 
DragDropList control 
DragDropManager component 
DraggableListItem control 
FadeAnimation component

　　Floating behavior
 
Hover behavior 
Hyperlink control 
Image control 
Input control 
Label control 
Layout behavior 
Opacity behavior 
Popup behavior 
Selector control 
ServiceMethodRequest class 
Sys.Data and Sys.UI.Data namespaces 
Textbox control 
Timer control 
Validator controls 
xml-script support

 

3．ASP.NET AJAX Control Toolkit：包含了基于ASP.NET AJAX 1.0 版“核心”下載版本的28個(gè)非常酷的免費(fèi)AJAX控件。它是一個(gè)開源項(xiàng)目，由微軟和非微軟開發(fā)人員共同開發(fā)的，去CodePlex下載代碼。

　　二．安裝ASP.NET AJAX

　　1．在安裝ASP.NET AJAX 1.0 Beta之前，需要先卸載以前所有的CTP版本。

　　2．下載ASP.NET AJAX 1.0 Beta安裝包，安裝時(shí)Microsoft.Web.Extensions.dll程序集將被安裝在GAC（Global Assembly Cache）中，所以使用時(shí)不需要再在Web站點(diǎn)的Bin文件夾中包括該程序集。

　　3．下載安裝ASP.NET AJAX “Value-Add”CTP和ASP.NET AJAX Control Toolkit。列表如下：

名稱 描述 
Accordion: Create efficient UI from multiple panes with this animated control. 
AlwaysVisibleControl Docks a panel to a corner of the browser window and keeps it visible even when the user scrolls. 
Animation Adds powerful, easy to use animations to any element or control. 
CascadingDropDown Easily link drop downs, complete with asynchronous population and no postbacks! 
CollapsiblePanel This extender allows panels on your page to collapse and expand with no code. 
ConfirmButton This extender adds a confirm dialog to any Button, LinkButton, or ImageButton control. 
DragPanel Makes any panel into an object that you can drag around the page. 
DropDown This extender can wrap any control to provide a SharePoint-style drop-down menu that is attached to the control. 
DropShadow This extender adds attractive drop shadows to any control on the page 
DynamicPopulate Replace the contents of a page element with the result of a web-service call. 
FilteredTextBox Restrict the types of input that text boxes will accept. 
HoverMenu Allows UI to pop up next to a control when the mouse hovers over it. 
ModalPopup Allows you to show styled modal UI without using HTML dialogs. 
MutuallyExlcusiveCheckBox By adding a number of checkboxes to the same “Key”, only one checkbox with the specified key can be checked at a time. 
NoBot Applies simple rules to prevent automated bots or scripts from posting to a page. 
NumericUpDown Allow users to easily increase and decrease values using the mouse to scroll through values. 
PagingBulletedList Add paging and sorting to long bulleted lists. 
PasswordStrength Give your users visual cues to help them create secure passwords. 
PopupControl This extender turns any panel into a popup. 
Rating Let your users easily give feedback by rating content with this easy-to-use control. 
ReorderList This control is a full-featured data-bound control that allows its elements to be reordered on the client via drag and drop. 
ResizableControl Allow users to dynamically resize content, right in the browser 
RoundedCorners Rounds the corners of any control for a clean, professional look! 
Slider Adds an elegant scrollbar-like user interface for setting numeric values. 
TextBoxWatermark This extender adds "watermark" prompt text to TextBoxes on the page. 
ToggleButton This extender turns an ASP.NET CheckBox into an image checkbox. 
UpdatePanelAnimation Animates page elements corresponding to hidden postback activity. 
ValidatorCallout This extender enhances the functionality of existing ASP.NET validators. 


　　三．在Visual Studio.NET 2005開發(fā)基于ASP.NET AJAX的應(yīng)用

　　安裝完ASP.NET AJAX后，打開Visual Studio.NET 2005中新建Web Site，在項(xiàng)目模板中會(huì)出現(xiàn)一項(xiàng)ASP.NET AJAX-enabled Web site，直接選擇它就可以了，如下圖：
 

該文章在 2010/8/18 21:53:09 編輯過