prototype.js是一個很強大的Javascript函數庫,它可以讓你很輕松的使用一些特效,實現AJAX的功能.雖然prototype.js是為了Ruby On Rails開發的,它的純Javascript的性質也使得它很容易用在其他的網絡程序中.可惜的是,Prototype.js還沒有強大的文檔解釋,盡管它的代碼非常有條理,但是也給初學者造成了一定的麻煩.作者在README里說:

Prototype is embarrassingly lacking in documentation. (The source code should be fairly easy to comprehend; I’m committed to using a clean style with meaningful identifiers. But I know that only goes so far.)

基本用法:以Element Class為例,prototype給每個主要的分類都分成了一個Class,使用起來很方便,要產生特定的效果的話只要用new Class.function(<argument>)就可以了.比如:

<DIV id="div1"><a href="#" onclick="new Element.toggle(''div2'')">Click Me</a></DIV>

<DIV id="div2">Hello!</DIV>

當點擊Click Me的時候,div2就會交替隱藏或顯示.注意,你可以給toggle加上無限個parameter,比如Element.toggle(''div2'',''div3'',''div4'')...

下面是每個重要的類和函數的解釋:

prototype 1.2.0 的函數簡介

函數名	解釋	舉例
Element.toggle	交替隱藏或顯示	"Element.toggle(''div1'',''div2'')
Element.hide	隱藏	"Element.hide(''div1'',''div2'')
Element.show	顯示	"Element.show(''div1'',''div2'')
Element.remove	刪除	"Element.remove(''div1'',''div2'')
Element.getHeight	取得高度	"Element.getHeight(''div1'')
Toggle.display	和Element.toggle相同	"Toggle.display(''div1'',''div2'')
Insertion.Before	在DIV前插入文字	"Insertion.Before(''div1'',''my content'')
Insertion.After	在DIV后插入文字	"Insertion.After(''div1'',''my content'')
Insertion.Top	在DIV里最前插入文字	"Insertion.Top(''div1'',''this is a text'')
Insertion.Bottom	在DIV里最后插入文字	"Insertion.Bottom(''div1'',''this is a text'')
PeriodicalExecuter	以給定頻率調用一段JavaScript	"PeridicalExecutor(test, 1)"這里test是Javascript的函數,1是頻率(1秒).
$	取得一個DIV, 相當于getElementById()	$(''div1'')
Field.clear	清空一個輸入框	"Field.clear(''textfield1'')
Field.focus	把 焦點集中在輸入框上	"Field.focus(''select1'')
Field.present	判斷內容是否為空	"alert(Field.present(''textfield1''))"
Field.select	選擇輸入框的內容	"Field.select(''textfield1'')"
Field.activate	把 焦點集中在輸入框上并選擇輸入框的內容	"Field.activate(''textfield1'')"
Form.serialize	把表格內容轉化成string
Form.getElements	取得表格內容為數組形式
Form.disable	disable表格所有內容	Form.disable(''form1'') (這個好象不work)
Form.focusFirstElement	把焦點集中在表格第一個元素上	Form.focusFirstElement(''form1'')
Form.reset	Reset表格	Form.reset(''form1'')
Form.Element.getValue	取得表格輸入框的值	Form.Element.getValue(''text1'')
Form.Element.serialize	把表格中輸入框內容轉化成string	Form.Element.serialize(''text1'')
$F	等同于Form.Element.getValue()	$F(''text1'')
Effect.Highlight	高亮特效.	Effect.Highlight(''text1'')
Effect.Fade	褪色特效
Effect.Scale	放大縮小(百分比）	Effect.Scale(''text1'', 200) 這里200 = 200%, 即兩倍
Effect.Squish	消失特效．文字縮小后消失	Effect.Squish(''text1'')
Effect.Puff	消失特效．文字放大后消失	Effect.Puff(''text1'')
Effect.Appear	出現特效
Effect.ContentZoom	ZOOM特效．
Ajax.Request	傳送Ajax請求給服務器	Ajax.Request(''http://server/s.php'')
Ajax.Updater	傳送Ajax請求給服務器并用答復的結果更新指定的Container	Ajax.Updater(''text1'',''http://server/s.php'')

Ajax的函數實際上還有一個可選參數,就是options.在未指明的情況下,Ajax使用的是''POST''發送請求,而且是異步執行,如果想要改用''GET''和同步,就可以用Ajax.Request(''http://server/s.php'',''get'','''',''a=1&b=2'')來執行.

在Rails中Ajax的函數被封裝成Ruby的函數,所以不必直接采用Ajax.Request,Ajax.Updater.但是知道它是怎么工作的也很有用.