天天看點

prototype.js開發筆記

prototypeAjaxJavaScript應用伺服器浏覽器

<b>Table of Contents</b>

1. Programming Guide

1.1. Prototype是什麼?

1.2. 關聯文章

1.3. 通用性方法

1.3.1. 使用 $()方法

1.3.2. 使用$F()方法

1.3.3. 使用$A()方法

1.3.4. 使用$H()方法

1.3.5. 使用$R()方法

1.3.6. 使用Try.these()方法

1.4. Ajax 對象

1.4.1. 使用 Ajax.Request類

1.4.2. 使用 Ajax.Updater 類

2. prototype.js參考

2.1. JavaScript 類的擴充

2.2. 對 Object 類的擴充

2.3. 對 Number 類的擴充

2.4. 對 Function 類的擴充

2.5. 對 String 類的擴充

2.6. 對 document DOM 對象的擴充

2.7. 對 Event 對象的擴充

2.8. 在 prototype.js中定義的新對象和類

2.9. PeriodicalExecuter 對象

2.10. Prototype 對象

2.11. Class 對象

2.12. Ajax 對象

2.13. Ajax.Base 類

2.14. Ajax.Request 類

2.15. options 參數對象

2.16. Ajax.Updater 類

2.17. Ajax.PeriodicalUpdater 類

2.18. Element 對象

2.19. Abstract 對象

2.20. Abstract.Insertion 類

2.21. Insertion 對象

2.22. Insertion.Before 類

2.23. Insertion.Top 類

2.24. Insertion.Bottom 類

2.25. Insertion.After 類

2.26. Field 對象

2.27. Form 對象

2.28. Form.Element 對象

2.29. Form.Element.Serializers 對象

2.30. Abstract.TimedObserver 類

2.31. Form.Element.Observer 類

2.32. Form.Observer 類

2.33. Abstract.EventObserver 類

2.34. Form.Element.EventObserver 類

2.35. Form.EventObserver 類

2.36. Position 對象 (預備文檔)

覆寫版本 1.3.1

<b>Chapter 1. Programming Guide</b>

<b>1.1. Prototype</b><b>是什麼?</b>

或許你還沒有用過它, prototype.js 是一個由Sam Stephenson 寫的JavaScript包。這個構思奇妙編寫良好的一段<b>相容标準</b> 的一段代碼将承擔創造胖用戶端, 高互動性WEB應用程式的重擔。輕松加入Web 2.0特性。

如果你最近體驗了這個程式包,你很可能會發現文檔并不是它的強項之一。像所有在我之前的開發者一樣,我隻能一頭紮進prototype.js的源代碼中并且試驗其中的每一個部分。我想當我學習他的時候記寫筆記然後分享給其他人将會很不錯。

我也一起提供了這個包的對象,類,方法和擴充的 非官方參考 。

<b>1.2. </b><b>關聯文章</b>

進階JavaScript指南

<b>1.3. </b><b>通用性方法</b>

這個程式包裡面包含了許多預定義的對象和通用性方法。編寫這些方法的明顯的目的就是為了減少你大量的重複編碼和慣用法。

<b>1.3.1. </b><b>使用 </b><b>$()</b><b> </b><b>方法</b>

$() 方法是在DOM中使用過于頻繁的 document.getElementById() 方法的一個便利的簡寫,就像這個DOM方法一樣,這個方法傳回參數傳入的id的那個元素。

比起DOM中的方法,這個更勝一籌。你可以傳入多個id作為參數然後 $() 傳回一個帶有所有要求的元素的一個 Array 對象。下面的例子會向你描述這些。

&lt;HTML&gt;

&lt;HEAD&gt;

&lt;TITLE&gt; Test Page &lt;/TITLE&gt;

&lt;script src="prototype-1.3.1.js"&gt;&lt;/script&gt;

&lt;script&gt;

function test1()

{

var d = $('myDiv');

alert(d.innerHTML);

}

function test2()

var divs = $('myDiv','myOtherDiv');

for(i=0; i&lt;divs.length; i++)

alert(divs[i].innerHTML);

&amp;lt;/script&gt;

&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;div id="myDiv"&gt;

&lt;p&gt;This is a paragraph&lt;/p&gt;

