2005 年，伴隨著 Web2.0 的東風(fēng)， Ajax 逐漸進(jìn)入國(guó)內(nèi)開發(fā)人員的視線，并風(fēng)靡全國(guó)。這個(gè)在 2005 年 2 月份由 Adaptive Path 公司的 Jesse James Garrett 命名的綜合技術(shù)，綜合利用 Javascript 、 XHTML 和 CSS 、 DOM 、 XMLHttpRequest （以下稱之為 XHR ）、 XML 和 XSTL 等技術(shù)，為 Web 應(yīng)用程序提供異步的 http 請(qǐng)求處理方式，幫助 Web 應(yīng)用程序?qū)崿F(xiàn)類似桌面應(yīng)用程序的快速反應(yīng)功能并提供更加優(yōu)秀的用戶體驗(yàn)效果。

從 Ajax 身上，可以很清晰的看到各種技術(shù)整合到一起之后所表現(xiàn)出來的非凡魅力：

ü       其使用 XHTML 和 CSS 實(shí)現(xiàn)標(biāo)準(zhǔn)化的呈現(xiàn)界面。

ü       其使用 DOM 實(shí)現(xiàn)動(dòng)態(tài)的顯示和交互。

ü       其使用 XHR 實(shí)現(xiàn)與服務(wù)器的異步通信。

ü       其使用 Javascript 將 XHTML 、 DOM 、 XML 、 XHR 綁定。

不過要熟練使用 Ajax 進(jìn)行開發(fā)，必須對(duì) Javascript 、 XHR 相當(dāng)熟悉，這對(duì)于不少程序員來說確實(shí)是個(gè)挑戰(zhàn)。隨著 Ajax 應(yīng)用和研究的深入，各式各樣的開源框架、包、程序庫紛紛涌現(xiàn)。這些程序包和框架分別從各自的角度入手，試圖降低 Ajax 開發(fā)的難度，比如減少 Javascript 腳本的開發(fā)量，加快開發(fā)的速度。

就目前而言，開源 Ajax 程序包和框架主要從以下幾個(gè)方面對(duì) Ajax 進(jìn)行封裝和擴(kuò)展：

ü       遠(yuǎn)程調(diào)用工具包

遠(yuǎn)程調(diào)用工具包是 Ajax 框架最底層的工具包，其通常使用自己的 API 封裝 XHR 對(duì)象，使得調(diào)用 XHR 更加簡(jiǎn)單直觀。在 XHR 之前，我們通常使用內(nèi)嵌的 IFRAME 來實(shí)現(xiàn)無刷新頁面發(fā)送 http 請(qǐng)求的效果。因此，這些遠(yuǎn)程調(diào)用包必須支持那些不支持 XHR 的瀏覽器，以提高兼容性。

類似的工具包比如 Dojo 、 Prototype 等，他們都是純 Javascript 的，適用于任何的服務(wù)端程序語言。 DWR 、 Ajax.NET 、 JSON-RP 等則是基于代理的 Ajax 框架，其允許 Javascript 直接與后臺(tái)服務(wù)器端的類實(shí)現(xiàn)映射，是客戶端的 Javascript 可以通過他們直接訪問服務(wù)器對(duì)象。

ü       UI 工具包和組件

基于底層的遠(yuǎn)程調(diào)用工具包，可以很容易的實(shí)現(xiàn)一些胖客戶端所需要的常用功能、組件和效果，比如目錄樹、標(biāo)簽面板以及菜單。這些都是可復(fù)用的。典型的比如 Script.aculo.us ，其在 Prototype 的基礎(chǔ)上，創(chuàng)建了大量不同類型的 UI 效果，比如 Opacity （不透明性）、 Movement （移動(dòng)）、 Highlight （高顯）等等。

ü       Web 應(yīng)用程序工具包

這些工具包的目的在于模仿操作系統(tǒng)典型的 UI 效果，以創(chuàng)造與桌面應(yīng)用程序更加接近的用戶體驗(yàn)。典型的比如 SmartClient ，其所提供的組件能模擬 Windows 或者 Mac OSX 的 UI 效果。

ü       基于自定義標(biāo)簽的工具包

這些工具包利用 JSP 支持自定義標(biāo)簽的特點(diǎn)，通過自定義標(biāo)簽封裝 Ajax 應(yīng)用，使傳統(tǒng)的 HTML 控件在必要的時(shí)候具備 Ajax 功能，比如以異步方式處理表單的提交和響應(yīng)，打開超鏈接內(nèi)容的時(shí)候不重新加載頁面等等。通過這些工具包，我們能夠?qū)?fù)雜的功能封裝在 HTML 風(fēng)格的特定標(biāo)簽中，使用 java 代碼自動(dòng)處理格式化、訪問外部資源等 HTML 和 Javascript 所無法處理的任務(wù)。典型的比如 Ajax Tags 。

