AJAX 簡介及入門執行個體

對於一個像我一樣剛剛接觸Web開發且無多少實際項目經驗的新手而言，AJAX技術顯得複雜而又深奧。經過兩天的baidu、google，我對AJAX的基本原理有了一個大致的認識，在此總結一下。

1. 什麼是AJAX?
AJAX全稱是非同步JavaScript和XML，是Asynchronous JavaScript and XML的縮寫。AJAX技術用於建立互動式網頁應用的網站開發，至於何為非同步，後文會有解釋。

1.1 傳統型應用程式和Web應用程式
在詳細討論AJAX技術之前，需要Crowdsourced Security Testing道AJAX技術究竟是用來做什麼工作的。目前，編寫應用程式總共有兩種基本類型：

傳統型應用程式 (Desktop Application)
Web應用程式 (Web Application)
傳統型應用程式可以從互連網或者以CD方式獲得，需要運行在案頭電腦上，例如我們常見的一些PC軟體。Web應用程式與之不同，Web應用程式師運行在某處的Web伺服器上的，因此需要通過Web瀏覽器去訪問這樣的應用程式。

不過，比這些應用程式的代碼運行在何處更為重要的是，應用程式如何運轉以及如何與其進行互動。傳統型應用程式一般較快，並且擁有漂亮的使用者介面和非凡的動態性，可以單擊、選擇、開啟菜單和子功能表、到處巡遊，基本不需要等待；另一方面，Web應用程式（比如Amazon.com 和eBay）提供了傳統型程式不能實現的服務。然而，伴隨著Web的強大而出現的是等待，等待伺服器的響應，等待螢幕重新整理，等待請求返回和產生新的介面。

AJAX的出現，就是為了緩解Web應用中與案頭應用相比中的等待這一問題。

1.2 AJAX - 老技術,新面孔
AJAX技術其實不是什麼新技術，而是其他幾種已存在技術的整合。

AJAX應用程式使用到以下基本技術：

使用HTML和CSS來建立Web表單並表示網頁資訊;
使用JavaScript來操作DOM(Document Object Model)來進行動態顯示及互動;
使用XMLHttpRequest對象與Web伺服器進行非同步資料交換;
使用XML進行資料交換及相關操作；
使用JavaScript將所有東西綁定在一起。
我們來進一步分析這些技術的職責。目前我只要熟悉這些組件和技術就可以了。對這些代碼越熟悉，就越容易從對這些技術的零散瞭解轉變到真正把握這些技術（同時也真正開啟了 Web 應用程式開發的大門）。

XMLHttpRequest對象

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

清單 1. 建立新的 XMLHttpRequest 對象

複製代碼 代碼如下:<script language="javascript" type="text/javascript">
<!--
var xmlHttp = new XMLHttpRequest();
// -->
</script>

以後將進一步學習這個對象，現在要知道這是處理所有伺服器通訊的對象。繼續閱讀之前，先停下來想一想：通過 XMLHttpRequest 對象與伺服器進行對話的是 JavaScript 技術。這不是一般的應用程式流程，這恰恰是 Ajax 的強大功能的來源。
在一般的 Web 應用程式中，使用者填寫表單欄位並單擊提交按鈕。然後整個表單發送到伺服器，伺服器將它轉寄給處理表單的指令碼（通常是 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 所示。

清單 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];

這裡沒有特別需要注意的地方，真是好極了！您應該認識到這裡並沒有非常複雜的東西。只要掌握了 XMLHttpRequest，Ajax 應用程式的其他部分就是如 清單 2 所示的簡單 JavaScript 代碼了，混合有少量的 HTML。

2. AJAX的優缺點是什嗎？
2.1 AJAX的優點
使用AJAX最大的優點，就是能在不更新整個頁面的前提下維護資料。這使得Web應用程式能更為迅捷得對使用者請求進行反饋，提高了使用者體驗的同時，避免了在網路上發送那些沒有改變過的資訊。

傳統的Web應用允許使用者端填寫表單（form），當送出表單時就向Web伺服器發送一個請求。伺服器接收並處理傳來的表單，然後送回一個新的網頁，但這種做法浪費了很多頻寬，因為：在前後兩個處理後反饋的頁面匯總，大部分的HTML代碼往往是相同的。由於每次應用的溝通都需要向伺服器發送請求，應用的回應時間久依賴於伺服器的回應時間，這導致了使用者介面的回應比本機應用慢很多。

