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

　　五年前，如果不知道 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 應用程序所用到的基本技術：

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

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

　　XMLHttpRequest 對象

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

　　清單 1. 創建新的 XMLHttpRequest 對象

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

　　加入一些 JavaScript

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

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

　　對于前兩點，需要非常熟悉 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];

　　獲取 Request 對象

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

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

　　使用 Microsoft 瀏覽器

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

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

清單 3. 在 Microsoft 瀏覽器上創建 XMLHttpRequest 對象

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

　　結合起來

　　關鍵是要支持所有 瀏覽器。誰愿意編寫一個只能用于 InterNET Explorer 或者非 Microsoft 瀏覽器的應用程序呢？或者更糟，要編寫一個應用程序兩次？當然不！因此代碼要同時支持 InterNET Explorer 和非 Microsoft 瀏覽器。清單 4 顯示了這樣的代碼。

　　清單 4. 以支持多種瀏覽器的方式創建 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();
}

　　Ajax 世界中的請求/響應

　　現在我們介紹了 Ajax，對 XMLHttpRequest 對象以及如何創建它也有了基本的了解。如果閱讀得很仔細，您可能已經知道與服務器上的 Web 應用程序打交道的是 JavaScript 技術，而不是直接提交給那個應用程序的 HTML 表單。

　　還缺少什么呢？到底如何使用 XMLHttpRequest。因為這段代碼非常重要，您編寫的每個 Ajax 應用程序都要以某種形式使用它，先看看 Ajax 的基本請求/響應模型是什么樣吧。

　　發出請求

　　您已經有了一個嶄新的 XMLHttpRequest 對象，現在讓它干點活兒吧。首先需要一個 Web 頁面能夠調用的 JavaScript 方法（比如當用戶輸入文本或者從菜單中選擇一項時）。接下來就是在所有 Ajax 應用程序中基本都雷同的流程：

   1. 從 Web 表單中獲取需要的數據。
   2. 建立要連接的 URL。
   3. 打開到服務器的連接。
   4. 設置服務器在完成后要運行的函數。
   5. 發送請求。

　　清單 5 中的示例 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);
}

　　處理響應

　　現在要面對服務器的響應了。現在只要知道兩點：

    * 什么也不要做，直到 xmlHttp.readyState 屬性的值等于 4。
    * 服務器將把響應填充到 xmlHttp.responseText 屬性中。

　　其中的第一點，即就緒狀態，將在下一篇文章中詳細討論，您將進一步了解 HTTP 請求的階段，可能比您設想的還多。現在只要檢查一個特定的值（4）就可以了（下一期文章中還有更多的值要介紹）。第二點，使用 xmlHttp.responseText 屬性獲得服務器的響應，這很簡單。清單 6 中的示例方法可供服務器根據 清單 5 中發送的數據調用。

清單 6. 處理服務器響應

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

NET技術：掌握 Ajax(一): Ajax 入門簡介，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。