ü       Ajax 化的 Web 框架

當(dāng)前主流的 Web 框架都意識(shí)到 Ajax 的價(jià)值所在，紛紛提供對(duì) Ajax 的支持。逐漸的，我們也可以根據(jù)自己所使用的 Web 框架，從開源項(xiàng)目中尋找符合要求的 Web 框架擴(kuò)展。比如， Struts Ajax Tags 就提供對(duì) Struts 標(biāo)簽的擴(kuò)展。

ü       代碼動(dòng)態(tài)生成

在 Ruby on Rails 社區(qū)， Ruby helper 功能能夠自動(dòng)生成基于 Prototype 的 Javascript 代碼；而 Webwork2 ，則利用 Dojo 工具包，在 java 平臺(tái)上實(shí)現(xiàn)同樣的功能。

ü       基于組件

在 .NET 領(lǐng)域，已經(jīng)有 Ajax.NET 、 Atlas 等可復(fù)用的 Ajax 組件，其允許使用拖拉的方式在 IDE 的設(shè)計(jì)視圖中快速創(chuàng)建包含 Ajax 功能的組件；同樣的， java 領(lǐng)域的 JSF 、 Tapestry 等框架也提供了類似的組件。這些組件提供了快速開發(fā) Ajax 應(yīng)用的另一捷徑。

在接下來的內(nèi)容中，我們選取當(dāng)前比較流行的三個(gè)開源程序包和框架，來體驗(yàn)一下 Ajax 的魅力。

（作者介紹：柯自聰，軟件工程師，專注于 Web 應(yīng)用程序開發(fā)，關(guān)注 OA 、門戶、電子政務(wù)、電子商務(wù)領(lǐng)域，著有《 Ajax 開發(fā)精要 -- 概念、案例與框架》一書以及《 Ajax 開發(fā)簡(jiǎn)略》、《 Liferay Portal 二次開發(fā)指南》等開源文檔。）

二 Prototype

2.1 什么是Prototype

Prototype 是由 Sam Stephenson 開發(fā)的一個(gè) Javascript 類庫，也是其他框架的鼻祖。其對(duì)現(xiàn)有的部分 Javascript 對(duì)象比如 Object 、 Function 、 Dom 、 String 等進(jìn)行擴(kuò)展，并且對(duì) Ajax 應(yīng)用進(jìn)行封裝，借此提供了兼容標(biāo)準(zhǔn)的更加易于使用的類庫，極大的方便開發(fā)人員快速創(chuàng)建具備高度交互性的 Web2.0 胖客戶端應(yīng)用程序。

Prototype 最初的目標(biāo)是應(yīng)用于 Ruby 領(lǐng)域的，不過由于優(yōu)秀的表現(xiàn)和完美的封裝以及服務(wù)器語言無關(guān)性，現(xiàn)在已經(jīng)被應(yīng)用到各個(gè)領(lǐng)域，包括 java 、 .NET 、 php 等。不過在 Prototype 的源碼中，還是可以找到 Ruby 的影子，比如 Ruby 樣式的 Array 對(duì)象枚舉。

正如之前提到的， Prototype 是一個(gè)底層的遠(yuǎn)程調(diào)用包，雖然其僅僅是一個(gè)千余行的 Javascript 文件，但是它為其他框架提供了最底層的 Javascript 擴(kuò)展和 Ajax 封裝。其他 Javascript 程序庫在其基礎(chǔ)上構(gòu)建了更加高級(jí)的功能和 UI 效果，比如 Script.aculo.us 。

Prototype 目前的最新版本是 1.4 ， 1.5 也已經(jīng)提供了 pre 版本，其官方網(wǎng)站提供了最新版本的下載，包括 zip 包、 js 文件和 Subvision 源碼。不過和其他版本一樣， Prototype 官方網(wǎng)站并未提供完整的參考文檔，開發(fā)者只能通過閱讀源碼掌握其功能?？上驳氖?，網(wǎng)上已經(jīng)流傳著不少關(guān)于 Prototype 源碼解讀和使用的文檔，這在一定程度上彌補(bǔ)了 Prototype 官方文檔不足的遺憾。

2.2 軟件組織架構(gòu)以及應(yīng)用

