Prototype教程

2008.03.20

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

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

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

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

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

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

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

就目前而言，開源 Ajax 程序包和框架主要從以下幾個方面對 Ajax 進行封裝和擴展：

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

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

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

ü UI 工具包和組件

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

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

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

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

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

ü Ajax 化的 Web 框架

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

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

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

ü 基于組件

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

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

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

二 Prototype

2.1 什么是Prototype

Prototype 是由 Sam Stephenson 開發(fā)的一個 Javascript 類庫，也是其他框架的鼻祖。其對現(xiàn)有的部分 Javascript 對象比如 Object 、 Function 、 Dom 、 String 等進行擴展，并且對 Ajax 應(yīng)用進行封裝，借此提供了兼容標(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)用到各個領(lǐng)域，包括 java 、 .NET 、 php 等。不過在 Prototype 的源碼中，還是可以找到 Ruby 的影子，比如 Ruby 樣式的 Array 對象枚舉。

正如之前提到的， Prototype 是一個底層的遠程調(diào)用包，雖然其僅僅是一個千余行的 Javascript 文件，但是它為其他框架提供了最底層的 Javascript 擴展和 Ajax 封裝。其他 Javascript 程序庫在其基礎(chǔ)上構(gòu)建了更加高級的功能和 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 源碼解讀和使用的文檔，這在一定程度上彌補了 Prototype 官方文檔不足的遺憾。

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

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

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

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

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

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

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

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

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

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

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

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

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

2.3 循序漸近

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

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

在 Prototype 出現(xiàn)之前，我們使用這種方式定位頁面上的某個 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>

</p>

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

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

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

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>

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

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

例程 3 ：使用 try/catch 塊實例化 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ù)，這些煩瑣的過程變得異常簡單。

例程 4 ：使用 Try.these() 函數(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 對集合類的遍歷

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

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

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

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

例程 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體驗

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

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

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

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

<books>

<book>

<title>Ajax bible</title>

</book>

<book>

<title>Build with Ant</title>

</book>

<book>

<title>Google</title>

</book>

</books>

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

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

/*Ajax.Request 類體驗 */

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>

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

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

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