本系列的上一期文章（請(qǐng)參閱 參考資料 中的鏈接），我們介紹了 Ajax 應(yīng)用程序，考察了推動(dòng) Ajax 應(yīng)用程序的基本概念。其中的核心是很多您可能已經(jīng)了解的技術(shù)：JavaScript、HTML 和 XHTML、一點(diǎn)動(dòng)態(tài) HTML 以及 DOM（文檔對(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 是什么？” 雖然很少聽(tīng)人提到 Web 1.0，實(shí)際上它指的就是具有完全不同的請(qǐng)求和響應(yīng)模型的傳統(tǒng) Web。比如，到 Amazon.com 網(wǎng)站上點(diǎn)擊一個(gè)按鈕或者輸入搜索項(xiàng)。就會(huì)對(duì)服務(wù)器發(fā)送一個(gè)請(qǐng)求，然后響應(yīng)再返回到瀏覽器。該請(qǐng)求不僅僅是圖書(shū)和書(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ù)交互。比如訪問(wèn) Google Maps 或 Flickr 這樣的站點(diǎn)（到這些支持 Web 2.0 和 Ajax 站點(diǎn)的鏈接請(qǐng)參閱 參考資料 ）。比如在 Google Maps 上，您可以拖動(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ù)。這些情況下，Ajax 和 Web 2.0 方法允許在 不 更新整個(gè) HTML 頁(yè)面的情況下發(fā)送和接收數(shù)據(jù)。對(duì)于那些經(jīng)常上網(wǎng)的人，這種能力可以讓您的應(yīng)用程序感覺(jué)更快、響應(yīng)更及時(shí)，讓他們不時(shí)地光顧您的網(wǎng)站。

回頁(yè)首

XMLHttpRequest 簡(jiǎn)介

要真正實(shí)現(xiàn)這種絢麗的奇跡，必須非常熟悉一個(gè) JavaScript 對(duì)象，即 XMLHttpRequest 。這個(gè)小小的對(duì)象實(shí)際上已經(jīng)在幾種瀏覽器中存在一段時(shí)間了，它是本專欄今后幾個(gè)月中要介紹的 Web 2.0、Ajax 和大部分其他內(nèi)容的核心。為了讓您快速地大體了解它，下面給出將要用于該對(duì)象的 很少的幾個(gè) 方法和屬性。

• open() ：建立到服務(wù)器的新請(qǐng)求。
• send() ：向服務(wù)器發(fā)送請(qǐng)求。
• abort() ：退出當(dāng)前請(qǐng)求。
• readyState ：提供當(dāng)前 HTML 的就緒狀態(tài)。
• responseText ：服務(wù)器返回的請(qǐng)求響應(yīng)文本。

如果不了解這些（或者其中的 任何 一個(gè)），您也不用擔(dān)心，后面幾篇文章中我們將介紹每個(gè)方法和屬性。現(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ì)象可以徹底改變您的應(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ì)象

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

          

不難吧？記住，JavaScript 不要求指定變量類型，因此不需要像 清單 2 那樣做（在 Java 語(yǔ)言中可能需要這樣）。

清單 2. 創(chuàng)建 XMLHttpRequest 的 Java 偽代碼

            XMLHttpRequest request = new XMLHttpRequest();

          

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

清單 3. 創(chuàng)建具有錯(cuò)誤處理能力的 XMLHttpRequest

            <script language="javascript" type="text/javascript">

            
              var request = false;
try {
            
            
  request = new XMLHttpRequest();

            
              } catch (failed) {
  request = false;
}
if (!request)
  alert("Error initializing XMLHttpRequest!");
            
            
</script>

          

一定要理解這些步驟：

1. 創(chuàng)建一個(gè)新變量 request 并賦值 false。后面將使用 false 作為判定條件，它表示還沒(méi)有創(chuàng)建 XMLHttpRequest 對(duì)象。
2. 增加 try/catch 塊：
   1. 嘗試創(chuàng)建 XMLHttpRequest 對(duì)象。
   2. 如果失敗（ catch (failed) ）則保證 request 的值仍然為 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í)間。現(xiàn)在已經(jīng)得到了一段帶有錯(cuò)誤檢查的 XMLHttpRequest 對(duì)象創(chuàng)建代碼，還可以告訴您哪兒出了問(wèn)題。

應(yīng)付 Microsoft

看起來(lái)似乎一切良好，至少在用 Internet Explorer 試驗(yàn)這些代碼之前是這樣的。如果這樣試驗(yàn)的話，就會(huì)看到 圖 1 所示的糟糕情形。

圖 1. Internet Explorer 報(bào)告錯(cuò)誤