Prototype 主要包括三個(gè)內(nèi)容：一是提供了一些全局性的函數(shù)，替代原先煩瑣重復(fù)的代碼；二是對(duì)現(xiàn)有 Javascript 、 DOM 對(duì)象的擴(kuò)展，提供訪問公共函數(shù)的捷徑；三是對(duì) Ajax 應(yīng)用的封裝，使得開發(fā) Ajax 應(yīng)用更加容易和快速。

全局性的函數(shù)，比較有代表性的 $ 系列函數(shù)和 Try.these() 函數(shù)。

$() 函數(shù)是用于替代在 DOM 中頻繁使用的 document.getElementById() 方法的，其返回參數(shù)傳入的 id 所指向的元素。不過，其允許傳入多個(gè) id 作為參數(shù)，然后返回一個(gè)其 id 指向的元素的 Array 對(duì)象。

$F() 函數(shù)則用于返回任何表單輸入控件的值，比如文本框、文本區(qū)域、下拉列表，其也是以元素的 id 或者元素本身作為參數(shù)。不過，必須注意的是， id 所指向的元素必須支持 value 屬性，比如文本框。如果 id 指向一個(gè)按鈕，那自然就得不到所要的 value 值。

$A() 函數(shù)能夠?qū)⑵浣邮艿降娜魏慰擅杜e列表轉(zhuǎn)化成為一個(gè) Array 對(duì)象，比如將 string 字符串轉(zhuǎn)化成 Array 數(shù)組。 $H() 函數(shù)則將傳入的對(duì)象轉(zhuǎn)換成一個(gè)可枚舉的和聯(lián)合數(shù)組類似的 Hash 對(duì)象。 $R() 函數(shù)是 new ObjectRange(lowBound, upperBound, excludeBounds) 的縮寫和替代。

Try.thiese() 方法以一系列的函數(shù)作為參數(shù)，按照順序一個(gè)一個(gè)的執(zhí)行，返回第一個(gè)成功執(zhí)行的函數(shù)的返回值。這使得想調(diào)用不同的方法直到其中一個(gè)成功執(zhí)行的需求變得容易和直觀。否則我們就得變通的用 if else 去判斷了。典型的比如在保證瀏覽器兼容的情況下實(shí)例化 XHR 對(duì)象。

Prototype 對(duì) Javascript 的 Object 、 Number 、 Function 、 String 、 Array 、 Event 等對(duì)象進(jìn)行了擴(kuò)展，創(chuàng)建了一些新的對(duì)象和類，并在此基礎(chǔ)上提供了很多有用的公共函數(shù)，比如 each() 、 any() 、 collect() 等。

Prototype 另外一個(gè)值得稱道的是對(duì) Ajax 的封裝和簡(jiǎn)化，這也是 Prototype 吸引我們的另外一個(gè)重要之處。 Prototype 的 Ajax 功能主要由 Ajax.Request 和 Ajax.Updater 兩個(gè)類完成。

在沒有使用 Prototype 之前，我們需要?jiǎng)?chuàng)建 XHR 對(duì)象實(shí)例并且異步的跟蹤其進(jìn)程，在回調(diào)函數(shù)中使用 DOM 解析其返回的響應(yīng)數(shù)據(jù)并且處理后更新頁面。而 Ajax.Request 類提供了完成這一系列步驟的捷徑。我們只需要將目標(biāo) URL 、 URL 參數(shù)、 http 請(qǐng)求方法類型、回調(diào)函數(shù)名稱等一股腦的傳遞給 Ajax.Request 類即可。

Ajax.Request 類是針對(duì)需要解析服務(wù)器返回的響應(yīng)數(shù)據(jù)的情況。而如果服務(wù)器返回的信息已經(jīng)是 HTML 格式，只需要填充到某個(gè) HTML 控件中，則可以使用 Ajax.Updater 類。其調(diào)用 innerHTML 直接將 HTML 代碼填充到指定的 HTML 控件內(nèi)部。

難得可貴的是，以往我們需要判斷 XHR 的 readyState 和 status 值來獲取 http 請(qǐng)求的狀態(tài)并且作出相應(yīng)的處理，以便應(yīng)付請(qǐng)求失敗的情況；而 AjaxRequest 和 Ajax.Updater 類提供了 onComplete 來替代這些煩瑣的判斷，其只需要簡(jiǎn)單的在請(qǐng)求的選項(xiàng)參數(shù)中的名為 onXXXX 屬性 / 方法中提供自定義的方法對(duì)象即可。

