多數 Web 應用程序都使用請求/響應模型從服務器上獲得完整的 HTML 頁面。常常是點擊一個按鈕，等待服務器響應，再點擊另一個按鈕，然後再等待，這樣一個反覆的過程。有了 Ajax 和 XMLHttpRequest 對象，就可以使用不必讓用戶等待服務器響應的請求/響應模型了。本文中，Brett McLaughlin 介紹瞭如何創建能夠適應不同瀏覽器的 XMLHttpRequest 實例，建立和發送請求，並響應服務器。
我們介紹了 Ajax 應用程序，考察了推動 Ajax 應用程序的基本概念。其中的核心是很多您可能已經瞭解的技術：JavaScript、HTML 和 XHTML、一點動態 HTML 以及 DOM（文檔對象模型）。本文將放大其中的一點，把目光放到具體的 Ajax 細節上。
本文中，您將開始接觸最基本和基礎性的有關 Ajax 的全部對象和編程方法：XMLHttpRequest 對象。該對象實際上僅僅是一個跨越所有 Ajax 應用程序的公共線程，您可能已經預料到，只有徹底理解該對象才能充分發揮編程的潛力。事實上，有時您會發現，要正確地使用 XMLHttpRequest，顯然不能 使用 XMLHttpRequest。這到底是怎麼回事呢？
在深入研究代碼之前首先看看最近的觀點 —— 一定要十分清楚 Web 2.0 這個概念。聽到 Web 2.0 這個詞的時候，應該首先問一問 “Web 1.0 是什麼？” 雖然很少聽人提到 Web 1.0，實際上它指的就是具有完全不同的請求和響應模型的傳統 Web。比如，到 Amazon.com 網站上點擊一個按鈕或者輸入搜索項。就會對服務器發送一個請求，然後響應再返回到瀏覽器。該請求不僅僅是圖書和書目列表，而是另一個完整的 HTML 頁面。因此當 Web 瀏覽器用新的 HTML 頁面重繪時，可能會看到閃爍或抖動。事實上，通過看到的每個新頁面可以清晰地看到請求和響應。
Web 2.0（在很大程度上）消除了這種看得見的往復交互。比如訪問 Google Maps 或 Flickr 這樣的站點（到這些支持 Web 2.0 和 Ajax 站點的鏈接請參閱 參考資料）。比如在 Google Maps 上，您可以拖動地圖，放大和縮小，只有很少的重繪操作。當然這裏仍然有請求和響應，只不過都藏到了幕後。作爲用戶，體驗更加舒適，感覺很像桌面應用程序。這種新的感受和範型就是當有人提到 Web 2.0 時您所體會到的。
需要關心的是如何使這些新的交互成爲可能。顯然，仍然需要發出請求和接收響應，但正是針對每次請求/響應交互的 HTML 重繪造成了緩慢、笨拙的 Web 交互的感受。因此很清楚，我們需要一種方法使發送的請求和接收的響應只 包含需要的數據而不是整個 HTML 頁面。惟一需要獲得整個新 HTML 頁面的時候就是希望用戶看到 新頁面的時候。
但多數交互都是在已有頁面上增加細節、修改主體文本或者覆蓋原有數據。這些情況下，Ajax 和 Web 2.0 方法允許在不 更新整個 HTML 頁面的情況下發送和接收數據。對於那些經常上網的人，這種能力可以讓您的應用程序感覺更快、響應更及時，讓他們不時地光顧您的網站。
要真正實現這種絢麗的奇蹟，必須非常熟悉一個 JavaScript 對象，即 XMLHttpRequest。這個小小的對象實際上已經在幾種瀏覽器中存在一段時間了，它是本專欄今後幾個月中要介紹的 Web 2.0、Ajax 和大部分其他內容的核心。爲了讓您快速地大體瞭解它，下面給出將要用於該對象的很少的幾個 方法和屬性。
open()：建立到服務器的新請求。send()：向服務器發送請求。abort()：退出當前請求。readyState：提供當前 HTML 的就緒狀態。responseText：服務器返回的請求響應文本。
如果不瞭解這些（或者其中的任何 一個），您也不用擔心，後面幾篇文章中我們將介紹每個方法和屬性。現在應該 瞭解的是，明確用 XMLHttpRequest 做什麼。要注意這些方法和屬性都與發送請求及處理響應有關。事實上，如果看到 XMLHttpRequest 的所有方法和屬性，就會發現它們都 與非常簡單的請求/響應模型有關。顯然，我們不會遇到特別新的 GUI 對象或者創建用戶交互的某種超極神祕的方法，我們將使用非常簡單的請求和非常簡單的響應。聽起來似乎沒有多少吸引力，但是用好該對象可以徹底改變您的應用程序。
首先需要創建一個新變量並賦給它一個 XMLHttpRequest 對象實例。這在 JavaScript 中很簡單，只要對該對象名使用 new 關鍵字即可，如 清單 1 所示。
清單 1. 創建新的 XMLHttpRequest 對象
<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>
不難吧？記住，JavaScript 不要求指定變量類型，因此不需要像 清單 2 那樣做（在 Java 語言中可能需要這樣）。
清單 2. 創建 XMLHttpRequest 的 Java 僞代碼
XMLHttpRequest request = new XMLHttpRequest(); |
因此在 JavaScript 中用 var 創建一個變量，給它一個名字（如 “request”），然後賦給它一個新的 XMLHttpRequest 實例。此後就可以在函數中使用該對象了。
在實際上各種事情都可能出錯，而上面的代碼沒有提供任何錯誤處理。較好的辦法是創建該對象，並在出現問題時優雅地退出。比如，任何較早的瀏覽器（不論您是否相信，仍然有人在使用老版本的 Netscape Navigator）都不支持 XMLHttpRequest，您需要讓這些用戶知道有些地方出了問題。清單 3 說明如何創建該對象，以便在出現問題的時候發出 JavaScript 警告。
清單 3. 創建具有錯誤處理能力的 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>
一定要理解這些步驟：
- 創建一個新變量
request並賦值 false。後面將使用 false 作爲判定條件，它表示還沒有創建XMLHttpRequest對象。 - 增加 try/catch 塊：
- 嘗試創建
XMLHttpRequest對象。 - 如果失敗（
catch (failed)）則保證request的值仍然爲 false。
- 嘗試創建
- 檢查
request是否仍爲 false（如果一切正常就不會是 false）。 - 如果出現問題（
request是 false）則使用 JavaScript 警告通知用戶出現了問題。
代碼非常簡單，對大多數 JavaScript 和 Web 開發人員來說，真正理解它要比讀寫代碼花更長的時間。現在已經得到了一段帶有錯誤檢查的 XMLHttpRequest 對象創建代碼，還可以告訴您哪兒出了問題。
看起來似乎一切良好，至少在用 Internet Explorer 試驗這些代碼之前是這樣的。如果這樣試驗的話，就會看到 圖 1 所示的糟糕情形。
圖 1. Internet Explorer 報告錯誤
 |