與此不同的是，AJAX應用可以僅向伺服器發送並取回必要的資料，它使用SOAP或其它一些基於XML的頁面服務介面（介面），並在用戶端採用JavaScript處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料大量減少（大約只有原來的5%），結果我們就能看到回應（伺服器回應）更快的應用（結果）。同時很多的處理工作可以在發出請求的用戶端機器上完成，所以Web伺服器的處理時間也減少了。

2.2 AJAX的缺點
對應於AJAX最主要的批評是：它可能破壞瀏覽器後退按鈕的正常行為。在動態更新頁面的情況下，使用者無法回到前一個頁面的狀態，這是因為瀏覽器僅能記下記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙：使用者通常都希望單擊後退按鈕，就能夠取消他們的前一次操作，但是在AJAX頁面中，可能無法這樣做。不過開發人員已想出了種種辦法來解決這個問題，當中大多數都是在使用者單擊後退按鈕訪問記錄時，通過建立或使用一個隱藏的IFRAME來重現頁面上的變更。（例如，當使用者在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜尋，然後將搜尋結果反映到AJAX元素上，以便將應用程式狀態恢複到當時的狀態。）

另一個相關的觀點認為，使用動態網頁面更新使得使用者難於將某個特定的狀態儲存到收藏夾中。該問題的解決方案也已出現，大部分都使用URL片斷標識符（通常被稱為錨點，即URL中#後面的部分）來保持跟蹤，允許使用者回到指定的某個應用程式狀態。（許多瀏覽器允許JavaScript動態更新錨點，這使得Ajax應用程式能夠在更新顯示內容的同時更新錨點。）這種解決方案也同時解決了許多關於不支援後退按鈕的爭論。

進行AJAX開發時，網路延遲——即使用者發出請求到伺服器發出響應之間的間隔——需要謹慎考慮。不給予使用者明確的回應、沒有恰當的預讀資料，或者對XMLHttpRequest的不恰當處理，都會使使用者感到延遲，這是使用者不想看到的，也是他們無法理解的。通常的解決方案是，使用一個可視化的組件來告訴使用者系統進行中後台操作並且正在讀取資料和內容。

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

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

使用 Microsoft 瀏覽器

Microsoft 瀏覽器 Internet Explorer 使用 MSXML 解析器處理 XML。因此如果編寫的AJAX應用程式要和 Internet Explorer 打交道，那麼必須用一種特殊的方式建立對象。

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

清單 3. 在 Microsoft 瀏覽器上建立 XMLHttpRequest 對象
複製代碼 代碼如下:var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}

您對這些代碼可能還不完全理解，但沒有關係，現在只要牢牢記住其中的兩行代碼：

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

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

處理 Mozilla 和非 Microsoft 瀏覽器

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

var xmlHttp = new XMLHttpRequest object;。

這行簡單得多的代碼在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支援 Ajax 的非 Microsoft 瀏覽器中，建立了 XMLHttpRequest 對象。

綜合起來跨瀏覽器的通用方法

關鍵是要支援所有瀏覽器。誰願意編寫一個只能用於 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();
}

現在先不管那些注釋掉的奇怪符號，如 @cc_on，這是特殊的 JavaScript 編譯器命令，將在下一期針對 XMLHttpRequest 的文章中詳細討論。這段代碼的核心分為三步：

建立一個變數 xmlHttp 來引用即將建立的 XMLHttpRequest 對象。
嘗試在 Microsoft 瀏覽器中建立該對象：
嘗試使用 Msxml2.XMLHTTP 對象建立它。
如果失敗，再嘗試 Microsoft.XMLHTTP 對象。
如果仍然沒有建立 xmlHttp，則以非 Microsoft 的方式建立該對象。
最後，xmlHttp 應該引用一個有效 XMLHttpRequest 對象，無論運行什麼樣的瀏覽器。

3.2 AJAX技術的用戶端請求/伺服器響應機制
現在我們介紹了AJAX，對 XMLHttpRequest 對象以及如何建立它也有了基本的瞭解。如果閱讀得很仔細，您可能已經知道與伺服器上的 Web 應用程式打交道的是 JavaScript 技術，而不是直接提交給那個應用程式的 HTML 表單。

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