接下來，我們使用 Prototype1.4 ，列舉一二，體驗(yàn)一下 Prototype 的主要功能及其所帶來的便捷。

2.3 循序漸近

從 Prototype 官方網(wǎng)站 http://prototype. 下載最新的開發(fā)包 prototype-1.4.0.js ，放到應(yīng)用程序目錄中，通過 <script> 代碼引入 Prototype 程序庫：

<script language="javascript" type="text/javascript" src="prototype-1.4.0.js"></script>

2.3.1 $ 系列函數(shù)體驗(yàn)

在 Prototype 出現(xiàn)之前，我們使用這種方式定位頁面上的某個(gè) HTML 元素及其值：

var myElement = document.getElementById(“your element’s id”);

var myValue = document.getElementById(“your element’s id”).value;

現(xiàn)在，可以分別使用 $() 函數(shù)和 $F() 函數(shù)來代替，例程 1 展示 $() 和 $F() 函數(shù)的用法：

var myElement = $(“your element’s id”);

var myValue = $F(“your element’s id”);

例程 1 ： $() 和 $F() 函數(shù)的用法

<p>Username:<input type="text" name="txtUsername" value="Jimmy"></p>

<p>

<input type="button" name="$Test" value=" $ " onClick="window.alert($('txtUsername'))">

<input type="button" name="$FTest" value=" $F " onClick="window.alert($F('txtUsername'))">

</p>

$A() 函數(shù)則將其接收到的可枚舉的任何參數(shù)轉(zhuǎn)化成為一個(gè) Array 對(duì)象。結(jié)合 Prototype 對(duì) Array 的擴(kuò)展， $A() 能夠提供更加強(qiáng)大的功能。例程 2 使用 $A() 函數(shù)獲取頁面中的全部 input 類型的控件，并使用擴(kuò)展后的 each() 函數(shù)遍歷全部的控件。

例程 2 ： $A() 函數(shù)的用法

<script language="javascript" type="text/javascript">

/*$A 函數(shù)體驗(yàn) */

function do$ATest() {

       var nodeList = document.getElementsByTagName("input");

       var nodeArray = $A(nodeList);

       var message = " 全部 input 控件： \r\n";

       nodeArray.each(

         function(node) {

             message += node.type + "|" + node.name + "|" + node.value + "\r\n";

         }

       );

       window.alert(message);

}

</script>

<input type="button" name="$ATest" value=" $A " onClick="do$ATest()">

2.3.2 Try.these() 函數(shù)的妙用

我們知道， XHR 是 Ajax 的核心之一。但是各個(gè)瀏覽器對(duì) XHR 的實(shí)現(xiàn)不同， IE 瀏覽器的各個(gè)版本對(duì) XHR 的支持也有所差異。為了保證 Ajax 的瀏覽器兼容性，在實(shí)例化 XHR 對(duì)象的時(shí)候，通常要使用 try/catch 對(duì)兼容性進(jìn)行判斷。比如例程 3 所示。

例程 3 ：使用 try/catch 塊實(shí)例化 XHR

var xhr = null;

if(window.XMLHttpRequest) {

  xhr = new XMLHttpRequest();

  if(xhr.overrideMimeType) xhr.overrideMimeType(“text/xml”);

}

else if(window.ActiveXObject) {

  try {

    xhr = new ActiveXObject(“Msxml2.XMLHTTP”);

}catch(e) {

  try {

    xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

}catch(e){}

}

}

而現(xiàn)在，使用 Try.these() 函數(shù)，這些煩瑣的過程變得異常簡(jiǎn)單。

例程 4 ：使用 Try.these() 函數(shù)實(shí)例化 XHR

function doInitialXHR() {

    return Try.these(

      function() {return new ActiveXObject('Msxml2.XMLHTTP')},

      function() {return new ActiveXObject('Microsoft.XMLHTTP')},

      function() {return new XMLHttpRequest()}

    ) || false;

}

2.3.3 對(duì)集合類的遍歷

之前提過， Prototype 最初的應(yīng)用領(lǐng)域是 Ruby 。 Ruby 為遍歷集合中的元素提供了一系列快捷的方法，使得執(zhí)行維護(hù)、查找、收集、刪除其中的元素更加快速。 Prototype 新建了一個(gè) Enumerable 對(duì)象，為 Javascript 提供類似 Ruby 的功能。

在 Ruby 、 .NET 語言中，都支持使用 each 關(guān)鍵詞對(duì)集合中的元素進(jìn)行遍歷。在 Enumberable 對(duì)象中，還有很多方法比如 all() 、 any() 、 collect() 等都是基于 each() 方法實(shí)現(xiàn)的。所以， each() 方法是操作集合元素的基礎(chǔ)。

