Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫.
下面是 Ajax 應用程序所用到的基本技術：
• HTML 用於建立 Web 表單並確定應用程序其他部分使用的字段。
• JavaScript 代碼是運行 Ajax 應用程序的核心代碼，幫助改進與服務器應用程序的通信。
• DHTML 或 Dynamic HTML，用於動態更新表單。我們將使用 div、span 和其他動態 HTML 元素來標記 HTML。
• 文檔對象模型 DOM 用於（通過 JavaScript 代碼）處理 HTML 結構和（某些情況下）服務器返回的 XML。
從上面可以看出,Ajax不是什么新的技術,而是幾個老的技術通過新的方法結合起來,從而實現了新的效果!很多事物都是多元化的,可以說Ajax是一個新技術，也可以說Ajax是一個新的思路，一個新的架構！
Ajax的基本工作原理及流程：
在一般的 Web 應用程序中，用戶填寫表單字段並單擊 Submit 按鈕。然后整個表單發送到服務器，服務器將它轉發給處理表單的腳本（通常是 PHP 或 Java，也可能是 CGI 進程或者類似的東西），腳本執行完成后再發送回全新的頁面。該頁面可能是帶有已經填充某些數據的新表單的 HTML，也可能是確認頁面，或者是具有根據原來表單中輸入數據選擇的某些選項的頁面。當然，在服務器上的腳本或程序處理和返回新表單時用戶必須等待。屏幕變成一片空白，等到服務器返回數據后再重新繪制。這就是交互性差的原因，用戶得不到立即反饋，因此感覺不同於桌面應用程序。
Ajax 基本上就是把 JavaScript 技術和 XMLHttpRequest 對象放在 Web 表單和服務器之間。當用戶填寫表單時，數據發送給一些 JavaScript 代碼而不是 直接發送給服務器。相反，JavaScript 代碼捕獲表單數據並向服務器發送請求。同時用戶屏幕上的表單也不會閃爍、消失或延遲。換句話說，JavaScript 代碼在幕后發送請求，用戶甚至不知道請求的發出。更好的是，請求是異步發送的，就是說 JavaScript 代碼（和用戶）不用等待服務器的響應。因此用戶可以繼續輸入數據、滾動屏幕和使用應用程序。
然后，服務器將數據返回 JavaScript 代碼（仍然在 Web 表單中），后者決定如何處理這些數據。它可以迅速更新表單數據，讓人感覺應用程序是立即完成的，表單沒有提交或刷新而用戶得到了新數據。JavaScript 代碼甚至可以對收到的數據執行某種計算，再發送另一個請求，完全不需要用戶干預！這就是 XMLHttpRequest 的強大之處。它可以根據需要自行與服務器進行交互，用戶甚至可以完全不知道幕后發生的一切。結果就是類似於桌面應用程序的動態、快速響應、高交互性的體驗，但是背后又擁有互聯網的全部強大力量。
XMLHttpRequest 對象：
open()：建立到服務器的新請求。
send()：向服務器發送請求.
abort()：退出當前請求。
readyState：提供當前 HTML 的就緒狀態。
responseText：服務器返回的請求響應文本。
由於前兩年的瀏覽器大戰，使得各種瀏覽器獲得 XMLHttpRequest 對象采用的方法有所不同。
支持多種瀏覽器的方式創建 XMLHttpRequest 對象
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
這段代碼的核心分為三步：
1. 建立一個變量 xmlHttp 來引用即將創建的 XMLHttpRequest 對象。
2. 嘗試在 Microsoft 瀏覽器中創建該對象：
嘗試使用 Msxml2.XMLHTTP 對象創建它。
如果失敗，再嘗試 Microsoft.XMLHTTP 對象。
3. 如果仍然沒有建立 xmlHttp，則以非 Microsoft 的方式創建該對象。
最后，xmlHttp 應該引用一個有效的 XMLHttpRequest 對象，無論運行什么樣的瀏覽器。
Ajax中的請求/響應
發出請求：Ajax 應用程序中基本相同的流程：
1. 從 Web 表單中獲取需要的數據。
2. 建立要連接的 URL。
3. 打開到服務器的連接。
4. 設置服務器在完成后要運行的函數。
5. 發送請求。
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.aspx?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);
}
處理響應：
readyState可能返回的值：
0：請求未初始化（還沒有調用 open()）。
1：請求已經建立，但是還沒有發送（還沒有調用 send()）。
2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。
3：請求在處理中；通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成。
4：響應已完成；您可以獲取並使用服務器的響應了。
必須知道兩點：
1.什么也不要做，直到 xmlHttp.readyState 屬性的值等於 4。
2.服務器將把響應填充到 xmlHttp.responseText 屬性中。
響應函數：
function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
開始的代碼使用基本 JavaScript 代碼獲取幾個表單字段的值。然后設置一個 asp 腳本作為鏈接的目標。要注意腳本 URL 的指定方式，city 和 state（來自表單）使用簡單的 GET 參數附加在 URL 之后。
然后打開一個連接，這是您第一次看到使用 XMLHttpRequest。其中指定了連接方法（GET）和要連接的 URL。最后一個參數如果設為 true，那么將請求一個異步連接（這就是 Ajax 的由來）。如果使用 false，那么代碼發出請求后將等待服務器返回的響應。如果設為 true，當服務器在后台處理請求的時候用戶仍然可以使用表單（甚至調用其他 JavaScript 方法）。
xmlHttp（要記住，這是 XMLHttpRequest 對象實例）的 onreadystatechange 屬性可以告訴服務器在運行完成 后（可能要用五分鍾或者五個小時）做什么。因為代碼沒有等待服務器，必須讓服務器知道怎么做以便您能作出響應。在這個示例中，如果服務器處理完了請求，一個特殊的名為 updatePage() 的方法將被觸發。
最后，使用值 null 調用 send()。因為已經在請求 URL 中添加了要發送給服務器的數據（city 和 state），所以請求中不需要發送任何數據。這樣就發出了請求，服務器按照您的要求工作。
簡單總結的Ajax的工作流程：
javascript獲得要向服務器段傳遞的參數或變量，然后利用創建的XMLHttpRequest 對象發送個服務器段，如果服務器端接受數據並返回數據，則保存在responseText 屬性中，最后通過javascript修改DOM，從而實現在客戶端無刷新的修改數據。
參考資料：http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html
此文很基礎，但是很底層。
1. 簡單 HTML 頁面
<html>
<head>
<title>Trees, trees, everywhere</title>
</head>
<body>
<h1>Trees, trees, everywhere</h1>
<p>Welcome to a <em>really</em> boring page.</p>
<div>
Come again soon.
<img src="come-again.gif" />
</div>
</body>
</html>
1 的樹視圖
對象的值
既然了解了一些基本的術語，現在應該關注一下其中包含元素名稱和文本的小矩形了（圖 1）。每個矩形是一個對象；瀏覽器在其中解決一些文本問題。通過使用對象來表示 HTML 文檔的每一部分，可以很容易地更改組織、應用樣式、允許 JavaScript 訪問文檔，等等。
對象類型和屬性
標記的每個可能類型都有自己的對象類型。例如，HTML 中的元素用 Element 對象類型表示。文檔中的文本用 Text 類型表示，屬性用 Attribute 類型表示，以此類推。
所以 Web 瀏覽器不僅可以使用對象模型來表示文檔（從而避免了處理靜態文本），還可以用對象類型立即辨別出某事物是什么。HTML 文檔被解析並轉換為對象集合，如 圖 1 所示，然后尖括號和轉義序列（例如，使用 < 表示 <，使用 > 表示 >）等事物不再是問題了。這就使得瀏覽器的工作（至少在解析輸入 HTML 之后）變得更容易。弄清某事物究竟是元素還是屬性並確定如何處理該類型的對象，這些操作都十分簡單了。
通過使用對象，Web 瀏覽器可以更改這些對象的屬性。例如，每個元素對象具有一個父元素和一系列子元素。所以添加新的子元素或文本只需要向元素的子元素列表中添加一個新的子元素。這些對象還具有 style 屬性，所以快速更改元素或文本段的樣式非常簡單。例如，要使用 JavaScript 更改 div 的高度，如下所示：
someDiv.style.height = "300px";
換句話說，Web 瀏覽器使用對象屬性可以非常容易地更改樹的外觀和結構。將之比作瀏覽器在內部將頁面表示為文本時必須進行的復雜事情，每次更改屬性或結構都需要瀏覽器重新編寫靜態文件、重新解析並在屏幕上重新顯示。有了對象，所有這一切都解決了。
DOM 簡介
到目前為止，您已經知道瀏覽器將 Web 頁面轉換為對象表示，可能您甚至會猜想，對象表示是 DOM 樹。DOM 表示 Document Object Model，是一個規范，可從 World Wide Web Consortium (W3C) 獲得（您可以參閱 參考資料 中的一些 DOM 相關鏈接）。
但更重要的是，DOM 定義了對象的類型和屬性，從而允許瀏覽器表示標記。（本系列下一篇文章將專門講述在 JavaScript 和 Ajax 代碼中使用 DOM 的規范。）
文檔對象
首先，需要訪問對象模型本身。這非常容易；要在運行於 Web 頁面上的任何 JavaScript 代碼中使用內置 document 變量，可以編寫如下代碼：
var domTree = document;
當然，該代碼本身沒什么用，但它演示了每個 Web 瀏覽器使得 document 對象可用於 JavaScript 代碼，並演示了對象表示標記的完整樹（圖 1）。
每項都是一個節點
顯然，document 對象很重要，但這只是開始。在進一步深入之前，需要學習另一個術語：節點。您已經知道標記的每個部分都由一個對象表示，但它不只是一個任意的對象，它是特定類型的對象，一個 DOM 節點。更特定的類型，比如文本、元素和屬性，都繼承自這個基本的節點類型。所以可以有文本節點、元素節點和屬性節點。
如果已經有很多 JavaScript 編程經驗，那您可能已經在使用 DOM 代碼了。如果到目前為止您一直在跟蹤本 Ajax 系列，那么現在您一定 使用 DOM 代碼有一段時間了。例如，代碼行 var number = document.getElementById("phone").value; 使用 DOM 查找特定元素，然后檢索該元素的值（在本例中是一個表單字段）。所以即使您沒有意識到這一點，但您每次將 document 鍵入 JavaScript 代碼時都會使用 DOM。
詳細解釋已經學過的術語，DOM 樹是對象的樹，但更具體地說，它是節點 對象的樹。在 Ajax 應用程序中或任何其他 JavaScript 中，可以使用這些節點產生下列效果，比如移除元素及其內容，突出顯示特定文本，或添加新圖像元素。因為都發生在客戶端（運行在 Web 瀏覽器中的代碼），所以這些效果立即發生，而不與服務器通信。最終結果通常是應用程序感覺起來響應更快，因為當請求轉向服務器時以及解釋響應時，Web 頁面上的內容更改不會出現長時間的停頓。
在多數編程語言中，需要學習每種節點類型的實際對象名稱，學習可用的屬性，並弄清楚類型和強制轉換；但在 JavaScript 中這都不是必需的。您可以只創建一個變量，並為它分配您希望的對象（正如您已經看到的）：
var domTree = document;
var phoneNumberElement = document.getElementById("phone");
var phoneNumber = phoneNumberElement.value;
沒有類型，JavaScript 根據需要創建變量並為其分配正確的類型。這也是簡單的JS獲得DOM元素。
1 Ajax學習---在請求和響應中使用 XML(1)
XML 是編程中最常用的數據格式之一，對於異步應用程序中的服務器響應能夠帶來切實的好處。在Ajax中也不例外。
Ajax 應用程序就表現在其核心對象所選的名稱 —— XMLHttpRequest，這個名稱不是很好，因為它並沒有反映技術上的實際情況。換句話說，多數人之所以認為 XML 是 Ajax 的核心組成部分，僅僅是因為他們想當然地以為 XMLHttpRequest 對象在任何時候都使用 XML。但實情並非如此，本文第一部分給出了原因。實際上，您將看到在多數 Ajax 應用程序中 XML 很少出現。 XML 確實有應用在 Ajax 中，而且 XMLHttpRequest 也支持這種用法。也確實沒有什么能阻擋您向服務器發送 XML。
XML在Ajax中的使用
在異步應用程序中 XML 有兩種基本的用法：
1.以 XML 格式從網頁向服務器發送請求
2.以 XML 格式在網頁中從服務器接收請求
其中第一種用法，即用 XML 發送請求，需要將請求的格式設置為 XML，可以使用 API 來完成，也可以與文本連成字符串，然后將結果發送到服務器。按照這種思路，主要的任務就是通過既符合 XML 規則又能被服務器理解的方式構造請求。因此這里的關鍵實際上是 XML 格式，得到需要發送的數據之后，只需要用 XML 語法將其包裝起來。本文后面討論 XML 在 Ajax 應用程序中的這種用法。
第二種用法，即用 XML 接收請求，需要從服務器上接收響應，然后從 XML 提取數據（同樣，可以用 API 或者采用蠻力方法）。這種情況下，關鍵在於來自服務器的數據，而您恰好需要從 XML 中提取這些數據以便使用。
客戶機到服務器的 XML
在您編寫的 90% Web 應用程序中，最終都會使用名/值對發送到服務器。比方說，如果用戶在網頁表單中輸入姓名和地址，可能希望數據采用下列形式：
firstName=Larry
lastName=Gullahorn
street=9018 Heatherhorn Drive
city=Rowlett
state=Texas
zipCode=75080
清單 1. 使用普通文本發送名/值對
function callServer() {
// Get the city and state from the Web form
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var street = document.getElementById("street").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zipCode = document.getElementById("zipCode").value;
// Build the URL to connect to
var url = "/scripts/saveAddress.php?firstName=" + escape(firstName) +
"&lastName=" + escape(lastName) + "&street=" + escape(street) +
"&city=" + escape(city) + "&state=" + escape(state) +
"&zipCode=" + escape(zipCode);
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Set up a function for the server to run when it's done
xmlHttp.onreadystatechange = confirmUpdate;
// Send the request
xmlHttp.send(null);
}
將名/值對轉化成 XML
如果希望這樣使用 XML 作為數據格式，首先要做的是找到一種基本 XML 格式來存儲數據。顯然，名/值對可以全部轉化成 XML 元素，以其中的名稱作為元素名，值作為元素的內容：
<firstName>Larry</firstName>
<lastName>Gullahorn</lastName>
<street>9018 Heatherhorn Drive</street>
<city>Rowlett</city>
<state>Texas</state>
<zipCode>75080</zipCode>
當然，XML 要求有一個根元素；如果使用文檔片段（XML 文檔的一部分）的話則需要一個封閉元素。因此可能需要將上述 XML 轉化成下面的形式：
<address>
<firstName>Larry</firstName>
<lastName>Gullahorn</lastName>
<street>9018 Heatherhorn Drive</street>
<city>Rowlett</city>
<state>Texas</state>
<zipCode>75080</zipCode>
</address>
現在基本上可以准備在 Web 客戶機上創建這種結構並發送到服務器了。
通信：
在網絡上傳輸 XML 之前，需要保證服務器以及發送數據的腳本能夠接受 XML。現在對很多人來說這么強調似乎有點多余，認為這是理所當然的，但是很多新手往往認為只要通過網絡發送 XML，就能夠被正確地接收和解釋。實際上，需要兩個步驟來保證發送的 XML 的數據能夠被正確地接收：
1.保證向其發送 XML 的腳本能夠接受 XML 數據格式。
2.保證腳本認可發送數據所采用的特定 XML 格式和結構。
這兩方面都可能要求您進行人際溝通，必須明確地告知對方！嚴格地說，如果確實需要發送 XML 數據，多數腳本作者都會幫助您，因此尋找能夠接受 XML 的腳本應該不難。但是，仍然需要保證格式是腳本所希望的格式。比方說，假設服務器接受下列格式的數據：
<profile>
<firstName>Larry</firstName>
<lastName>Gullahorn</lastName>
<street>9018 Heatherhorn Drive</street>
<city>Rowlett</city>
<state>Texas</state>
<zip-code>75080</zip-code>
</profile>
看起來和上面的 XML 類似，只有兩點不同：
1. 來自客戶機的 XML 封裝在 address 元素，但是服務器要求數據封裝在 profile 元素中。
2. 來自客戶機的 XML 使用了 zipCode 元素，而服務器希望郵政編碼放在 zip-code 元素中。
從大的層面上來說，這些小問題僅僅是服務器接收和處理數據的區別，但是服務器會徹底失敗，在網頁上（可能向其用戶）顯示意義含糊的錯誤消息。因此必須明確服務器的期望的格式，並把要發送的數據塞進那種格式。然后，只有在這時才會涉及到從客戶機向服務器發送 XML 數據的真正的技術問題。
向服務器發送 XML
當向服務器發送 XML 的時候，更多的代碼用於獲取數據和包裝成 XML，而不是真正的傳輸數據。實際上，只要准備好發送到服務器的 XML 字符串，發送工作就和普通文本一樣。用 XML 發送名/值對：
function callServer() {
// Get the city and state from the Web form
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var street = document.getElementById("street").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zipCode = document.getElementById("zipCode").value;
var xmlString = "<profile>" +
" <firstName>" + escape(firstName) + "</firstName>" +
" <lastName>" + escape(lastName) + "</lastName>" +
" <street>" + escape(street) + "</street>" +
" <city>" + escape(city) + "</city>" +
" <state>" + escape(state) + "</state>" +
" <zip-code>" + escape(zipCode) + "</zip-code>" +
"</profile>";
// Build the URL to connect to
var url = "/scripts/saveAddress.aspx";
// Open a connection to the server
xmlHttp.open("POST", url, true);
// Tell the server you're sending it XML
xmlHttp.setRequestHeader("Content-Type", "text/xml");
// Set up a function for the server to run when it's done
xmlHttp.onreadystatechange = confirmUpdate;
// Send the request
xmlHttp.send(xmlString);
}
大部分代碼都很簡單，只有少數地方值得提一下。首先，請求中的數據必須手工格式化為 XML。閱讀了三篇關於使用文檔對象類型的文章之后，再來討論它是不是很簡單了？雖然不禁止在 JavaScript 中使用 DOM 創建 XML 文檔，但是在通過 GET 或 POST 請求發送到網絡上之前必須將 DOM 對象轉化成文本。因此使用常規字符串操作來格式化數據更簡單一些。當然，這樣很容易出現錯誤和誤輸入，因此在編寫處理 XML 的代碼時必須非常小心。
建立 XML 之后，按照和發送文本基本相同的方式打開連接。對於 XML 最好使用 POST 請求，因為有些瀏覽器限制了 GET 請求字符串的長度，而 XML 可能很長，可以看到代碼段中把 GET 改成了 POST 方法。此外，XML 通過 send() 方法發送，而不是附加在請求 URL 最后的參數。這些都是非常細微的區別，很容易修改。
但是必須編寫一行新的代碼：
xmlHttp.setRequestHeader("Content-Type", "text/xml");
看起來很難理解，它只不過是告訴服務器要發送的是 XML 而不是一般的名/值對。無論哪種情況，發送的數據都是文本，但這里使用 text/xml 或者 XML 作為普通文本發送。如果使用名/值對，對應的行應該是：
xmlHttp.setRequestHeader("Content-Type", "text/plain");
如果忘記告訴服務器發送的是 XML，就會出現問題，因此不要忘掉這一步驟。
完成這些之后，剩下的就是調用 send() 並傳入 XML 字符串了。服務器將收到您的 XML 請求，並（假設已經做好了准備工作）接受 XML，解釋它，然后返回響應。實際上要做的只有這么多 —— XML 請求只需要稍微修改代碼。
服務器端接受到XML做出什么樣的相應，在下篇文章中將介紹。
2 Ajax學習---在請求和響應中使用 XML(2)
----前言
在 Ajax 應用程序中，使用 XML 作為發送數據的格式的理由很少，但使服務器向 客戶機回發 XML 的理由很多。
理由：(1)客戶機以名稱/值對發送請求(2)服務器無法（以一種標准方式）發送名稱/值對
在大多數情況下，客戶機不需要使用 XML，因為他們會使用名稱/值對發送請求。因此，您可能會發送一個這樣的名稱：name=jennifer。只需簡單地在連續的名稱/值對之間添加一個 “與” 符號（&），即可將其放在一起，就像這樣：name=jennifer&job=president。使用簡單的文本和這些名稱值對，客戶機即可輕松向服務器請求多個值。很少需要用到 XML 提供的額外結構（及其帶來的額外開銷）。
實際上，需要向服務器發送 XML 的所有理由都差不多可以歸入以下兩個基本的類別中：
服務器僅 接受 XML 請求。在這類情況下，您別無選擇。上一期文章中介紹的基礎知識應已使您掌握了發送此類請求所必需的工具。
您正在調用一個僅接受 XML 或 SOAP 請求的遠程 API。這實際上就是上一種情況的特例，但值得單獨拿出來提一下。如果您希望在一個異步請求中使用來自 Google 或 Amazon 的 API，就會有一些特殊的考慮事項。
如果服務器使用字符串 name=jennifer&job=president 應答一個應用程序，客戶機沒有任何標准化的簡便方法來將每個對拆分成名稱和值。您必須手動解析所返回的數據。如果服務器返回一個由名稱/值對構成的響應，這樣的響應的解釋難度與使用分號、豎線或其他任何非標准格式化字符相同。對於您來說，這就意味沒有任何簡單的方法在響應中使用純文本使客戶機以一種標准的方法獲取並解釋響應，至少在響應包含多個值時是如此。
----使用XML：
意識到沒有任何標准的方法可以使服務器使用名稱/值對響應客戶機之后，使用 XML 的原因也就顯而易見了。向客戶機發送數據時，名稱/值對是非常好的選擇，因為服務器和服務器端語言可以輕松解釋名稱/值對；向客戶機返回數據時使用 XML 也是如此。有幾種方法可從服務器獲得 XML 響應，並使用較為標准的代碼提取數據，在客戶機中使用這些數據。
清單 1.服務器響應（XML 格式）
<ratings>
<show>
<title>Alias</title>
<rating>6.5</rating>
</show>
<show>
<title>Lost</title>
<rating>14.2</rating>
</show>
<show>
<title>Six Degrees</title>
<rating>9.1</rating>
</show>
</ratings>
----將 XML 作為純文本處理
處理 XML 的最簡單的選擇（至少就學習新的編程技術而言），就是用與處理服務器返回的其他文本片段相同的方法來處理它。換言之，基本上就是忽略數據格式，只關注服務器的響應。
在這種情況下，您要使用請求對象的 responseText 屬性，就像在服務器向您發送非 XML 響應時一樣。
清單 2. 將 XML 作為普通服務器響應處理
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;// response has the XML response from the server
alert(response);
}
}
}
在這個代碼片段中，updatePage() 是回調方法，request 是 XMLHttpRequest 對象。最終，您將得到把所有一切串聯在一起的 XML 響應，位於 response 變量之中。
清單 3.response 變量的值：
<ratings><show><title>Alias</title><rating>6.5</rating>
</show><show><title>Lost</title><rating>14.2</rating></show><show>
<title>Six Degrees</title><rating>9.1</rating></show></ratings>
在這里，您可以使用 JavaScript split 函數來拆分此數據，並通過基本的字符串操作來獲得元素的名稱和值。毫無疑問，這是個令人頭疼的過程，它無視於您花費了大量時間來閱讀前幾期文章中 DOM（Document Object Model）相關內容這一事實。因此，我要強調，您應該牢記：利用 responseText，可以輕松使用和輸出服務器的 XML 響應，但我不會為您展示太多的代碼，在能夠使用 DOM 時，您不應選擇這種方法來獲得 XML 數據，下面您會看到這一點。
盡管可以 將服務器的 XML 格式的響應視同為其他任何文本響應來處理，但這樣做沒有很好的理由。使用 DOM 這種對 JavaScript 友好的 API 來操縱 XML。還有更好的事情，JavaScript 和 XMLHttpRequest 對象提供了一個屬性，它能完美地獲取服務器的 XML 響應，並且是以 DOM Document 對象的形式來獲取它。
清單 4 給出了一個實例。這段代碼與 清單 2 類似，但沒有使用 responseText 屬性，回調函數使用的是 responseXML 屬性。該屬性在 XMLHttpRequest 上可用，它以 DOM 文檔的格式返回服務器的響應。
清單 4. 將 XML 當作 XML
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML;// work with xmlDoc using the DOM
}
}
}
現在您有了一個 DOM Document，可以像處理其他任何 XML 一樣處理它。例如，隨后可能要獲取所有 show 元素，如 清單 5 所示。
清單 5. 獲取所有 show 元素
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML;
var showElements = xmlDoc.getElementsByTagName("show");
}
}
}
如果您熟悉 DOM，從這兒開始，看起來就應該有幾分熟悉了。您可以使用您所了解的全部 DOM 方法，輕松操縱從服務器處接收到的 XML。
當然，您也可以混用普通的 JavaScript 代碼。例如，可以遍歷所有 show 元素，如 清單 6 所示。
清單 6. 遍歷所有 show 元素
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML;
var showElements = xmlDoc.getElementsByTagName("show");
for (var x=0; x<showElements.length; x++) {
// We know that the first child of show is title, and the second is rating
var title = showElements[x].childNodes[0].value;
var rating = showElements[x].childNodes[1].value;
// Now do whatever you want with the show title and ratings
}
}
}
}
通過這段非常簡單的代碼，您正是將 XML 響應作為 XML 而不是無格式的純文本進行了處理，還使用了一點 DOM 和簡單的 JavaScript 來處理服務器響應。更重要的是，您使用了標准化的格式 —— XML，而不是以逗號分隔的值或以豎線分隔的名稱/值對。換句話說，您將 XML 用在了最適合它的地方，避免了在不適合的地方使用它（比如說向服務器發送請求時）。
----解釋 XML 的其他可選方法
除將 XML 作為無格式文本處理或使用 DOM 處理之外，還有一種非常流行的選擇很重要，值得一提。那就是 JSON（JavaScript Object Notation），這是一種綁定在 JavaScript 內的自由文本格式。大體上，可以用 JSON 做的事，用 DOM 都可以完成，反之亦然；選擇主要取決於偏好，當然也要為特定的應用程序選擇正確的方法。就現在而言，您應堅持使用 DOM，在接收服務器響應的過程中熟悉 DOM。