|
顯然有什麼地方不對勁，而 Internet Explorer 很難說是一種過時的瀏覽器，因爲全世界有 70% 在使用 Internet Explorer。換句話說，如果不支持 Microsoft 和 Internet Explorer 就不會受到 Web 世界的歡迎！因此我們需要採用不同的方法處理 Microsoft 瀏覽器。
經驗證發現 Microsoft 支持 Ajax，但是其 XMLHttpRequest 版本有不同的稱呼。事實上，它將其稱爲幾種 不同的東西。如果使用較新版本的 Internet Explorer，則需要使用對象 Msxml2.XMLHTTP，而較老版本的 Internet Explorer 則使用 Microsoft.XMLHTTP。我們需要支持這兩種對象類型（同時還要支持非 Microsoft 瀏覽器）。請看看 清單 4，它在前述代碼的基礎上增加了對 Microsoft 的支持。
清單 4. 增加對 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>
很容易被這些花括號迷住了眼睛，因此下面分別介紹每一步：
- 創建一個新變量
request並賦值 false。使用 false 作爲判斷條件，它表示還沒有創建XMLHttpRequest對象。 - 增加 try/catch 塊：
- 嘗試創建
XMLHttpRequest對象。 - 如果失敗（
catch (trymicrosoft)）：- 嘗試使用較新版本的 Microsoft 瀏覽器創建 Microsoft 兼容的對象（
Msxml2.XMLHTTP）。 - 如果失敗（
catch (othermicrosoft)）嘗試使用較老版本的 Microsoft 瀏覽器創建 Microsoft 兼容的對象（Microsoft.XMLHTTP）。
- 嘗試使用較新版本的 Microsoft 瀏覽器創建 Microsoft 兼容的對象（
- 如果失敗（
catch (failed)）則保證request的值仍然爲 false。
- 嘗試創建
- 檢查
request是否仍然爲 false（如果一切順利就不會是 false）。 - 如果出現問題（
request是 false）則使用 JavaScript 警告通知用戶出現了問題。
這樣修改代碼之後再使用 Internet Explorer 試驗，就應該看到已經創建的表單（沒有錯誤消息）。我實驗的結果如 圖 2 所示。
圖 2. Internet Explorer 正常工作
再看一看清單 1、3 和 4，注意，所有這些代碼都直接嵌套在 script 標記中。像這種不放到方法或函數體中的 JavaScript 代碼稱爲靜態 JavaScript。就是說代碼是在頁面顯示給用戶之前的某個時候運行。（雖然根據規範不能完全精確地 知道這些代碼何時運行對瀏覽器有什麼影響，但是可以保證這些代碼在用戶能夠與頁面交互之前運行。）這也是多數 Ajax 程序員創建 XMLHttpRequest 對象的一般方式。
就是說，也可以像 清單 5 那樣將這些代碼放在一個方法中。
清單 5. 將 XMLHttpRequest 創建代碼移動到方法中
<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>
如果按照這種方式編寫代碼，那麼在處理 Ajax 之前需要調用該方法。因此還需要 清單 6 這樣的代碼。
清單 6. 使用 XMLHttpRequest 的創建方法
<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>
此代碼惟一的問題是推遲了錯誤通知，這也是多數 Ajax 程序員不採用這一方法的原因。假設一個複雜的表單有 10 或 15 個字段、選擇框等，當用戶在第 14 個字段（按照表單順序從上到下）輸入文本時要激活某些 Ajax 代碼。這時候運行 getCustomerInfo() 嘗試創建一個 XMLHttpRequest 對象，但（對於本例來說）失敗了。然後向用戶顯示一條警告，明確地告訴他們不能使用該應用程序。但用戶已經花費了很多時間在表單中輸入數據！這是非常令人討厭的，而討厭顯然不會吸引用戶再次訪問您的網站。
如果使用靜態 JavaScript，用戶在點擊頁面的時候很快就會看到錯誤信息。這樣也很煩人，是不是？可能令用戶錯誤地認爲您的 Web 應用程序不能在他的瀏覽器上運行。不過，當然要比他們花費了 10 分鐘輸入信息之後再顯示同樣的錯誤要好。因此，我建議編寫靜態的代碼，讓用戶儘可能早地發現問題。
文章出自： http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code4