顯然有什么地方不對(duì)勁，而 Internet Explorer 很難說(shuō)是一種過(guò)時(shí)的瀏覽器，因?yàn)槿澜缬?70% 在使用 Internet Explorer。換句話說(shuō)，如果不支持 Microsoft 和 Internet Explorer 就不會(huì)受到 Web 世界的歡迎！因此我們需要采用不同的方法處理 Microsoft 瀏覽器。

經(jīng)驗(yàn)證發(fā)現(xiàn) Microsoft 支持 Ajax，但是其 XMLHttpRequest 版本有不同的稱呼。事實(shí)上，它將其稱為 幾種 不同的東西。如果使用較新版本的 Internet Explorer，則需要使用對(duì)象 Msxml2.XMLHTTP ，而較老版本的 Internet Explorer 則使用 Microsoft.XMLHTTP 。我們需要支持這兩種對(duì)象類型（同時(shí)還要支持非 Microsoft 瀏覽器）。請(qǐng)看看 清單 4 ，它在前述代碼的基礎(chǔ)上增加了對(duì) Microsoft 的支持。

清單 4. 增加對(duì) Microsoft 瀏覽器的支持

            <script language="javascript" type="text/javascript">
var request = false;
try {
  request = new XMLHttpRequest();
} 
            
              catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = false;
    }
  }
            
            
}
if (!request)
  alert("Error initializing XMLHttpRequest!");
</script>

          

很容易被這些花括號(hào)迷住了眼睛，因此下面分別介紹每一步：

1. 創(chuàng)建一個(gè)新變量 request 并賦值 false。使用 false 作為判斷條件，它表示還沒(méi)有創(chuàng)建 XMLHttpRequest 對(duì)象。
2. 增加 try/catch 塊：
   1. 嘗試創(chuàng)建 XMLHttpRequest 對(duì)象。
   2. 如果失敗（ catch (trymicrosoft) ）：
      1. 嘗試使用較新版本的 Microsoft 瀏覽器創(chuàng)建 Microsoft 兼容的對(duì)象（ Msxml2.XMLHTTP ）。
      2. 如果失敗（ catch (othermicrosoft) ）嘗試使用較老版本的 Microsoft 瀏覽器創(chuàng)建 Microsoft 兼容的對(duì)象（ Microsoft.XMLHTTP ）。
   3. 如果失敗（ catch (failed) ）則保證 request 的值仍然為 false。
3. 檢查 request 是否仍然為 false（如果一切順利就不會(huì)是 false）。
4. 如果出現(xiàn)問(wèn)題（ request 是 false）則使用 JavaScript 警告通知用戶出現(xiàn)了問(wèn)題。

這樣修改代碼之后再使用 Internet Explorer 試驗(yàn)，就應(yīng)該看到已經(jīng)創(chuàng)建的表單（沒(méi)有錯(cuò)誤消息）。我實(shí)驗(yàn)的結(jié)果如 圖 2 所示。

圖 2. Internet Explorer 正常工作

靜態(tài)與動(dòng)態(tài)

再看一看清單 1 、 3 和 4 ，注意，所有這些代碼都直接嵌套在 script 標(biāo)記中。像這種不放到方法或函數(shù)體中的 JavaScript 代碼稱為 靜態(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. 將 XMLHttpRequest 創(chuàng)建代碼移動(dòng)到方法中

            <script language="javascript" type="text/javascript">
var request;

            
              function createRequest() {
            
            
  try {
    request = new XMLHttpRequest();
  } catch (trymicrosoft) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = false;
      }
    }
  }
  if (!request)
    alert("Error initializing XMLHttpRequest!");

            
              }
            
            
</script>

          

如果按照這種方式編寫(xiě)代碼，那么在處理 Ajax 之前需要調(diào)用該方法。因此還需要 清單 6 這樣的代碼。

清單 6. 使用 XMLHttpRequest 的創(chuàng)建方法

            <script language="javascript" type="text/javascript">
var request;
function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (trymicrosoft) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = false;
      }
    }
  }
  if (!request)
    alert("Error initializing XMLHttpRequest!");
}

            
              function getCustomerInfo() {
  createRequest();
  // Do something with the request variable
}
            
            
</script>

          