&lt;/div&gt;

&lt;div id="myOtherDiv"&gt;

&lt;p&gt;This is another paragraph&lt;/p&gt;

&lt;input type="button" value=Test1 onclick="test1();"&gt;&lt;br&gt;

&lt;input type="button" value=Test2 onclick="test2();"&gt;&lt;br&gt;

&lt;/BODY&gt;

&lt;/HTML&gt;

這個方法的另一個好處就是你可以傳入id字元串或者元素對象自己,這使得在建立可以傳入任何形式參數的方法的時候,它變得非常有用。

<b>1.3.2. </b><b>使用</b><b>$F()</b><b> </b><b>方法</b>

$F() 方法是另一個非常受歡迎的簡寫。它可以傳回任何輸入表單控件的值,如文本框或下拉框。這個方法可以傳入元素的id或者元素自己。

function test3()

alert( <b>$F('userName')</b>

);

&lt;/script&gt;

&lt;input type="text" id="userName" value="Joe Doe"&gt;&lt;br&gt;

&lt;input type="button" value=Test3 onclick="test3();"&gt;&lt;br&gt;

<b>1.3.3. </b><b>使用</b><b>$A()</b><b> </b><b>方法</b>

$A() 方法把接收到的參數轉換成一個Array 對象。

這個方法加上對Array 類的擴充,可以很容易的轉換或者複制任意的列舉清單到Array 對象, 一個被推薦使用的用法就是轉換DOM 的NodeLists 到一個普通的數組裡,可以被更廣泛高效的使用, 看下面的例子。