發出請求

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

從 Web 表單中擷取需要的資料。
建立要串連的 URL。
開啟到伺服器的串連。
設定伺服器在完成後要啟動並執行函數。
發送請求。
清單 5 中的樣本 Ajax 方法就是按照這個順序組織的：

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

其中大部分代碼意義都很明確。開始的代碼使用基本 JavaScript 代碼擷取幾個表單欄位的值。然後設定一個 PHP 指令碼作為連結的目標。要注意指令碼 URL 的指定方式，city 和 state（來自表單）使用簡單的 GET 參數附加在 URL 之後。

然後開啟一個串連，這是您第一次看到使用 XMLHttpRequest。其中指定了串連方法（GET）和要串連的 URL。最後一個參數如果設為 true，那麼將請求一個非同步串連（這就是 Ajax 的由來）。如果使用 false，那麼代碼發出請求後將等待伺服器返回的響應。如果設為 true，當伺服器在幕後處理請求的時候使用者仍然可以使用表單（甚至調用其他 JavaScript 方法）。

xmlHttp（要記住，這是 XMLHttpRequest 對象執行個體）的 onreadystatechange 屬性可以告訴伺服器在運行完成後（可能要用五分鐘或者五個小時）做什麼。因為代碼沒有等待伺服器，必須讓伺服器知道怎麼做以便您能作出響應。在這個樣本中，如果伺服器處理完了請求，一個特殊的名為updatePage()的方法將被觸發。

最後，使用值 null 調用 send()。因為已經在請求 URL 中添加了要發送給伺服器的資料（city 和 state），所以請求中不需要發送任何資料。這樣就發出了請求，伺服器按照您的要求工作。

如果沒有發現任何新鮮的東西，您應該體會到這是多麼簡單明了！除了牢牢記住AJAX的非同步特性外，這些內容都相當簡單。應該感激AJAX使您能夠專心編寫漂亮的應用程式和介面，而不用擔心複雜的 HTTP 要求/響應代碼。

清單 5 中的代碼說明了 Ajax 的易用性。資料是簡單的文本，可以作為請求 URL 的一部分。用 GET 而不是更複雜的 POST 發送請求。沒有 XML 和要添加的內容標題部，請求體中沒有要發送的資料；換句話說，這就是 Ajax 的烏托邦。

不用擔心，隨著本系列文章的展開，事情會變得越來越複雜。您將看到如何發送 POST 請求、如何佈建要求頭部和內容類型、如何在訊息中編碼 XML、如何增加請求的安全性，可以做的工作還有很多！暫時先不用管那些痛點，掌握好基本的東西就行了，很快我們就會建立一整套的 Ajax 工具庫。

處理響應

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

什麼也不要做，直到 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;
}
}

這些代碼同樣既不難也不複雜。它等待伺服器調用，如果是就緒狀態，則使用伺服器返回的值（這裡是使用者輸入的城市和州的 ZIP 編碼）設定另一個表單欄位的值。於是包含 ZIP 編碼的 zipCode 欄位突然出現了，而使用者沒有按任何按鈕！這就是前面所說的傳統型應用程式的感覺。快速響應、動態感受等等，這些都只因為有了小小的一段 Ajax 代碼。

細心的讀者可能注意到 zipCode 是一個普通的文字欄位。一旦伺服器返回 ZIP 編碼，updatePage() 方法就用城市/州的 ZIP 編碼設定那個欄位的值，使用者就可以改寫該值。這樣做有兩個原因：保持例子簡單，說明有時候可能希望 使用者能夠修改伺服器返回的資料。要記住這兩點，它們對於好的使用者介面設計來說很重要。

3.3 [題外]如何串連Web表單
還有什麼呢？實際上沒有多少了。一個 JavaScript 方法捕捉使用者輸入表單的資訊並將其發送到伺服器，另一個 JavaScript 方法監聽和處理響應，並在響應返回時設定欄位的值。所有這些實際上都依賴於調用 第一個 JavaScript 方法，它啟動了整個過程。最明顯的辦法是在 HTML 表單中增加一個按鈕，但這是 2001 年的辦法，您不這樣認為嗎？還是像 清單 7 這樣利用 JavaScript 技術吧。