此代碼惟一的問(wèn)題是推遲了錯(cuò)誤通知，這也是多數(shù) Ajax 程序員不采用這一方法的原因。假設(shè)一個(gè)復(fù)雜的表單有 10 或 15 個(gè)字段、選擇框等，當(dāng)用戶在第 14 個(gè)字段（按照表單順序從上到下）輸入文本時(shí)要激活某些 Ajax 代碼。這時(shí)候運(yùn)行 getCustomerInfo() 嘗試創(chuàng)建一個(gè) XMLHttpRequest 對(duì)象，但（對(duì)于本例來(lái)說(shuō)）失敗了。然后向用戶顯示一條警告，明確地告訴他們不能使用該應(yīng)用程序。但用戶已經(jīng)花費(fèi)了很多時(shí)間在表單中輸入數(shù)據(jù)！這是非常令人討厭的，而討厭顯然不會(huì)吸引用戶再次訪問(wèn)您的網(wǎng)站。

如果使用靜態(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)題。

回頁(yè)首

用 XMLHttpRequest 發(fā)送請(qǐng)求

得到請(qǐng)求對(duì)象之后就可以進(jìn)入請(qǐng)求/響應(yīng)循環(huán)了。記住， XMLHttpRequest 惟一的目的是讓您發(fā)送請(qǐng)求和接收響應(yīng)。其他一切都是 JavaScript、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.com 上運(yùn)行，則必須 www.breakneck.com 中運(yùn)行的腳本發(fā)送請(qǐng)求。

設(shè)置服務(wù)器 URL

首先要確定連接的服務(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)求 URL

            <script language="javascript" type="text/javascript">
   var request = false;
   try {
     request = new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         request = false;
       }  
     }
   }
   if (!request)
     alert("Error initializing XMLHttpRequest!");
   function getCustomerInfo() {
     
            
              var phone = document.getElementById("phone").value;
     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
            
            
   }
</script>

          

這里沒(méi)有難懂的地方。首先，代碼創(chuàng)建了一個(gè)新變量 phone ，并把 ID 為 “phone” 的表單字段的值賦給它。 清單 8 展示了這個(gè)表單的 XHTML，其中可以看到 phone 字段及其 id 屬性。

清單 8. Break Neck Pizza 表單

             <body>
  <p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p>
  <form action="POST">
   <p>Enter your phone number:
    
            
              <input type="text" size="14" name="phone" id="phone" 
           onChange="getCustomerInfo();" />
            
            
   </p>
   <p>Your order will be delivered to:</p>
   <div id="address"></div>
   <p>Type your order in here:</p>
   <p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
   <p><input type="submit" value="Order Pizza" id="submit" /></p>
  </form>
 </body>

          

還要注意，當(dāng)用戶輸入電話號(hào)碼或者改變電話號(hào)碼時(shí)，將觸發(fā) 清單 8 所示的 getCustomerInfo() 方法。該方法取得電話號(hào)碼并構(gòu)造存儲(chǔ)在 url 變量中的 URL 字符串。記住，由于 Ajax 代碼是沙箱型的，因而只能連接到同一個(gè)域，實(shí)際上 URL 中不需要域名。該例中的腳本名為 /cgi-local/lookupCustomer.php 。最后，電話號(hào)碼作為 GET 參數(shù)附加到該腳本中： "phone=" + escape(phone) 。

如果以前沒(méi)用見(jiàn)過(guò) escape() 方法，它用于轉(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)求的類型。典型的值是 GET 或 POST ，但也可以發(fā)送 HEAD 請(qǐng)求。
• url ：要連接的 URL。
• asynch ：如果希望使用異步連接則為 true，否則為 false。該參數(shù)是可選的，默認(rèn)為 true。
• username ：如果需要身份驗(yàn)證，則可以在此指定用戶名。該可選參數(shù)沒(méi)有默認(rèn)值。
• password ：如果需要身份驗(yàn)證，則可以在此指定口令。該可選參數(shù)沒(méi)有默認(rèn)值。

通常使用其中的前三個(gè)參數(shù)。事實(shí)上，即使需要異步連接，也應(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 = document.getElementById("phone").value;
     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
     
            
              request.open("GET", url, true);
            
            
   }

          

一旦設(shè)置好了 URL，其他就簡(jiǎn)單了。多數(shù)請(qǐng)求使用 GET 就夠了（后面的文章中將看到需要使用 POST 的情況），再加上 URL，這就是使用 open() 方法需要的全部?jī)?nèi)容了。

挑戰(zhàn)異步性

