作者：Chris Schalk

AJAX 核心基礎(chǔ)技術(shù)的真實(shí)概述。

2006 年 4 月發(fā)布

迄今為止，您可能已經(jīng)聽過太多有關(guān) AJAX 的宣傳報(bào)道，而且很多產(chǎn)品都宣稱它們支持或“兼容”AJAX。但是，很多人可能一直無法從技術(shù)角度對 AJAX 的實(shí)質(zhì)進(jìn)行簡單、嚴(yán)謹(jǐn)?shù)年U釋。本文將擯棄所有華麗詞藻，從平實(shí)的角度對構(gòu)成 AJAX 的核心基礎(chǔ)進(jìn)行概述。

首先，AJAX 是個(gè)新事物嗎？

并非如此。 遠(yuǎn)程 Javascript 在最近掀起了一輪熱潮。利用它，開發(fā)人員能夠使用 XML 數(shù)據(jù)與服務(wù)器交互。而 AJAX 就是一種遠(yuǎn)程 Javascript。AJAX 之所以成為可能，是因?yàn)楝F(xiàn)在許多主要的瀏覽器都提供可進(jìn)行獨(dú)立 XML HTTP 請求的 對象 。Internet Explorer 5 以及更高版本提供了一個(gè) XMLHTTP 對象，而基于 Mozilla 的瀏覽器則提供了一個(gè) XMLHttpRequest 對象。這些對象都能夠從服務(wù)器請求 XML 數(shù)據(jù)，并以類似的方式處理這些數(shù)據(jù)。所有能夠動態(tài)提供 XML 的技術(shù)都可以使用服務(wù)器端 AJAX 組件。任何動態(tài) Web 技術(shù)（從 PHP 到 Servlet）都可以充當(dāng) AJAX 服務(wù)器。

遠(yuǎn)程 Javascript 與 AJAX 的缺點(diǎn)之一是， 頁面作者 （設(shè)計(jì)最終頁面的人員）必須編寫相當(dāng)數(shù)量的 Javascript 代碼來管理 XMLHTTP 交互。幸好，JavaServer Faces (JSF) 為此提供了一個(gè)解決方案，從而使 AJAX 更加易于使用。

Ajax Under The Hood

只有了解了 AJAX 客戶端-服務(wù)器事務(wù)中涉及的核心 AJAX 體系結(jié)構(gòu)后，方可進(jìn)一步理解與其他技術(shù)（如 JSF）集成的更為高級的 AJAX 示例。

AJAX 目前可以提供以下兩種核心技術(shù)：

• 支持 Javascript 和支持 XMLHTTP 和 XMLHttpRequest 對象的瀏覽器
• 能夠以 XML 響應(yīng)的 HTTP 服務(wù)器技術(shù)

因?yàn)樗辛餍械臑g覽器都支持 Javascript 和必要的 XMLHTTP 請求對象，且?guī)缀跛?Web 服務(wù)器技術(shù)均可生成 XML（或任何標(biāo)記），所以核心 AJAX 技術(shù)普遍適用。

最簡單的 AJAX 應(yīng)用程序?qū)嵸|(zhì)上就是一個(gè)帶有 Javascript 函數(shù)的標(biāo)準(zhǔn) HTML 用戶界面，該界面可與能動態(tài)生成 XML 的 HTTP 服務(wù)器進(jìn)行交互。任何動態(tài) Web 技術(shù)（從 CGI 到 Servlet，以及本文稍后將談到的 JSF）都可充當(dāng)服務(wù)器端 AJAX 技術(shù)。

核心 AJAX 應(yīng)用程序的主要組件包括：

• HTML 頁面，其中包含：
  • 與 AJAX Javascript 函數(shù)交互的 UI 元素
  • 與 AJAX 服務(wù)器交互的 Javascript 函數(shù)
• 可處理 HTTP 請求并以 XML 標(biāo)記響應(yīng)的服務(wù)器端 Web 技術(shù)。

這些元素如圖 1 所示。

了解了關(guān)鍵元素后，我們就可以設(shè)計(jì)一個(gè)包含輸入域、按鈕或任何可鏈接至 Javascript 的元素的 HTML 用戶界面了。例如，按下按鈕可激活某個(gè) Javascript 函數(shù)，或者更深入些，在用戶向輸入域鍵入內(nèi)容時(shí)可激活某個(gè) Javascript 函數(shù)。為此，您可以將 onkeyup= 賦予 Javascript 函數(shù)的值來處理輸入域中的數(shù)據(jù)。例如，當(dāng)發(fā)生 onkeyup 事件（即鍵入內(nèi)容）時(shí)，輸入域“searchField”將調(diào)用 Javascript 函數(shù) lookup( )。

    <input type="text" id="searchField"
size="20" onkeyup="lookup('searchField');">

  

除了響應(yīng)用戶界面交互（例如鍵入）外，AJAX Javascript 函數(shù)還可根據(jù)自己的計(jì)時(shí)器進(jìn)行獨(dú)立操作。（可以使用該方法執(zhí)行 AJAX autosave （自動保存）特性。）

如何發(fā)出 XML HTTP 請求

