花

五年前，如果不知道 XML，您就是一只無人重視的丑小鴨。十八個月前，Ruby 成了關注的中心，不知道 Ruby 的程序員只能坐冷板凳了。 今天，如果想跟上最新的技術時尚，那您的目標就是 Ajax。

但是，Ajax 不僅僅 是一種時尚，它是一種構建網站的強大方法，而且不像學習一種全新的語言那樣困難。

但在詳細探討 Ajax 是什么之前，先讓我們花幾分鐘了解 Ajax 做 什么。目前，編寫應用程序時有兩種基本的選擇：

• 桌面應用程序
• Web 應用程序

兩者是類似的，桌面應用程序通常以 CD 為介質（有時候可從網站下載）并完全安裝到您的計算機上。桌面應用程序可能使用互聯網下載更 新，但運行這些應用程序的代碼在桌面計算機上。Web 應用程序運行在某處的 Web 服務器上 —— 毫不奇怪，要通過 Web 瀏覽器訪問這種應 用程序。

不過，比這些應用程序的運行代碼放在何處更重要的是，應用程序如何運轉以及如何與其進行交互。桌面應用程序一般很快（就在您的計算 機上運行，不用等待互聯網連接），具有漂亮的用戶界面（通常和操作系統有關）和非凡的動態性。可以單擊、選擇、輸入、打開菜單和子菜 單、到處巡游，基本上不需要等待。

另一方面，Web 應用程序是最新的潮流，它們提供了在桌面上不能實現的服務（比如 Amazon.com 和 eBay）。但是，伴隨著 Web 的強大而 出現的是等待，等待服務器響應，等待屏幕刷新，等待請求返回和生成新的頁面。

顯然這樣說過于簡略了，但基本的概念就是如此。您可能已經猜到，Ajax 嘗試建立桌面應用程序的功能和交互性，與不斷更新的 Web 應用 程序之間的橋梁。可以使用像桌面應用程序中常見的動態用戶界面和漂亮的控件，不過是在 Web 應用程序中。

還等什么呢？我們來看看 Ajax 如何將笨拙的 Web 界面轉化成能迅速響應的 Ajax 應用程序吧。

老技術，新技巧

在談到 Ajax 時，實際上涉及到多種技術，要靈活地運用它必須深入了解這些不同的技術（本系列的頭幾篇文章將分別討論這些技術）。好 消息是您可能已經非常熟悉其中的大部分技術，更好的是這些技術都很容易學習，并不像完整的編程語言（如 Java 或 Ruby）那樣困難。

Ajax 的定義 順便說一下，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫。這個短語是 Adaptive Path 的 Jesse James Garrett 發明的（請參閱 參考資料），按照 Jesse 的解釋，這不是 個首字母縮寫詞。

下面是 Ajax 應用程序所用到的基本技術：

• HTML 用于建立 Web 表單并確定應用程序其他部分使用的字段。
• JavaScript 代碼是運行 Ajax 應用程序的核心代碼，幫助改進與服務器應用程序的通信。
• DHTML 或 Dynamic HTML，用于動態更新表單。我們將使用 div、span 和其他動態 HTML 元素來標記 HTML。
• 文檔對象模型 DOM 用于（通過 JavaScript 代碼）處理 HTML 結構和（某些情況下）服務器返回的 XML。

我們來進一步分析這些技術的職責。以后的文章中我將深入討論這些技術，目前只要熟悉這些組件和技術就可以了。對這些代碼越熟悉，就 越容易從對這些技術的零散了解轉變到真正把握這些技術（同時也真正打開了 Web 應用程序開發的大門）。

XMLHttpRequest 對象

要了解的一個對象可能對您來說也是最陌生的，即 XMLHttpRequest。這是一個 JavaScript 對象，創建該對象很簡單，如清單 1 所示。

												

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

										

下一期文章中將進一步討論這個對象，現在要知道這是處理所有服務器通信的對象。繼續閱讀之前，先停下來想一想：通過 XMLHttpRequest 對象與服務器進行對話的是 JavaScript 技術。這不是一般的應用程序流，這恰恰是 Ajax 的強大功能 的來源。

在一般的 Web 應用程序中，用戶填寫表單字段并單擊 Submit 按鈕。然后整個表單發送到服務器，服務器將它轉發給處理表單的腳 本（通常是 PHP 或 Java，也可能是 CGI 進程或者類似的東西），腳本執行完成后再發送回全新的頁面。該頁面可能是帶有已經填充某些數據 的新表單的 HTML，也可能是確認頁面，或者是具有根據原來表單中輸入數據選擇的某些選項的頁面。當然，在服務器上的腳本或程序處理和返 回新表單時用戶必須等待。屏幕變成一片空白，等到服務器返回數據后再重新繪制。這就是交互性差的原因，用戶得不到立即反饋，因此感覺 不同于桌面應用程序。