本系列的后面一篇文章中，我將用很多時(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上變得不能使用，直到剛剛觸發(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)求

一旦用 open() 配置好之后，就可以發(fā)送請(qǐng)求了。幸運(yùn)的是，發(fā)送請(qǐng)求的方法的名稱要比 open() 適當(dāng)，它就是 send() 。

send() 只有一個(gè)參數(shù)，就是要發(fā)送的內(nèi)容。但是在考慮這個(gè)方法之前，回想一下前面已經(jīng)通過(guò) URL 本身發(fā)送過(guò)數(shù)據(jù)了：

            var url = "/cgi-local/lookupCustomer.php?
            
              phone=" + escape(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)容（本系列的后續(xù)文章中將討論安全數(shù)據(jù)和 XML 消息）。如果不需要通過(guò) send() 傳遞數(shù)據(jù)，則只要傳遞 null 作為該方法的參數(shù)即可。因此您會(huì)發(fā)現(xiàn)在本文中的例子中只需要這樣發(fā)送請(qǐng)求（參見(jiàn) 清單 10 ）。

清單 10. 發(fā)送請(qǐng)求

               function getCustomerInfo() {
     var phone = document.getElementById("phone").value;
     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
     request.open("GET", url, true);
     
            
              request.send(null);
            
            
   }

          

指定回調(diào)方法

現(xiàn)在我們所做的只有很少一點(diǎn)是新的、革命性的或異步的。必須承認(rèn)， open() 方法中 “true” 這個(gè)小小的關(guān)鍵字建立了異步請(qǐng)求。但是除此之外，這些代碼與用 Java servlet 及 JSP、PHP 或 Perl 編程沒(méi)有什么兩樣。那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLHttpRequest 的一個(gè)簡(jiǎn)單屬性 onreadystatechange 。

首先一定要理解這些代碼中的流程（如果需要請(qǐng)回顧 清單 10 ）。建立其請(qǐng)求然后發(fā)出請(qǐng)求。此外，因?yàn)槭钱惒秸?qǐng)求，所以 JavaScript 方法（例子中的 getCustomerInfo() ）不會(huì)等待服務(wù)器。因此代碼將繼續(xù)執(zhí)行，就是說(shuō)，將退出該方法而把控制返回給表單。用戶可以繼續(xù)輸入信息，應(yīng)用程序不會(huì)等待服務(wù)器。

這就提出了一個(gè)有趣的問(wèn)題：服務(wù)器完成了請(qǐng)求之后會(huì)發(fā)生什么？答案是什么也不發(fā)生，至少對(duì)現(xiàn)在的代碼而言如此！顯然這樣不行，因此服務(wù)器在完成通過(guò) XMLHttpRequest 發(fā)送給它的請(qǐng)求處理之后需要某種指示說(shuō)明怎么做。

現(xiàn)在 onreadystatechange 屬性該登場(chǎng)了。該屬性允許指定一個(gè) 回調(diào)函數(shù) 。回調(diào)允許服務(wù)器（猜得到嗎？） 反向調(diào)用 Web 頁(yè)面中的代碼。它也給了服務(wù)器一定程度的控制權(quán)，當(dāng)服務(wù)器完成請(qǐng)求之后，會(huì)查看 XMLHttpRequest 對(duì)象，特別是 onreadystatechange 屬性。然后調(diào)用該屬性指定的任何方法。之所以稱為回調(diào)是因?yàn)榉?wù)器向網(wǎng)頁(yè)發(fā)起調(diào)用，無(wú)論網(wǎng)頁(yè)本身在做什么。比方說(shuō)，可能在用戶坐在椅子上手沒(méi)有碰鍵盤(pán)的時(shí)候調(diào)用該方法，但是也可能在用戶輸入、移動(dòng)鼠標(biāo)、滾動(dòng)屏幕或者點(diǎn)擊按鈕時(shí)調(diào)用該方法。它并不關(guān)心用戶在做什么。

這就是稱之為異步的原因：用戶在一層上操作表單，而在另一層上服務(wù)器響應(yīng)請(qǐng)求并觸發(fā) onreadystatechange 屬性指定的回調(diào)方法。因此需要像 清單 11 一樣在代碼中指定該方法。

清單 11. 設(shè)置回調(diào)方法

               function getCustomerInfo() {
     var phone = document.getElementById("phone").value;
     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
     request.open("GET", url, true);
     
            
              request.onreadystatechange = updatePage;
            
            
     request.send(null);
   }

          

需要特別注意的是該屬性在代碼中設(shè)置的 位置 —— 它是在調(diào)用 send() 之前 設(shè)置的。發(fā)送請(qǐng)求之前必須設(shè)置該屬性，這樣服務(wù)器在回答完成請(qǐng)求之后才能查看該屬性。現(xiàn)在剩下的就只有編寫(xiě) updatePage() 方法了，這是本文最后一節(jié)要討論的重點(diǎn)。

回頁(yè)首

處理服務(wù)器響應(yīng)