現(xiàn)在，我們來了解如何調(diào)用 AJAX Javascript 代碼。請看以下 Javascript 代碼，該代碼可發(fā)出一個(gè) XML HTTP 請求：

    if (window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
   req = new
ActiveXObject("Microsoft.XMLHTTP");
}   
  

利用該代碼斷，主要的瀏覽器（Internet Explorer 和 Mozilla/Safari）都可向服務(wù)器發(fā)出獨(dú)立的 HTTP 請求。該代碼首先檢查瀏覽器是否支持上文提及的兩個(gè)支持的 XMLHTTP 對象，然后對其中之一進(jìn)行實(shí)例化。

一旦對 XMLHttpRequest（或 Microsoft 的 XMLHTTP）進(jìn)行了實(shí)例化，即可以通過完全相同的方式對其進(jìn)行操作。

要初始化到服務(wù)器的連接，需使用以下 open 方法：

    req.open("GET", url, true);

  

第一個(gè)參數(shù)是 HTTP 方法（ GET 或 POST ）。第二個(gè)參數(shù)是服務(wù)器（或使用 POST 的表單操作）的 URL；第三個(gè)參數(shù)為 true ，則表明可進(jìn)行異步調(diào)用（“A”代表 AJAX）。這意味著該瀏覽器可以在實(shí)現(xiàn)請求的同時(shí)繼續(xù)執(zhí)行其他操作。 open 方法中若為 false 值，則表明為非異步處理或順序處理。我們不建議如此，這是因?yàn)槟臑g覽器會在返回響應(yīng)前停止操作。

使用 open 初始化連接后，可進(jìn)行 onreadystatechange 調(diào)用（只適用于異步調(diào)用）。這將注冊一個(gè)回調(diào)函數(shù)，一旦請求完成就會調(diào)用該函數(shù)：

     
req.onreadystatechange = processXMLResponse;

  

在完成請求后，將調(diào)用處理 XML 響應(yīng)的 processXMLResponse( ) 函數(shù)。可以通過 onreadystatechange 語句以內(nèi)聯(lián)方式聲明回調(diào)函數(shù)：

    req.onreadystatechange = processXMLResponse() {   
// process request 
}; 

  

還可使用 req.setRequestHeader 指定任何標(biāo)題內(nèi)容，如：

     
req.setRequestHeader("Cookie", "someKey=true");

  

一旦完全初始化了 XMLHTTP 請求對象 (req)，就可使用 send( ) 初始化對服務(wù)器的調(diào)用：

    req.send(null); 

  

對于 GET 請求，使用 null 值或空字符串“”。

POST 請求包含一個(gè)帶有表單數(shù)據(jù)的字符串參數(shù)。它們也要求在請求的標(biāo)題中設(shè)置 Content-Type。以下兩行演示了如何執(zhí)行 AJAX POST 請求：

    req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded";  

req.send("name=scott&email=stiger@foocorp.com");
 
  

完成請求后調(diào)用的回調(diào)函數(shù)通常具有確保請求不會發(fā)生錯(cuò)誤的代碼。這可通過檢查 readyState 以及 HTTP 請求的整體 狀態(tài) 來實(shí)現(xiàn)。（readystate 為 4 表示 XMLHTTP 請求 完整 ，而 200 表示請求 成功 （404 含義正好相反）。

    function processXMLResponse() {  
if (req.readyState == 4) { 
if (request.status != 200) {
// Process the XML response   
    } 
  } 
}

  

XML 響應(yīng)的處理是通過使用標(biāo)準(zhǔn) Javascript DOM 方法完成的。例如，要從輸入的 XML 流中抽取員工姓名：

    <employee> 
Chris  
</employee>

  

您可以使用以下代碼：

    var name = req.responseXML.getElementsByTagName("employee")[0];

  

分析更為復(fù)雜的 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; 
  }  
} 

  

結(jié)合使用 XMLHttpRequest 和 HTML

請注意，通過 XMLHttpRequest 獲得 XML 響應(yīng)無需總是格式良好和有效。因此，AJAX 服務(wù)器端組件可以直接將 HTML 內(nèi)容發(fā)送至客戶端。然后，JavaScript 可使用 req.responseText 方法/屬性（它只是將內(nèi)容作為字符串進(jìn)行檢索）檢索該 HTML 內(nèi)容。可以使用該 HTML 字符串文本以任何方式更改頁面。例如，對于以下 HTML 流：

    <h2>Hello there!</h2>
    

    
<p> This is <b>HTML</b></p>

  

可使用以下語句檢索至一個(gè)字符串中：

    var HTMLcontent = req.responseText;

  

之后通過 id="div1" 添加至指定的 HTML DIV。

    document.getElementById("div1").innerHTML += HTMLcontent;

  

JSF 如何支持 AJAX

JSF 及其以組件為中心的體系結(jié)構(gòu)通過允許 JSF 組件全權(quán)處理 Javascript 和嵌入式 AJAX“管件”解決了 AJAX 的固有難題。JSF 頁面作者甚至無需關(guān)注客戶端與服務(wù)器之間的 AJAX 交互。它們只需像使用其他 JSF 組件那樣使用支持 AJAX 的 JSF 組件即可，而且感覺更好。JSF 與 AJAX 的結(jié)合使用前途光明！

AJAX 非宣傳性簡介