function showOptions(){

var someNodeList = $('lstEmployees').getElementsByTagName('option');

var nodes = $A(someNodeList);

nodes.each(function(node){

alert(node.nodeName + ': ' + node.innerHTML);

});

&lt;select id="lstEmployees" size="10" &gt;

&lt;option value="5"&gt;Buchanan, Steven&lt;/option&gt;

&lt;option value="8"&gt;Callahan, Laura&lt;/option&gt;

&lt;option value="1"&gt;Davolio, Nancy&lt;/option&gt;

&lt;/select&gt;

&lt;input type="button" value="Show the options" &gt;

<b>1.3.4. </b><b>使用</b><b>$H()</b><b> </b><b>方法</b>

$H() 方法把對象轉化成可枚舉的貌似聯合數組Hash 對象。

function testHash()

//let's create the object

var a = {

first: 10,

second: 20,

third: 30

};

//now transform it into a hash

var h = $H(a);

alert(h.toQueryString()); //displays: first=10&amp;second=20&amp;third=30

<b>1.3.5. </b><b>使用</b><b>$R()</b><b> </b><b>方法</b>

$R() 方法是new ObjectRange(lowerBound, upperBound, excludeBounds) 的一個簡單快捷的使用方式。

ObjectRange 類文檔裡面有完整的解釋。同時,我們來看看一個簡單的例子, 來示範通過each 方法周遊的用法。 那個方法的更多解釋在Enumerable 對象文檔裡面。

function demoDollar_R(){

var range = $R(10, 20, false);

range.each(function(value, index){

alert(value);

&lt;input type="button" value="Sample Count" &gt;

<b>1.3.6. </b><b>使用</b><b>Try.these()</b><b> </b><b>方法</b>

Try.these() 方法使得實作當你想調用不同的方法直到其中的一個成功正常的這種需求變得非常容易,他把一系列的方法作為參數并且按順序的一個一個的執行這些方法直到其中的一個成功執行,傳回成功執行的那個方法的傳回值。

在下面的例子中, xmlNode.text 在一些浏覽器中好用,但是xmlNode.textContent 在另一些浏覽器中正常工作。 使用Try.these() 方法我們可以得到正常工作的那個方法的傳回值。

function getXmlNodeValue(xmlNode){

return Try.these(

function() {return xmlNode.text;},

function() {return xmlNode.textContent;)

<b>1.4. </b><b>Ajax</b><b> </b><b>對象</b>

上面提到的共通方法非常好,但是面對它吧,它們不是最進階的那類東西。它們是嗎?你很可能自己編寫了這些甚至在你的腳本裡面有類似功能的方法。但是這些方法隻是冰山一角。

我很肯定你對prototype.js感興趣的原因很可能是由于它的AJAX能力。是以讓我們解釋當你需要完成AJAX邏輯的時候,這個包如何讓它更容易。

Ajax 對象是一個預定義對象,由這個包建立,為了封裝和簡化編寫AJAX 功能涉及的狡猾的代碼。 這個對象包含一系列的封裝AJAX邏輯的類。我們來看看它們的一些。

<b>1.4.1. </b><b>使用 </b><b>Ajax.Request</b><b> </b><b>類</b>

如果你不使用任何的幫助程式包,你很可能編寫了整個大量的代碼來建立XMLHttpRequest 對象并且異步的跟蹤它的程序, 然後解析出響應 然後處理它。當你不需要支援多于一種類型的浏覽器時你會感到非常的幸運。

為了支援 AJAX 功能。這個包定義了 Ajax.Request 類。

假如你有一個應用程式可以通過url http://yoursever/app/get_sales?empID=1234&amp;year=1998 與伺服器通信。它傳回下面這樣的XML 響應。

&lt;?xml version="1.0" encoding="utf-8" ?&gt;

&lt;ajax-response&gt;

&lt;response type="object" id="productDetails"&gt;

&lt;monthly-sales&gt;

&lt;employee-sales&gt;

&lt;employee-id&gt;1234&lt;/employee-id&gt;

&lt;year-month&gt;1998-01&lt;/year-month&gt;

&lt;sales&gt;$8,115.36&lt;/sales&gt;

&lt;/employee-sales&gt;

&lt;year-month&gt;1998-02&lt;/year-month&gt;

&lt;sales&gt;$11,147.51&lt;/sales&gt;

&lt;/monthly-sales&gt;

&lt;/response&gt;

&lt;/ajax-response&gt;

用 Ajax.Request 對象和伺服器通信并且得到這段XML是非常簡單的。下面的例子示範了它是如何完成的。

function searchSales()

var empID = $F('lstEmployees');

var y = $F('lstYears');

var url = 'http://yoursever/app/get_sales';

var pars = 'empID=' + empID + '&amp;year=' + y;

<b>var myAjax = new Ajax.Request(</b>

<b>url,</b>

<b>{method: 'get', parameters: pars, onComplete: showResponse}</b>

<b>);</b>

function showResponse(originalRequest)

//put returned XML in the textarea

$('result').value = originalRequest.responseText;

&lt;select id="lstEmployees" size="10" onchange="searchSales()"&gt;

&lt;select id="lstYears" size="3" onchange="searchSales()"&gt;

&lt;option selected="selected" value="1996"&gt;1996&lt;/option&gt;

&lt;option value="1997"&gt;1997&lt;/option&gt;

&lt;option value="1998"&gt;1998&lt;/option&gt;

&lt;br&gt;&lt;textarea id=result cols=60 rows=10 &gt;&lt;/textarea&gt;

你看到傳入 Ajax.Request 構造方法的第二個對象了嗎?參數{method: 'get', parameters: pars, onComplete: showResponse} 表示一個匿名對象的真實寫法。他表示你傳入的這個對象有一個名為 method 值為 'get'的屬性, 另一個屬性名為 parameters 包含HTTP請求的查詢字元串,和一個onComplete 屬性/方法包含函數showResponse 。

還有一些其它的屬性可以在這個對象裡面定義和設定,如 asynchronous ,可以為true 或 false 來決定AJAX對伺服器的調用是否是異步的(預設值是 true )。

這個參數定義AJAX調用的選項。在我們的例子中,在第一個參數通過HTTP GET指令請求那個url,傳入了變量 pars 包含的查詢字元串, Ajax.Request 對象在它完成接收響應的時候将調用showResponse 方法。

也許你知道, XMLHttpRequest 在HTTP請求期間将報告進度情況。這個進度被描述為四個不同階段:Loading , Loaded , Interactive , 或 Complete 。你可以使 Ajax.Request 對象在任何階段調用自定義方法 ,Complete 是最常用的一個。想調用自定義的方法隻需要簡單的在請求的選項參數中的名為 onXXXXX 屬性/方法中提供自定義的方法對象。 就像我們例子中的 onComplete 。你傳入的方法将會被用一個參數調用,這個參數是 XMLHttpRequest 對象自己。你将會用這個對象去得到傳回的資料并且或許檢查包含有在這次調用中的HTTP結果代碼的 status 屬性。

還有另外兩個有用的選項用來處理結果。我們可以在onSuccess 選項處傳入一個方法,當AJAX無誤的執行完後調用, 相反的,也可以在onFailure 選項處傳入一個方法,當伺服器端出現錯誤時調用。正如onXXXXX 選項傳入的方法一樣,這兩個在被調用的時候也傳入一個帶有AJAX請求的XMLHttpRequest對象。

我們的例子沒有用任何有趣的方式處理這個 XML響應, 我們隻是把這段XML放進了一個文本域裡面。對這個響應的一個典型的應用很可能就是找到其中的想要的資訊,然後更新頁面中的某些元素,或者甚至可能做某些XSLT轉換而在頁面中産生一些HTML。

更完全的解釋,請參照 Ajax.Request 參考 和 Ajax選項參考 。

<b>1.4.2. </b><b>使用 </b><b>Ajax.Updater</b><b> </b><b>類</b>

如果你的伺服器的另一端傳回的資訊已經是HTML了,那麼使用這個程式包中 Ajax.Updater 類将使你的生活變得更加得容易。用它你隻需提供哪一個元素需要被AJAX請求傳回的HTML填充就可以了,例子比我寫說明的更清楚。

function getHTML()

var url = 'http://yourserver/app/getSomeHTML';

var pars = 'someParameter=ABC';

<b>var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});</b>

&lt;input type=button value=GetHtml onclick="getHTML()"&gt;

&lt;div id="placeholder"&gt;&lt;/div&gt;

你可以看到,這段代碼比前面的例子更加簡潔,不包括 onComplete 方法,但是在構造方法中傳入了一個元素id。 我們來稍稍修改一下代碼來描述如何在用戶端處理伺服器段錯誤成為可能。

我們将加入更多的選項, 指定處理錯誤的一個方法。這個是用 onFailure 選項來完成的。

我們也指定了一個 placeholder 隻有在成功請求之後才會被填充。為了完成這個目的我們修改了第一個參數從一個簡單的元素id到一個帶有兩個屬性的對象, success (一切OK的時候被用到) 和 failure (有地方出問題的時候被用到) 在下面的例子中沒有用到failure 屬性,而僅僅在 onFailure 處使用了 reportError 方法。

<b>var myAjax = new Ajax.Updater(</b>

<b>{success: 'placeholder'},</b>

<b>{method: 'get', parameters: pars, onFailure: reportError});</b>

function reportError(request)

alert('Sorry. There was an error.');

如果你的伺服器邏輯是傳回JavaScript 代碼而不是單純的 HTML 标記, Ajax.Updater 對象可以執行那段JavaScript代碼。為了使這個對象對待響應為JavaScript,你隻需在最後參數的對象構造方法中簡單加入evalScripts: true 屬性。

更完全的解釋,請參照 Ajax.Updater 參考 和 Ajax選項參考 。

<b>Chapter 2. prototype.js</b><b>參考</b>

<b>2.1. JavaScript </b><b>類的擴充</b>

prototype.js 包中加入功能的一種途徑就是擴充已有的JavaScript 類。

<b>2.2. </b><b>對 </b><b>Object</b><b> </b><b>類的擴充</b>

<b>Table 2.1. Object </b><b>類的擴充</b>

<b>方法</b>

<b>類别</b>

<b>參數</b>

<b>描述</b>

extend(destination, source)

static

destination : 任何對象, source : 任何對象

用從 source 到 destination 複制所有屬性和方法的方式 來提供一種繼承機制。

extend(object)

instance

任何對象

用從傳入的 object 中複制所有屬性和方法的方式 來提供一種繼承機制。

<b>2.3. </b><b>對 </b><b>Number</b><b> </b><b>類的擴充</b>

<b>Table 2.2. Number </b><b>類的擴充</b>

toColorPart()

(none)

傳回數字的十六進制描述, 當在HTML中轉換為RGB顔色元件到HTML中使用的顔色。

<b>2.4. </b><b>對 </b><b>Function</b><b> </b><b>類的擴充</b>

<b>Table 2.3. </b><b>對 Function 類的擴充</b>

bind(object)

object : 擁有這個方法的對象

傳回預先綁定在擁有該函數(=方法)的對象上的函數執行個體, 傳回的方法将和原來的方法具有相同的參數。

bindAsEventListener(object)

傳回預先綁定在擁有該函數(=方法)的對象上的函數執行個體, 傳回的方法将把目前的事件對象作為它的參數。

讓我們看看這些擴充的具體例子。

&lt;input type=checkbox id=myChk value=1&gt; Test?

//declaring the class

var CheckboxWatcher = Class.create();

//defining the rest of the class implmentation

CheckboxWatcher.prototype = {

initialize: function(chkBox, message) {

this.chkBox = $(chkBox);

this.message = message;

//assigning our method to the event

<b>this.chkBox.onclick = this.showMessage.bindAsEventListener(this);</b>

},

showMessage: function(evt) {

alert(this.message + ' (' + evt.type + ')');

var watcher = new CheckboxWatcher('myChk', 'Changed');

<b>2.5. </b><b>對 </b><b>String</b><b> </b><b>類的擴充</b>

<b>Table 2.4. String </b><b>類的擴充</b>

stripTags()

傳回一個把所有的HTML或XML标記都移除的字元串。

escapeHTML()

傳回一個把所有的HTML标記回避掉的字元串。

unescapeHTML()

和 escapeHTML() 相反。

<b>2.6. </b><b>對 </b><b>document</b><b> DOM </b><b>對象的擴充</b>

<b>Table 2.5. document DOM </b><b>對象的擴充</b>

getElementsByClassName(className)

className : 關聯在元素上的CSS類名

傳回給定的具有相同的CSS類名的所有元素。

<b>2.7. </b><b>對 </b><b>Event</b><b> </b><b>對象的擴充</b>

<b>Table 2.6. Event </b><b>對象的擴充</b>

<b>屬性</b>

<b>類型</b>

KEY_BACKSPACE

Number

8: 常量,倒退(Backspace)鍵的代碼。

KEY_TAB

9: 常量,Tab鍵的代碼。

KEY_RETURN

13: 常量,Enter鍵的代碼。

KEY_ESC

27: 常量, Esc鍵的代碼。

KEY_LEFT

37: 常量,左箭頭鍵的代碼。

KEY_UP

38: 常量,上箭頭鍵的代碼。

KEY_RIGHT

39: 常量,右箭頭鍵的代碼。

KEY_DOWN

40: 常量,下箭頭鍵的代碼。

KEY_DELETE

46: 常量,删除(Delete)鍵的代碼。

observers:

Array

緩存的觀察者的清單,這個對象内部具體實作的一部分。

<b>Table 2.7. Event </b><b>對象的擴充</b>

element(event)

event : 事件對象

傳回引發這個事件的元素。

isLeftClick(event)

如果滑鼠左鍵單擊傳回true。

pointerX(event)

傳回在頁面上x坐标。

pointerY(event)

傳回在頁面上y坐标。

stop(event)

用這個方法來中止事件的預設行為來使事件的傳播停止。

findElement(event, tagName)

event : 事件對象, tagName : 指定标記的名字

向 DOM 樹的上位查找,找到第一個給定标記名稱的元素, 從這個元素開始觸發事件。

observe(element, name, observer, useCapture)

element : 對象或者對象id, name : 事件名 (如 'click', 'load', etc), observer : 處理這個事件的方法, useCapture : 如果true, 在捕捉到事件的階段處理事件 那麼如果 false在bubbling 階段處理。

加入一個處理事件的方法。

stopObserving(element, name, observer, useCapture)

删除一個處理實踐的方法。

_observeAndCache( element, name, observer, useCapture)

私有方法,不用管它。

unloadCache()

私有方法,不用管它。清除記憶體中的多有觀察着緩存。

讓我們看看怎樣用這個對象加入處理 window 對象的load 事件的處理方法。

<b>Event.observe(window, 'load', showMessage, false);</b>

function showMessage() {

alert('Page loaded.');

<b>2.8. </b><b>在 prototype.js中定義的新對象和類</b>

另一個這個程式包幫助你的地方就是提供許多既支援面向對象設計理念又有共通功能的許多對象。

<b>2.9. </b><b>PeriodicalExecuter</b><b> </b><b>對象</b>

這個對象提供一定間隔時間上重複調用一個方法的邏輯。

<b>Table 2.8. PeriodicalExecuter </b><b>對象</b>

[ctor](callback, interval)

constructor

callback : 沒有參數的方法, interval : 秒數

建立這個對象的執行個體将會重複調用給定的方法。

<b>Table 2.9. PeriodicalExecuter </b><b>對象</b>

callback

Function()

被調用的方法,該方法不會被傳入參數。

frequency

以秒為機關的間隔。

currentlyExecuting

Boolean

表示這個方法是否正在執行。

<b>2.10. </b><b>Prototype</b><b> </b><b>對象</b>

Prototype 沒有太重要的作用,隻是聲明了該程式包的版本。

<b>Table 2.10. The Prototype object</b>

Version

String

包的版本。

emptyFunction

空方法對象。

<b>2.11. </b><b>Class</b><b> </b><b>對象</b>

在這個程式包中 Class 對象在聲明其他的類時候被用到。用這個對象聲明類使得新類支援 initialize() 方法,他起構造方法的作用。

看下面的例子

<b>var MySampleClass = Class.create();</b>

MySampleClass.prototype = {

initialize: function(message) {

showMessage: function(ajaxResponse) {

alert(this.message);

//now, let's instantiate and use one object

var myTalker = new MySampleClass('hi there.');

myTalker.showMessage(); //displays alert

<b>Table 2.11. Class </b><b>對象</b>

create(*)

(any)

定義新類的構造方法。

<b>2.12. </b><b>Ajax</b><b> </b><b>對象</b>

這個對象被用作其他提供AJAX功能的類的根對象。

<b>Table 2.12. Ajax </b><b>對象</b>

getTransport()

傳回新的XMLHttpRequest 對象。

<b>2.13. </b><b>Ajax.Base</b><b> </b><b>類</b>

這個類是其他在Ajax對象中定義的類的基類。

<b>Table 2.13. Ajax.Base </b><b>類</b>

setOptions(options)

options : AJAX 選項

設定AJAX操作想要的選項。

responseIsSuccess()

傳回 true 如果AJAX操作成功,否則為 false 。

responseIsFailure()

與 responseIsSuccess() 相反。

<b>2.14. </b><b>Ajax.Request</b><b> </b><b>類</b>

繼承自 Ajax.Base

封裝 AJAX 操作

<b>Table 2.14. Ajax.Request </b><b>類</b>

Events

在AJAX操作中所有可能報告的事件/狀态的清單。這個清單包括: 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 和 'Complete' 。

transport

XMLHttpRequest

攜帶AJAX操作的 XMLHttpRequest 對象。

<b>Table 2.15. Ajax.Request </b><b>類</b>

[ctor](url, options)

url : 請求的url, options : AJAX 選項

建立這個對象的一個執行個體,它将在給定的選項下請求url。 <b>重要:</b> 如果選擇的url受到浏覽器的安全設定,他會一點作用也不起。 很多情況下,浏覽器不會請求與目前頁面不同主機(域名)的url。 你最好隻使用本地url來避免限制使用者配置他們的浏覽器(謝謝Clay)

request(url)

url : AJAX 請求的url

這個方法通常不會被外部調用。已經在構造方法中調用了。

setRequestHeaders()

這個方法通常不會被外部調用。 被這個對象自己調用來配置在HTTP請求要發送的HTTP報頭。

onStateChange()

這個方法通常不會被外部調用。 當AJAX請求狀态改變的時候被這個對象自己調用。

respondToReadyState(readyState)

readyState : 狀态數字 (1 到 4)

<b>2.15. </b><b>options</b><b> </b><b>參數對象</b>

AJAX操作中一個重要的部分就是 options 參數。 本質上沒有options類。任何對象都可以被傳入,隻要帶有需要的屬性。通常會隻為了AJAX調用建立匿名類。

<b>Table 2.16. options </b><b>參數對象</b>

<b>Default</b>

method

'post'

HTTP 請求方式。

parameters

''

在HTTP請求中傳入的url格式的值清單。

asynchronous

true

指定是否做異步 AJAX 請求。

postBody

undefined

在HTTP POST的情況下,傳入請求體中的内容。

requestHeaders

和請求一起被傳入的HTTP頭部清單, 這個清單必須含有偶數個項目, 任何奇數項目是自定義的頭部的名稱, 接下來的偶數項目使這個頭部項目的字元串值。 例子:['my-header1', 'this is the value', 'my-other-header', 'another value']

onXXXXXXXX

Function(XMLHttpRequest)

在AJAX請求中,當相應的事件/狀态形成的時候調用的自定義方法。 例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded}; . 這個方法将被傳入一個參數, 這個參數是攜帶AJAX操作的 XMLHttpRequest 對象。

onSuccess

當AJAX請求成功完成的時候調用的自定義方法。 這個方法将被傳入一個參數, 這個參數是攜帶AJAX操作的 XMLHttpRequest 對象。

onFailure

當AJAX請求完成但出現錯誤的時候調用的自定義方法。 這個方法将被傳入一個參數, 這個參數是攜帶AJAX操作的 XMLHttpRequest 對象。

insertion

Function(Object, String)

null

為了把傳回的文本注入到一個元素中而執行的方法。 這個方法将被傳入兩個參數,要被更新的對象并且隻應用于 Ajax.Updater 的響應文本 。

evalScripts

undefined, false

決定當響應到達的時候是否執行其中的腳本塊,隻在 Ajax.Updater 對象中應用。

decay

undefined, 1

決定當最後一次響應和前一次響應相同時在 Ajax.PeriodicalUpdater 對象中的減漫通路的次數, 例如,如果設為2,後來的重新整理和之前的結果一樣, 這個對象将等待2個設定的時間間隔進行下一次重新整理, 如果又一次一樣, 那麼将等待4次,等等。 不設定這個隻,或者設定為1,将避免通路頻率變慢。

<b>2.16. </b><b>Ajax.Updater</b><b> </b><b>類</b>

繼承自 Ajax.Request

當請求的url傳回一段HTML而你想把它直接放置到頁面中一個特定的元素的時候被用到。如果url的傳回&lt;script&gt; 的塊并且想在接收到時就執行它的時候也可以使用該對象。含有腳本的時候使用 evalScripts 選項。

<b>Table 2.17. Ajax.Updater </b><b>類</b>

ScriptFragment

可以判斷是否為腳本的正規表達式。

containers

Object

這個對象包含兩個屬性:AJAX請求成功執行的時候用到 containers.success , 否則的話用到 containers.failure 。

<b>Table 2.18. Ajax.Updater </b><b>類</b>

[ctor](container, url, options)

container :可以是元素的id, 也可以是元素自己, 或者可以是帶有2個屬性的對象 - <b>object.success</b> AJAX請求成功的時候用到的元素(或者id) 否則用到<b>object.failure</b> 中設定的元素(或id) ,url : 請求的url, options : AJAX 選項

建立一個用給定的選項請求給定的url的一個執行個體。

updateContent()

這個方法通常不會被外部調用。 當響應到達的時候,被這個對象自己調用。 它會用HTML更新适當的元素或者調用在 insertion 選項中傳入的方法-這個方法将被傳入兩個參數, 被更新的元素和響應文本。

<b>2.17. </b><b>Ajax.PeriodicalUpdater</b><b> </b><b>類</b>

這個類重複生成并使用 Ajax.Updater 對象來重新整理頁面中的一個元素。或者執行 Ajax.Updater 可以執行的其它任務。更多資訊參照 Ajax.Updater 參考 。

<b>Table 2.19. Ajax.PeriodicalUpdater </b><b>類</b>

container

這個值将直接傳入Ajax.Updater 的構造方法。

url

兩次重新整理之間的間隔 (不是頻率) ,以秒為機關。 預設2秒。 This 當調用 Ajax.Updater 對象的時候,這個數将和目前的 decay 相乘。

重負執行任務的時候保持的衰敗水準。

updater

Ajax.Updater

繼續閱讀