Prototype對Ajax的支持
Ajax.Request類
如下代碼是一個示例：
<!--客戶端：index.htm-->
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript">
function test(){
var myAjax = new Ajax.Request(
'data.html',
{
method:'get',
onComplete:showResponse
}
);
}
function showResponse(response){
$('myDiv').innerHTML=response.responseText;
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="myDiv" />
</body>
</html>
<!--服務端：data.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
</head>
<body>
Ajax.Request DEMO
</body>
</html>
Ajax操作選項屬性含義：
method HTTP請求方法(POST/GET/HEAD)
parameters 在HTTP請求中傳入的URL格式的值列表，就是URL串中問號之后的部分
asynchronous 是否做異步XMLHttpRequest請求
postBody 在POST請求方式下，傳入請求體中的內容
requestHeaders 和請求一起被傳入的HTTP頭部列表，這個列表必須含有偶數個項目
onXXXXXXX 在HTTP請求，響應的過程中，當XMLHttpRequest對象狀態發生變化時調用的響應函數．響應函數有5個：onUninitialized, onLoading, onLoaded, onInteractive和 onComplete
onSuccess Ajax操作成功完成時調用的響應函數，傳入的參數與onXXXXXX相同
onFailure Ajax操作請求完成但出現錯誤時調用的響應函數，傳入的參數與onXXXXXX相同
onException Ajax操作發生異常情況時調用的響應函數，它可以接收兩個參數，第1個參數是執行HTTP請求的XMLHttpRequest對象，第2個參數是異常對象
Ajax.Updater類
如下代碼示例：
<!--客戶端：index.htm-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript">
function test(){
var myAjax = new Ajax.Updater(
'myDiv',
'data.html',
{
method:'get'
}
);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="myDiv" />
</body>
</html>
<!--服務端：data.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
</head>
<body>
Ajax.Request DEMO
</body>
</html>
此外，Ajax.Updater類還有另外一個功能，如果請求的頁面內容中包括JavaScript，Ajax.Updater類可以執行其中的腳本，只需要在Ajax操作選項中增加屬性"evalScripts：true"就可以了．把上述的例子進行修改后得到如下示例：
<!--客戶端：index.htm-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript">
function test(){
var myAjax = new Ajax.Updater(
'myDiv',
'data.html',
{
method:'get',
evalScripts:true
}
);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="myDiv" />
</body>
</html>
<!--服務端：data.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript" type="text/javascript">
sayHi = function(){
alert("Heelo, " + $F('name') + "!");
}
</script>
</head>
<body>
<input type="text" id="name" value="Ajax.Updater DEMO" />
<input type="button" value="Click Me" Onclick="sayHi()" />
</body>
</html>
如果我們把data.html中sayHi黑體的函數改成：function sayHi{....}或者var sayHi = function(){....},程序將不能正常運行．這是因為Ajax.Updater執行腳本是以eval的方式，而不是將腳本內容引入到當前頁面，直接聲明用var聲明的sayHi函數的作用域只是在這段腳本內部，外部的其他腳本不能訪問，按照sayHi黑體描述的其作用域是整個window.
Ajax.PeriodUpdater類
在一些Ajax應用中,需要周期性地更新某些頁面元素,例如:天氣預報,新聞等.實現這樣的功能通常要使用JavaScript中的定時器函數 setTimeout, clearTimeout等, 而有了Ajax.PeriodUpdater類,可以得到很大地簡化.
新建一個Ajax.PeriodUpdater類的實例需要指定3個參數:
container: 將要更新的頁面元素id;
url: 請求的URL地址;
options: Ajax操作選項
和Ajax.Updater類相似，Ajax.PeriodUpdater類也支持動態執行JavaScript腳本，只需要在Ajax操作選項中增加(evalScripts : true)屬性值就行．
Ajax.PeriodUpdater類支持兩個特殊的Ajax操作選項，frequency和decay．frequency參數很容易理解，是定時更新頁面元素，或者定時執行腳本，frequency指的就是兩次Ajax操作之間的時間間隔，單位是秒，默認值是２
如下代碼是一個示例：
<!--客戶端：index.htm-->
<html>
<head>
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript">
function test(){
var myAjax = new Ajax.PeriodicalUpdater(
'myDiv',
'data.html',
{
method:'get',
evalScripts:true,
frequency:1,
decay:2
}
);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id='myDiv' />
</body>
</html>
<!--服務端：data.html-->
<html>
<head>
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript" type="text/javascript">
count=9;//手動改變數字，我們可以看到index.htm頁面myDiv元素的值同時在更新
$('myDiv1').innerHTML = "count = " + count + ": " + new Date() + "<br>";
</script>
</head>
<body>
<div id='myDiv1' />
</body>
</html>
Ajax.Responders對象
該類維護了一個正在運行的AJax對象列表，在需要實現一些全局功能時就可以使用它．例如，在Ajax請求發出以后需要提示用戶操作正在執行中，當操作以后取消提示，如下所示：
<!--客戶端：index.htm-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript">
function test(){
var myAjax = new Ajax.Request(
'data.html',
{
method:'get',
onComplete:showResponse
}
);
}
function showResponse(response){
$('myDiv').innerHTML=response.responseText;
}
var handle={
onCreate:function(){
Element.show('loading'); //創建Ajax請求時,顯示loading
},
onComplete:function(){
//當請求成功返回時,如果當前沒有其他正在運行中的Ajax請求,隱藏loading
if(Ajax.activeRequestCount == 0){
Element.hide('loading');
}
}
};
//將handle注冊到全局的Ajax.Responders對象中,使其生效
Ajax.Responders.register(handle);
</script>
</head>
<body>
<input type="button" value="click" onclick="test()" />
<div id="myDiv" />
<div id="loading" style="display:none">
<img src="loading.gif">Loading...
</div>
</body>
</html>
<!--服務端：data.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
Ajax.responders DEMO
</body>
</html>
上述定義了一個handle 對象，其中包含onCreate和onComplete函數，頁面中發出任何一個Ajax請求時都會調用onCreate方法，而請求完成時都會調用onComplete方法.