發(fā)送請(qǐng)求，用戶高興地使用 Web 表單（同時(shí)服務(wù)器在處理請(qǐng)求），而現(xiàn)在服務(wù)器完成了請(qǐng)求處理。服務(wù)器查看 onreadystatechange 屬性確定要調(diào)用的方法。除此以外，可以將您的應(yīng)用程序看作其他應(yīng)用程序一樣，無(wú)論是否異步。換句話說(shuō)，不一定要采取特殊的動(dòng)作編寫(xiě)響應(yīng)服務(wù)器的方法，只需要改變表單，讓用戶訪問(wèn)另一個(gè) URL 或者做響應(yīng)服務(wù)器需要的任何事情。這一節(jié)我們重點(diǎn)討論對(duì)服務(wù)器的響應(yīng)和一種典型的動(dòng)作 —— 即時(shí)改變用戶看到的表單中的一部分。

回調(diào)和 Ajax

現(xiàn)在我們已經(jīng)看到如何告訴服務(wù)器完成后應(yīng)該做什么：將 XMLHttpRequest 對(duì)象的 onreadystatechange 屬性設(shè)置為要運(yùn)行的函數(shù)名。這樣，當(dāng)服務(wù)器處理完請(qǐng)求后就會(huì)自動(dòng)調(diào)用該函數(shù)。也不需要擔(dān)心該函數(shù)的任何參數(shù)。我們從一個(gè)簡(jiǎn)單的方法開(kāi)始，如 清單 12 所示。

清單 12. 回調(diào)方法的代碼

            <script language="javascript" type="text/javascript">
   var request = false;
   try {
     request = new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         request = false;
       }  
     }
   }
   if (!request)
     alert("Error initializing XMLHttpRequest!");
   function getCustomerInfo() {
     var phone = document.getElementById("phone").value;
     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }
   
            
              function updatePage() {
     alert("Server is done!");
   }
            
            
</script>

          

它僅僅發(fā)出一些簡(jiǎn)單的警告，告訴您服務(wù)器什么時(shí)候完成了任務(wù)。在自己的網(wǎng)頁(yè)中試驗(yàn)這些代碼，然后在瀏覽器中打開(kāi)（如果希望查看該例中的 XHTML，請(qǐng)參閱 清單 8 ）。輸入電話號(hào)碼然后離開(kāi)該字段，將看到一個(gè)彈出的警告窗口（如 圖 3 所示），但是點(diǎn)擊 OK 又出現(xiàn)了……

圖 3. 彈出警告的 Ajax 代碼

根據(jù)瀏覽器的不同，在表單停止彈出警告之前會(huì)看到兩次、三次甚至四次警告。這是怎么回事呢？原來(lái)我們還沒(méi)有考慮 HTTP 就緒狀態(tài)，這是請(qǐng)求/響應(yīng)循環(huán)中的一個(gè)重要部分。

HTTP 就緒狀態(tài)

前面提到，服務(wù)器在完成請(qǐng)求之后會(huì)在 XMLHttpRequest 的 onreadystatechange 屬性中查找要調(diào)用的方法。這是真的，但還不完整。事實(shí)上，每當(dāng) HTTP 就緒狀態(tài)改變時(shí)它都會(huì)調(diào)用該方法。這意味著什么呢？首先必須理解 HTTP 就緒狀態(tài)。

HTTP 就緒狀態(tài)表示請(qǐng)求的狀態(tài)或情形。它用于確定該請(qǐng)求是否已經(jīng)開(kāi)始、是否得到了響應(yīng)或者請(qǐng)求/響應(yīng)模型是否已經(jīng)完成。它還可以幫助確定讀取服務(wù)器提供的響應(yīng)文本或數(shù)據(jù)是否安全。在 Ajax 應(yīng)用程序中需要了解五種就緒狀態(tài)：

• 0 ：請(qǐng)求沒(méi)有發(fā)出（在調(diào)用 open() 之前）。
• 1 ：請(qǐng)求已經(jīng)建立但還沒(méi)有發(fā)出（調(diào)用 send() 之前）。
• 2 ：請(qǐng)求已經(jīng)發(fā)出正在處理之中（這里通常可以從響應(yīng)得到內(nèi)容頭部）。
• 3 ：請(qǐng)求已經(jīng)處理，響應(yīng)中通常有部分?jǐn)?shù)據(jù)可用，但是服務(wù)器還沒(méi)有完成響應(yīng)。
• 4 ：響應(yīng)已完成，可以訪問(wèn)服務(wù)器響應(yīng)并使用它。

與大多數(shù)跨瀏覽器問(wèn)題一樣，這些就緒狀態(tài)的使用也不盡一致。您也許期望任務(wù)就緒狀態(tài)從 0 到 1、2、3 再到 4，但實(shí)際上很少是這種情況。一些瀏覽器從不報(bào)告 0 或 1 而直接從 2 開(kāi)始，然后是 3 和 4。其他瀏覽器則報(bào)告所有的狀態(tài)。還有一些則多次報(bào)告就緒狀態(tài) 1。在上一節(jié)中看到，服務(wù)器多次調(diào)用 updatePage() ，每次調(diào)用都會(huì)彈出警告框 —— 可能和預(yù)期的不同！

