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í)尚，它是一種構(gòu)建網(wǎng)站的強(qiáng)大方法，而且不像學(xué)習(xí)一種全新的語(yǔ)言那樣困難。

　　但在詳細(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ù)器上 —— 毫不奇怪，要通過(guò) Web 瀏覽器訪問(wèn)這種應(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)連接），具有漂亮的用戶界面（通常和操作系統(tǒng)有關(guān)）和非凡的動(dòng)態(tài)性?？梢詥螕?、選擇、輸入、打開(kāi)菜單和子菜單、到處巡游，基本上不需要等待。

　　另一方面，Web 應(yīng)用程序是最新的潮流，它們提供了在桌面上不能實(shí)現(xiàn)的服務(wù)（比如 Amazon.com 和 eBay）。但是，伴隨著 Web 的強(qiáng)大而出現(xiàn)的是等待，等待服務(wù)器響應(yīng)，等待屏幕刷新，等待請(qǐng)求返回和生成新的頁(yè)面。

　　顯然這樣說(shuō)過(guò)于簡(jiǎn)略了，但基本的概念就是如此。您可能已經(jīng)猜到，Ajax 嘗試建立桌面應(yīng)用程序的功能和交互性，與不斷更新的 Web 應(yīng)用程序之間的橋梁?？梢允褂孟褡烂?a href=/pingce/yingyong/ target=_blank class=infotextkey>應(yīng)用程序中常見(jiàn)的動(dòng)態(tài)用戶界面和漂亮的控件，不過(guò)是在 Web 應(yīng)用程序中。
　　還等什么呢？我們來(lái)看看 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，用于動(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。

　　我們來(lái)進(jìn)一步分析這些技術(shù)的職責(zé)。以后的文章中我將深入討論這些技術(shù)，目前只要熟悉這些組件和技術(shù)就可以了。對(duì)這些代碼越熟悉，就越容易從對(duì)這些技術(shù)的零散了解轉(zhuǎn)變到真正把握這些技術(shù)（同時(shí)也真正打開(kāi)了 Web 應(yīng)用程序開(kāi)發(fā)的大門）。

　　XMLHttpRequest 對(duì)象

　　要了解的一個(gè)對(duì)象可能對(duì)您來(lái)說(shuō)也是最陌生的，即 XMLHttpRequest。這是一個(gè) JavaScript 對(duì)象，創(chuàng)建該對(duì)象很簡(jiǎn)單，如清單 1 所示。

　　清單 1. 創(chuàng)建新的 XMLHttpRequest 對(duì)象

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

　　加入一些 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];

　　獲取 Request 對(duì)象

　　有了上面的基礎(chǔ)知識(shí)后，我們來(lái)看看一些具體的例子。XMLHttpRequest 是 Ajax 應(yīng)用程序的核心，而且對(duì)很多讀者來(lái)說(shuō)可能還比較陌生，我們就從這里開(kāi)始吧。從 清單 1 可以看出，創(chuàng)建和使用這個(gè)對(duì)象非常簡(jiǎn)單，不是嗎？等一等。

　　還記得幾年前的那些討厭的瀏覽器戰(zhàn)爭(zhēng)嗎？沒(méi)有一樣?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（可以通過(guò) 參考資料 進(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ì)象

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

　　結(jié)合起來(lái)

　　關(guān)鍵是要支持所有 瀏覽器。誰(shuí)愿意編寫一個(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();
}

　　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 頁(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è)順序組織的：

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);
}

　　處理響應(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è)想的還多?，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.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

NET技術(shù)：掌握 Ajax(一): Ajax 入門簡(jiǎn)介，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。