ajax在使用上因為不同的browser會有不同的XMLHttpRequest物件

所以在設定上會顯的麻煩

而prototype.js就是一個方便的script framework可以讓你不用考慮環境上的因素

而進行快速的ajax開發

prototype的官方網站

http://www.prototypejs.org/

這裡有api 可以下載回來看

http://www.prototypejs.org/api

一.簡介prototype.js

1.$("物件id")   =   document.getElementById("物件id")

ex.

$("物件id").getValue()   =   document.getElementById("物件id").value

function請參考api

2.$A("物件Name") = document.getElementByTagName("物件Name")

這個工具元件可以取得所有"物件Name"所有底下物件的Array

ex.

var paras = $A(document.getElementsByTagName('物件Name'));
paras.each(Element.hide);
$(paras.last()).show();

3.$F("物件id") = document.getElementById("物件id").value;

4.$H("名稱") 是一個hash

ex.

var h = $H({ version: 1.5, author: 'Sam Stephenson' });
h.each(function(pair) {
alert(pair.key + ' = "' + pair.value + '"');
});
這會出現二個alert視窗,第一個是version = 1.5 第二個是author = SamStephenson

二.ajax使用prototype

來個簡單的例子應該很容易就理解了

new Ajax.Request('response.jsp',{
method: 'get',
parameters: {'id':'456'},
onSuccess: function(transport) {
$("msg").update(transport.responseXML);
}});

說明

1.method 可以用post跟get二種

2.parameters可以傳入{'id':'456'}  ==>response.jsp?id=456

這裡可以利用json的方式傳入,但json.js會跟新版的prototype.js衝突

建議可以直接使用prototype的function來做{'id','456'.toJSON()}

或者

['a', {b: null}].toJSON();
//-> '["a", {"b": null}]'

利用toJSON可以防止脫溢符號的攻擊

3.onXXXXX可以參考api

onSuccess:function(transport)

當成功回應時要做什麼動作

transport有三個response是responseXML跟responseText,responseJSON (Server端記得要設定response的ContentType)

onFailure:function()

當Server出現Exception時會執行這個function

ps.responseText.evalJSON()可以轉換成json格式

三.$("物件id").update(內容)

ex

$("物件id").update(transport.responseText)

會更新"物件id"裡的內容

以上是比較常用的幾個function