作者：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 所示。

了解了關鍵元素后，我們就可以設計一個包含輸入域、按鈕或任何可鏈接至 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 的結合使用前途光明！

AJAX 非宣傳性簡介