對(duì)于 Ajax 編程，需要直接處理的惟一狀態(tài)就是就緒狀態(tài) 4，它表示服務(wù)器響應(yīng)已經(jīng)完成，可以安全地使用響應(yīng)數(shù)據(jù)了。基于此，回調(diào)方法中的第一行應(yīng)該如 清單 13 所示。

清單 13. 檢查就緒狀態(tài)

               function updatePage() {
     
            
              if (request.readyState == 4)
            
            
       alert("Server is done!");
   }

          

修改后就可以保證服務(wù)器的處理已經(jīng)完成。嘗試運(yùn)行新版本的 Ajax 代碼，現(xiàn)在就會(huì)看到與預(yù)期的一樣，只顯示一次警告信息了。

HTTP 狀態(tài)碼

雖然 清單 13 中的代碼看起來(lái)似乎不錯(cuò)，但是還有一個(gè)問(wèn)題 —— 如果服務(wù)器響應(yīng)請(qǐng)求并完成了處理但是報(bào)告了一個(gè)錯(cuò)誤怎么辦？要知道，服務(wù)器端代碼應(yīng)該明白它是由 Ajax、JSP、普通 HTML 表單或其他類型的代碼調(diào)用的，但只能使用傳統(tǒng)的 Web 專用方法報(bào)告信息。而在 Web 世界中，HTTP 代碼可以處理請(qǐng)求中可能發(fā)生的各種問(wèn)題。

比方說(shuō)，您肯定遇到過(guò)輸入了錯(cuò)誤的 URL 請(qǐng)求而得到 404 錯(cuò)誤碼的情形，它表示該頁(yè)面不存在。這僅僅是 HTTP 請(qǐng)求能夠收到的眾多錯(cuò)誤碼中的一種（完整的狀態(tài)碼列表請(qǐng)參閱 參考資料 中的鏈接）。表示所訪問(wèn)數(shù)據(jù)受到保護(hù)或者禁止訪問(wèn)的 403 和 401 也很常見(jiàn)。無(wú)論哪種情況，這些錯(cuò)誤碼都是從 完成的響應(yīng) 得到的。換句話說(shuō)，服務(wù)器履行了請(qǐng)求（即 HTTP 就緒狀態(tài)是 4）但是沒(méi)有返回客戶機(jī)預(yù)期的數(shù)據(jù)。

因此除了就緒狀態(tài)外，還需要檢查 HTTP 狀態(tài)。我們期望的狀態(tài)碼是 200，它表示一切順利。如果就緒狀態(tài)是 4 而且狀態(tài)碼是 200，就可以處理服務(wù)器的數(shù)據(jù)了，而且這些數(shù)據(jù)應(yīng)該就是要求的數(shù)據(jù)（而不是錯(cuò)誤或者其他有問(wèn)題的信息）。因此還要在回調(diào)方法中增加狀態(tài)檢查，如 清單 14 所示。

清單 14. 檢查 HTTP 狀態(tài)碼

               function updatePage() {
     if (request.readyState == 4)
       
            
              if (request.status == 200)
            
            
         alert("Server is done!");
   }

          

為了增加更健壯的錯(cuò)誤處理并盡量避免過(guò)于復(fù)雜，可以增加一兩個(gè)狀態(tài)碼檢查，請(qǐng)看一看 清單 15 中修改后的 updatePage() 版本。

清單 15. 增加一點(diǎn)錯(cuò)誤檢查

               function updatePage() {
     if (request.readyState == 4)
       if (request.status == 200)
         alert("Server is done!");
       
            
              else if (request.status == 404)
         alert("Request URL does not exist");
       else
         alert("Error: status code is " + request.status);
            
            
   }

          

現(xiàn)在將 getCustomerInfo() 中的 URL 改為不存在的 URL 看看會(huì)發(fā)生什么。應(yīng)該會(huì)看到警告信息說(shuō)明要求的 URL 不存在 —— 好極了！很難處理所有的錯(cuò)誤條件，但是這一小小的改變能夠涵蓋典型 Web 應(yīng)用程序中 80% 的問(wèn)題。

讀取響應(yīng)文本

現(xiàn)在可以確保請(qǐng)求已經(jīng)處理完成（通過(guò)就緒狀態(tài)），服務(wù)器給出了正常的響應(yīng)（通過(guò)狀態(tài)碼），最后我們可以處理服務(wù)器返回的數(shù)據(jù)了。返回的數(shù)據(jù)保存在 XMLHttpRequest 對(duì)象的 responseText 屬性中。