each() 方法使用 iterator 依次獲取集合中的每個(gè)元素，并將其作為匿名函數(shù)的參數(shù)；也可以在該匿名函數(shù)中加上可選參數(shù) index ，獲取當(dāng)前元素的索引值。其實(shí)在例程 2 中，我們已經(jīng)使用了 each() 方法。

例程 5 使用 each() 方法，對(duì)一個(gè)保存貨物價(jià)格的數(shù)組進(jìn)行遍歷，顯示價(jià)格及其索引值。

例程 5 ：使用 each() 方法遍歷集合

function doEachTest() {

       var prices = [100.2, 445, 552.3, 56.0];

       prices.each(

         function(price, index) {

           window.alert("Value:" + price + "| Index:" + index);

         }

       );

}

2.3.4 P rototype 的Ajax體驗(yàn)

Prototype 將 Ajax 應(yīng)用封裝為 Ajax.Request 和 Ajax.Update 類。使用這兩個(gè)類，可以應(yīng)付大部分的 Ajax 應(yīng)用，而且不需要煩瑣的實(shí)例化 XHR 、監(jiān)控請(qǐng)求狀態(tài)的過程。

假設(shè)我們將書籍的信息保存在一個(gè) XML 文檔中，如例程 6 所示。

例程 6 ：保存書籍信息的 XML 文檔

<?xml version="1.0" encoding="gb2312"?>

<books>

  <book>

    <title>Ajax bible</title>

      <pages>500</pages>

  </book>

  <book>

    <title>Build with Ant</title>

    <pages>632</pages>

  </book>

  <book>

    <title>Google</title>

    <pages>934</pages>

  </book>

</books>

現(xiàn)在，我們使用 Ajax.Request 類去獲取這個(gè) XML 文檔的內(nèi)容，并將其顯示出來。例程 7 展示了這一過程。

例程 7 ：使用 Ajax.Request 獲取 XML 文檔內(nèi)容

<script language=”javascript” type=”text/javascript”>

/*Ajax.Request 類體驗(yàn) */

function doAjaxRequest() {

       var url = "books.xml";

       var myAjax = new Ajax.Request(

         url,

         {

         method:"get",

         onComplete:showResponse

         }

       );

}

/*Ajax.Request 類回調(diào)函數(shù) */

function showResponse(request) {

  window.alert(request.responseText);

}

</script>

<input type="button" name="ajaxRequest" value="ajaxRequest" onClick="doAjaxRequest()">

圖 1 展示了使用 Ajax.Request 后所獲取的 books.xml 文檔內(nèi)容。 

圖 1 使用 Ajax.Request 后所獲取的 books.xml 文檔內(nèi)容

例程 7 中， onComplete 指定的 showResponse 函數(shù)其實(shí)是 Ajax 的回調(diào)函數(shù)，通常在這個(gè)回調(diào)函數(shù)中完成對(duì)響應(yīng)數(shù)據(jù)的解析和顯示。而如果服務(wù)器端返回的是已經(jīng)格式化后的 HTML 代碼（這點(diǎn)在 Ruby 中很流行），則可以使用 Ajax.Updater 。例程 8 使用 Ajax.Updater 將服務(wù)器的響應(yīng)數(shù)據(jù)填充到指定的 div 中。圖 2 展示了使用 Ajax.Updater 的執(zhí)行效果。

例程 8 ：使用 Ajax.Updater 獲取服務(wù)器的響應(yīng)數(shù)據(jù)

<script language=”javascript” type=”text/javascript”>

/*Ajax.Update 類體驗(yàn) */

function doAjaxUpdate() {

       var url = "response.jsp";

       var pars = "field=all&show=true";

       var myAjax = new Ajax.Updater(

         "divContent",

         url,

         {

         method:"get",

         parameters:pars

         }

       );

</script>

<input type="button" name="ajaxUpdate" value="ajaxUpdate" onClick="doAjaxUpdate()">

<p><div id="divContent"></div></p>

圖 2 使用 Ajax.Updater 的執(zhí)行效果

例程 9 是例程 8 所請(qǐng)求的 JSP 文件。其簡(jiǎn)單的打印出加粗后的“ Ajax.Update ”字樣。

例程 9 ：

<%@ page contentType="text/html; charset=gb2312"

language="java" import="java.sql.*" errorPage="" %>

<%="<strong>Ajax.Update</strong>"%>