作者：Chris Schalk
AJAX 核心基礎技術的真實概述。
2006 年 4 月發布
迄今為止，您可能已經聽過太多有關 AJAX 的宣傳報道，而且很多產品都宣稱它們支持或“兼容”AJAX。但是，很多人可能一直無法從技術角度對 AJAX 的實質進行簡單、嚴謹的闡釋。本文將擯棄所有華麗詞藻，從平實的角度對構成 AJAX 的核心基礎進行概述。
首先，AJAX 是個新事物嗎？
并非如此。遠程 Javascript 在最近掀起了一輪熱潮。利用它，開發人員能夠使用 XML 數據與服務器交互。而 AJAX 就是一種遠程 Javascript。AJAX 之所以成為可能，是因為現在許多主要的瀏覽器都提供可進行獨立 XML HTTP 請求的對象。Internet Explorer 5 以及更高版本提供了一個 XMLHTTP 對象，而基于 Mozilla 的瀏覽器則提供了一個 XMLHttpRequest 對象。這些對象都能夠從服務器請求 XML 數據，并以類似的方式處理這些數據。所有能夠動態提供 XML 的技術都可以使用服務器端 AJAX 組件。任何動態 Web 技術（從 PHP 到 Servlet）都可以充當 AJAX 服務器。
遠程 Javascript 與 AJAX 的缺點之一是，頁面作者（設計最終頁面的人員）必須編寫相當數量的 Javascript 代碼來管理 XMLHTTP 交互。幸好，JavaServer Faces (JSF) 為此提供了一個解決方案，從而使 AJAX 更加易于使用。
Ajax Under The Hood
只有了解了 AJAX 客戶端-服務器事務中涉及的核心 AJAX 體系結構后，方可進一步理解與其他技術（如 JSF）集成的更為高級的 AJAX 示例。
AJAX 目前可以提供以下兩種核心技術：
- 支持 Javascript 和支持 XMLHTTP 和 XMLHttpRequest 對象的瀏覽器
- 能夠以 XML 響應的 HTTP 服務器技術
因為所有流行的瀏覽器都支持 Javascript 和必要的 XMLHTTP 請求對象，且幾乎所有 Web 服務器技術均可生成 XML（或任何標記），所以核心 AJAX 技術普遍適用。
最簡單的 AJAX 應用程序實質上就是一個帶有 Javascript 函數的標準 HTML 用戶界面，該界面可與能動態生成 XML 的 HTTP 服務器進行交互。任何動態 Web 技術（從 CGI 到 Servlet，以及本文稍后將談到的 JSF）都可充當服務器端 AJAX 技術。
核心 AJAX 應用程序的主要組件包括：
- HTML 頁面，其中包含：
- 與 AJAX Javascript 函數交互的 UI 元素
- 與 AJAX 服務器交互的 Javascript 函數
- 可處理 HTTP 請求并以 XML 標記響應的服務器端 Web 技術。
這些元素如圖 1 所示。
圖 1 核心 AJAX 體系結構
了解了關鍵元素后，我們就可以設計一個包含輸入域、按鈕或任何可鏈接至 Javascript 的元素的 HTML 用戶界面了。例如，按下按鈕可激活某個 Javascript 函數，或者更深入些，在用戶向輸入域鍵入內容時可激活某個 Javascript 函數。為此，您可以將 onkeyup= 賦予 Javascript 函數的值來處理輸入域中的數據。例如，當發生 onkeyup 事件（即鍵入內容）時，輸入域“searchField”將調用 Javascript 函數 lookup( )。
<input type="text" id="searchField"
size="20" onkeyup="lookup('searchField');">
除了響應用戶界面交互（例如鍵入）外，AJAX Javascript 函數還可根據自己的計時器進行獨立操作。（可以使用該方法執行 AJAX autosave（自動保存）特性。）
如何發出 XML HTTP 請求
現在，我們來了解如何調用 AJAX Javascript 代碼。請看以下 Javascript 代碼，該代碼可發出一個 XML HTTP 請求：
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
req = new
ActiveXObject("Microsoft.XMLHTTP");
}
利用該代碼斷，主要的瀏覽器（Internet Explorer 和 Mozilla/Safari）都可向服務器發出獨立的 HTTP 請求。該代碼首先檢查瀏覽器是否支持上文提及的兩個支持的 XMLHTTP 對象，然后對其中之一進行實例化。
一旦對 XMLHttpRequest（或 Microsoft 的 XMLHTTP）進行了實例化，即可以通過完全相同的方式對其進行操作。
要初始化到服務器的連接，需使用以下 open 方法：
req.open("GET", url, true);
第一個參數是 HTTP 方法（GET 或 POST）。第二個參數是服務器（或使用 POST 的表單操作）的 URL；第三個參數為 true，則表明可進行異步調用（“A”代表 AJAX）。這意味著該瀏覽器可以在實現請求的同時繼續執行其他操作。open 方法中若為 false 值，則表明為非異步處理或順序處理。我們不建議如此，這是因為您的瀏覽器會在返回響應前停止操作。
使用 open 初始化連接后，可進行 onreadystatechange 調用（只適用于異步調用）。這將注冊一個回調函數，一旦請求完成就會調用該函數：
req.onreadystatechange = processXMLResponse;
在完成請求后，將調用處理 XML 響應的 processXMLResponse( ) 函數。可以通過 onreadystatechange 語句以內聯方式聲明回調函數：
req.onreadystatechange = processXMLResponse() {
// process request
};
還可使用 req.setRequestHeader 指定任何標題內容，如：
req.setRequestHeader("Cookie", "someKey=true");
一旦完全初始化了 XMLHTTP 請求對象 (req)，就可使用 send( ) 初始化對服務器的調用：
req.send(null);
對于 GET 請求，使用 null 值或空字符串“”。
POST 請求包含一個帶有表單數據的字符串參數。它們也要求在請求的標題中設置 Content-Type。以下兩行演示了如何執行 AJAX POST 請求：
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded";
req.send("name=scott&email=stiger@foocorp.com");
完成請求后調用的回調函數通常具有確保請求不會發生錯誤的代碼。這可通過檢查 readyState 以及 HTTP 請求的整體狀態來實現。（readystate 為 4 表示 XMLHTTP 請求完整，而 200 表示請求成功（404 含義正好相反）。
function processXMLResponse() {
if (req.readyState == 4) {
if (request.status != 200) {
// Process the XML response
}
}
}
XML 響應的處理是通過使用標準 Javascript DOM 方法完成的。例如，要從輸入的 XML 流中抽取員工姓名：
<employee>
Chris
</employee>
您可以使用以下代碼：
var name = req.responseXML.getElementsByTagName("employee")[0];
分析更為復雜的 XML 會使用如下代碼迭代元素：
for (i=0;i<elements.length;i++) {
for (j=0;j<elements[i].childNodes.length;j++) {
var ElementData = elements[i].childNodes[j].firstChild.nodeValue;
}
}
結合使用 XMLHttpRequest 和 HTML
請注意，通過 XMLHttpRequest 獲得 XML 響應無需總是格式良好和有效。因此，AJAX 服務器端組件可以直接將 HTML 內容發送至客戶端。然后，JavaScript 可使用 req.responseText 方法/屬性（它只是將內容作為字符串進行檢索）檢索該 HTML 內容。可以使用該 HTML 字符串文本以任何方式更改頁面。例如，對于以下 HTML 流：
<h2>Hello there!</h2>
<p> This is <b>HTML</b></p>
可使用以下語句檢索至一個字符串中：
var HTMLcontent = req.responseText;
之后通過 id="div1" 添加至指定的 HTML DIV。
document.getElementById("div1").innerHTML += HTMLcontent;
JSF 如何支持 AJAX
JSF 及其以組件為中心的體系結構通過允許 JSF 組件全權處理 Javascript 和嵌入式 AJAX“管件”解決了 AJAX 的固有難題。JSF 頁面作者甚至無需關注客戶端與服務器之間的 AJAX 交互。它們只需像使用其他 JSF 組件那樣使用支持 AJAX 的 JSF 組件即可，而且感覺更好。JSF 與 AJAX 的結合使用前途光明！
保持關注！