Ajax 基本上就是把 JavaScript 技術和 XMLHttpRequest 對象放在 Web 表單和服務器之間。當用戶填寫表單時，數 據發送給一些 JavaScript 代碼而不是 直接發送給服務器。相反，JavaScript 代碼捕獲表單數據并向服務器發送請求。同時用戶屏幕 上的表單也不會閃爍、消失或延遲。換句話說，JavaScript 代碼在幕后發送請求，用戶甚至不知道請求的發出。更好的是，請求是異步發送的 ，就是說 JavaScript 代碼（和用戶）不用等待服務器的響應。因此用戶可以繼續輸入數據、滾動屏幕和使用應用程序。

然后，服務器將數據返回 JavaScript 代碼（仍然在 Web 表單中），后者決定如何處理這些數據。它可以迅速更新表單數據，讓人感覺應 用程序是立即完成的，表單沒有提交或刷新而用戶得到了新數據。JavaScript 代碼甚至可以對收到的數據執行某種計算，再發送另一個請求， 完全不需要用戶干預！這就是 XMLHttpRequest 的強大之處。它可以根據需要自行與服務器進行交互，用戶甚至可以完全不知道 幕后發生的一切。結果就是類似于桌面應用程序的動態、快速響應、高交互性的體驗，但是背后又擁有互聯網的全部強大力量。

加入一些 JavaScript

得到 XMLHttpRequest 的句柄后，其他的 JavaScript 代碼就非常簡單了。事實上，我們將使用 JavaScript 代碼完成非常 基本的任務：

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

對于前兩點，需要非常熟悉 getElementById() 方法，如 清單 2 所示。

												

// 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];

										

這里沒有特別需要注意的地方，真是好極了！您應該認識到這里并沒有非常復雜的東西。只要掌握了 XMLHttpRequest，Ajax 應用程序的其他部分就是如 清單 2 所示的簡單 JavaScript 代碼了，混合有少量的 HTML。同時，還要用一點兒 DOM ，我們就來看看吧。

以 DOM 結束

最后還有 DOM，即文檔對象模型。可能對有些讀者來說 DOM 有點兒令人生畏，HTML 設計者很少使用它，即使 JavaScript 程序員也不大用 到它，除非要完成某項高端編程任務。大量使用 DOM 的是 復雜的 Java 和 C/C++ 程序，這可能就是 DOM 被認為難以學習的原因。

幸運的是，在 JavaScript 技術中使用 DOM 很容易，也非常直觀。現在，按照常規也許應該說明如何使用 DOM，或者至少要給出一些示例 代碼，但這樣做也可能誤導您。即使不理會 DOM，仍然能深入地探討 Ajax，這也是我準備采用的方法。以后的文章將再次討論 DOM，現在只要 知道可能需要 DOM 就可以了。當需要在 JavaScript 代碼和服務器之間傳遞 XML 和改變 HTML 表單的時候，我們再深入研究 DOM。沒有它也 能做一些有趣的工作，因此現在就把 DOM 放到一邊吧。

獲取 Request 對象

有了上面的基礎知識后，我們來看看一些具體的例子。XMLHttpRequest 是 Ajax 應用程序的核心，而且對很多讀者來說可能 還比較陌生，我們就從這里開始吧。從 清單 1 可以看出，創建和使用這個對象非常簡單，不是嗎？等一等。

還記得幾年前的那些討厭的瀏覽器戰爭嗎？沒有一樣東西在不同的瀏覽器上得到同樣的結果。不管您是否相信，這些戰爭仍然在繼續，雖然 規模較小。但令人奇怪的是，XMLHttpRequest 成了這場戰爭的犧牲品之一。因此獲得 XMLHttpRequest 對象可能 需要采用不同的方法。下面我將詳細地進行解釋。

使用 Microsoft 瀏覽器

Microsoft 瀏覽器 Internet Explorer 使用 MSXML 解析器處理 XML（可以通過 參考資料 進一步了解 MSXML ）。因此如果編寫的 Ajax 應用程序要和 Internet Explorer 打交道，那么必須用一種特殊的方式創建對象。

但并不是這么簡單。根據 Internet Explorer 中安裝的 JavaScript 技術版本不同，MSXML 實際上有兩種不同的版本，因此必須對這兩種 情況分別編寫代碼。請參閱 清單 3，其中的代碼在 Microsoft 瀏覽器上創建了一個 XMLHttpRequest。

												

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}

										

您對這些代碼可能還不完全理解，但沒有關系。當本系列文章結束的時候，您將對 JavaScript 編程、錯誤處理、條件編譯等有更深的了解 。現在只要牢牢記住其中的兩行代碼：

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

和

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");。

這兩行代碼基本上就是嘗試使用一個版本的 MSXML 創建對象，如果失敗則使用另一個版本創建該對象。不錯吧？如果都不成功，則將 xmlHttp 變量設為 false，告訴您的代碼出現了問題。如果出現這種情況，可能是因為安裝了非 Microsoft 瀏覽器，需要使用 不同的代碼。

處理 Mozilla 和非 Microsoft 瀏覽器

如果選擇的瀏覽器不是 Internet Explorer，或者為非 Microsoft 瀏覽器編寫代碼，就需要使用不同的代碼。事實上就是 清單 1 所示的一行簡單代碼：