清單 7. 啟動一個 Ajax 過程 複製代碼 代碼如下:<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" />
<p>State: <input type="text" name="state" id="state" size="25"
onChange="callServer();" />
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" />
</form>

如果感覺這像是一段相當普通的代碼，那就對了，正是如此！當使用者在 city 或 state 欄位中輸入新的值時，callServer() 方法就被觸發，於是 Ajax 開始運行了。有點兒明白怎麼回事了吧？好，就是如此！

4. 開發AJAX應用面臨的問題是什麼?如何解決的?
對程式員而言，開發Ajax應用最頭痛的問題莫過於以下幾點：

Ajax在本質上是一個瀏覽器端的技術，首先面臨無可避免的第一個問題即是瀏覽器的相容性問題。各家瀏覽器對於JavaScript／DOM／CSS的支援總有部分不太相同或是有Bug，甚至同一瀏覽器的各個版本間對於JavaScript／DOM／CSS的支援也有可能部分不一樣。這導致程式員在寫Ajax應用時花大部分的時間在調試瀏覽器的相容性而非在應用程式本身。
Ajax技術之主要目的在於局部交換用戶端及伺服器之間的資料。如同傳統之主從架構，無可避免的會有部分的商務邏輯會實現在用戶端，或部分在用戶端部分在伺服器。由於商務邏輯可能分散在用戶端及伺服器，且以不同之程式語言實現，這導致Ajax應用程式極難維護。如有使用者介面或商務邏輯之更動需求，再加上前一個JavaScript/DOM/CSS之相容性問題，Ajax應用往往變成程式員的夢魘。針對商務邏輯分散的問題，Ajax開發架構大致可分為兩類：
將商務邏輯及表現層放在瀏覽器，資料層放在伺服器：因為所有的程式以JavaScript執行在用戶端，只有需要資料時才向伺服器要求服務，此法又稱為胖用戶端（fat client）架構。伺服器在此架構下通常僅用於提供及儲存資料。此法的好處在於程式員可以充分利用JavaScript搭配商務邏輯來做出特殊的使用者介面，以符合終端使用者的要求。但是問題也不少，主因在第一，JavaScript語言本身之能力可能不足以處理複雜的商務邏輯。第二，JavaScript的執行效能一向不好。第三，JavaScript訪問伺服器資料，仍需適當的伺服器端程式之配合。第四，瀏覽器安全色性的問題又出現。有些Ajax開發架構如DWR企圖以自動產生JavaScript之方式來避免相容的問題，並開立通道使得JavaScript可以直接調用伺服器端的Java程式來簡化資料的訪問。但是前述第一及第二兩個問題仍然存在，程式員必須費相當的力氣才能達到應用程式之規格要求，或可能根本無法達到要求。
將表現層、商務邏輯、及資料層放在伺服器，瀏覽器僅有使用者介面引擎（User Interface engine）；此法又稱為瘦用戶端（thin client）架構，或中心伺服器（server-centric）架構。瀏覽器的使用者介面引擎僅用於反映伺服器的表現層以及傳達使用者的輸入回到伺服器的表現層。由瀏覽器所觸發之事件亦送回伺服器處理，根據商務邏輯來更新表現層，然後反映回瀏覽器。因為所有應用程式完全在伺服器執行，資料及表現層皆可直接存取，程式員只需使用伺服器端相對較成熟之程式語言（如Java語言）即可，不需再學習JavaScript/DOM/CSS，在開發應用程式時相對容易。缺點在於使用者介面引擎以及表現層通常以標準組件的形式存在，如需要特殊組件（使用者介面）時，往往須待原架構之開發人員提供，緩不濟急。如開源碼Ajax開發架構ZK目前支援XUL及XHTML組件，尚無XAML之支援。
Ajax是以非同步方式向伺服器提交需求。對伺服器而言，其與傳統的提交表單需求並無不同，而且由於是以非同步之方式提交，如果同時有多個Ajax需求及表單提交需求，將無法保證哪一個需求先獲得伺服器的響應。這會造成應用程式典型的多進程（process）或多線程（thread）的競爭（racing）問題。程式員因此必須自行處理或在JavaScript裡面動手腳以避免這類競爭問題的發生（如Ajax需求未響應之前，先disable送出按鈕），這又不必要的增加了程式員的負擔。目前已知有自動處理此問題之開發架構似乎只有ZK。