關(guān)于 responseText 中的文本內(nèi)容，比如格式和長(zhǎng)度，有意保持含糊。這樣服務(wù)器就可以將文本設(shè)置成任何內(nèi)容。比方說(shuō)，一種腳本可能返回逗號(hào)分隔的值，另一種則使用管道符（即 | 字符）分隔的值，還有一種則返回長(zhǎng)文本字符串。何去何從由服務(wù)器決定。

在本文使用的例子中，服務(wù)器返回客戶的上一個(gè)訂單和客戶地址，中間用管道符分開(kāi)。然后使用訂單和地址設(shè)置表單中的元素值， 清單 16 給出了更新顯示內(nèi)容的代碼。

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

               function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         
            
              var response = request.responseText.split("|");
         document.getElementById("order").value = response[0];
         document.getElementById("address").innerHTML =
           response[1].replace(//n/g, "
              

              ");
            
            
       } else
         alert("status is " + request.status);
     }
   }

          

首先，得到 responseText 并使用 JavaScript split() 方法從管道符分開(kāi)。得到的數(shù)組放到 response 中。數(shù)組中的第一個(gè)值 —— 上一個(gè)訂單 —— 用 response[0] 訪問(wèn)，被設(shè)置為 ID 為 “order” 的字段的值。第二個(gè)值 response[1] ，即客戶地址，則需要更多一點(diǎn)處理。因?yàn)榈刂分械男杏靡话愕男蟹指舴ā?n”字符）分隔，代碼中需要用 XHTML 風(fēng)格的行分隔符 <br /> 來(lái)代替。替換過(guò)程使用 replace() 函數(shù)和正則表達(dá)式完成。最后，修改后的文本作為 HTML 表單 div 中的內(nèi)部 HTML。結(jié)果就是表單突然用客戶信息更新了，如圖 4 所示。

圖 4. 收到客戶數(shù)據(jù)后的 Break Neck 表單

結(jié)束本文之前，我還要介紹 XMLHttpRequest 的另一個(gè)重要屬性 responseXML 。如果服務(wù)器選擇使用 XML 響應(yīng)則該屬性包含（也許您已經(jīng)猜到）XML 響應(yīng)。處理 XML 響應(yīng)和處理普通文本有很大不同，涉及到解析、文檔對(duì)象模型（DOM）和其他一些問(wèn)題。后面的文章中將進(jìn)一步介紹 XML。但是因?yàn)? responseXML 通常和 responseText 一起討論，這里有必要提一提。對(duì)于很多簡(jiǎn)單的 Ajax 應(yīng)用程序 responseText 就夠了，但是您很快就會(huì)看到通過(guò) Ajax 應(yīng)用程序也能很好地處理 XML。

回頁(yè)首

結(jié)束語(yǔ)

您可能對(duì) XMLHttpRequest 感到有點(diǎn)厭倦了，我很少看到一整篇文章討論一個(gè)對(duì)象，特別是這種簡(jiǎn)單的對(duì)象。但是您將在使用 Ajax 編寫(xiě)的每個(gè)頁(yè)面和應(yīng)用程序中反復(fù)使用該對(duì)象。坦白地說(shuō)，關(guān)于 XMLHttpRequest 還真有一些可說(shuō)的內(nèi)容。下一期文章中將介紹如何在請(qǐng)求中使用 POST 及 GET ，來(lái)設(shè)置請(qǐng)求中的內(nèi)容頭部和從服務(wù)器響應(yīng)讀取內(nèi)容頭部，理解如何在請(qǐng)求/響應(yīng)模型中編碼請(qǐng)求和處理 XML。

再往后我們將介紹常見(jiàn) Ajax 工具箱。這些工具箱實(shí)際上隱藏了本文所述的很多細(xì)節(jié)，使得 Ajax 編程更容易。您也許會(huì)想，既然有這么多工具箱為何還要對(duì)底層的細(xì)節(jié)編碼。答案是，如果不知道應(yīng)用程序在做 什么 ，就很難發(fā)現(xiàn)應(yīng)用程序中的問(wèn)題。

因此不要忽略這些細(xì)節(jié)或者簡(jiǎn)單地瀏覽一下，如果便捷華麗的工具箱出現(xiàn)了錯(cuò)誤，您就不必?fù)项^或者發(fā)送郵件請(qǐng)求支持了。如果了解如何直接使用 XMLHttpRequest ，就會(huì)發(fā)現(xiàn)很容易調(diào)試和解決最奇怪的問(wèn)題。只有讓其解決您的問(wèn)題，工具箱才是好東西。

因此請(qǐng)熟悉 XMLHttpRequest 吧。事實(shí)上，如果您有使用工具箱的 Ajax 代碼，可以嘗試使用 XMLHttpRequest 對(duì)象及其屬性和方法重新改寫(xiě)。這是一種不錯(cuò)的練習(xí)，可以幫助您更好地理解其中的原理。

下一期文章中將進(jìn)一步討論該對(duì)象，探討它的一些更有趣的屬性（如 responseXML ），以及如何使用 POST 請(qǐng)求和以不同的格式發(fā)送數(shù)據(jù)。請(qǐng)開(kāi)始編寫(xiě)代碼吧，一個(gè)月后我們?cè)倮^續(xù)討論。

參考資料

學(xué)習(xí)

• 您可以參閱本文在 developerWorks 全球站點(diǎn)上的 英文原文 。
  
• 掌握 Ajax，第 1 部分: Ajax 簡(jiǎn)介 （developerWorks，2005 年 12 月）幫助您了解 Ajax，這是一種構(gòu)建網(wǎng)站的高生產(chǎn)率方法。（本文中的參考資料列表都值得訪問(wèn)！）
  
• 面向 Java 開(kāi)發(fā)人員的 Ajax: 構(gòu)建動(dòng)態(tài)的 Java 應(yīng)用程序 （developerWorks，2005 年 9 月）從 Java 的角度考察了 Ajax 服務(wù)器端。
  
• 面向 Java 開(kāi)發(fā)人員的 Ajax: Ajax 的 Java 對(duì)象序列化 （developerWorks，2005 年 10 月）從 Java 的角度分析了如何通過(guò)網(wǎng)絡(luò)發(fā)送對(duì)象以及與 Ajax 交互。
  
• 使用 AJAX 調(diào)用 SOAP Web 服務(wù)，第 1 部分: 構(gòu)建 Web 服務(wù)客戶機(jī) （developerWorks，2005 年 10 月）是關(guān)于集成 Ajax 和現(xiàn)有基于 SOAP 的 web 服務(wù)的相當(dāng)高級(jí)的文章。
  
• Google GMail 是一個(gè)很好的例子，說(shuō)明了基于 Ajax 的應(yīng)用程序如何改變 Web 的工作方式。
  
• Google Maps 是另一種基于 Google 的 Web 2.0 應(yīng)用程序。
  
• Flickr 是一個(gè)很好的例子，說(shuō)明如何使用 Ajax 創(chuàng)建類似桌面的 Web 應(yīng)用程序。
  
• Ajax: A New Approach to Web Applications 發(fā)明了 Ajax 一詞，所有 Ajax 開(kāi)發(fā)人員都應(yīng)該讀一讀。
  
• Why Ajax Matters Now 告訴您為什么 Ajax 很重要。
  
• 如果使用的是 Microsoft 瀏覽器 Internet Explorer，請(qǐng)?jiān)L問(wèn) Microsoft Developer Network's XML Developer Center 。
  
• 請(qǐng)通過(guò) 在線文檔 進(jìn)一步了解 MSXML，Microsoft XML 解析器。
  
• 看一看響應(yīng)中包含的所有 HTTP 狀態(tài)碼 列表。
  
• developerWorks Web Architecture 專區(qū) 專門(mén)發(fā)表各種基于 Web 的解決方案的文章。
  

獲得產(chǎn)品和技術(shù)

• Elisabeth Freeman、Eric Freeman 和 Brett McLaughlin 合著的 Head Rush Ajax （2005 年 2 月，O'Reilly Media, Inc.）以 Head First 風(fēng)格將本文中所述的內(nèi)容灌輸?shù)侥念^腦中。
  
• Java and XML , Second Edition（Brett McLaughlin，2001 年 8 月，O'Reilly Media, Inc.）包括作者關(guān)于 XHTML 和 XML 轉(zhuǎn)換的討論。
  
• JavaScript: The Definitive Guide （David Flanagan，2001 年 11 月，O'Reilly Media, Inc.）詳細(xì)介紹了如何使用 JavaScript、動(dòng)態(tài)網(wǎng)頁(yè)，第二版增加了關(guān)于 Ajax 的兩章。
  
• Head First HTML with CSS & XHTML （Elizabeth 和Eric Freeman，2005 年 12 月，O'Reilly Media, Inc.）是學(xué)習(xí) XHTML、CSS 以及如何將兩者結(jié)合起來(lái)的完整參考。

掌握Ajax系列 第 2 部分: 使用 JavaScript 和 Ajax 發(fā)出異步請(qǐng)求