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>
<!--服務(wù)端：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請求方式下，傳入請求體中的內(nèi)容
requestHeaders 和請求一起被傳入的HTTP頭部列表，這個列表必須含有偶數(shù)個項目
onXXXXXXX 在HTTP請求，響應(yīng)的過程中，當(dāng)XMLHttpRequest對象狀態(tài)發(fā)生變化時調(diào)用的響應(yīng)函數(shù)．響應(yīng)函數(shù)有5個：onUninitialized, onLoading, onLoaded, onInteractive和 onComplete
onSuccess Ajax操作成功完成時調(diào)用的響應(yīng)函數(shù)，傳入的參數(shù)與onXXXXXX相同
onFailure Ajax操作請求完成但出現(xiàn)錯誤時調(diào)用的響應(yīng)函數(shù)，傳入的參數(shù)與onXXXXXX相同
onException Ajax操作發(fā)生異常情況時調(diào)用的響應(yīng)函數(shù)，它可以接收兩個參數(shù)，第1個參數(shù)是執(zhí)行HTTP請求的XMLHttpRequest對象，第2個參數(shù)是異常對象
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>
<!--服務(wù)端：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類還有另外一個功能，如果請求的頁面內(nèi)容中包括JavaScript，Ajax.Updater類可以執(zhí)行其中的腳本，只需要在Ajax操作選項中增加屬性"evalScripts：true"就可以了．把上述的例子進(jìn)行修改后得到如下示例：
<!--客戶端：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>
<!--服務(wù)端：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黑體的函數(shù)改成：function sayHi{....}或者var sayHi = function(){....},程序?qū)⒉荒苷＿\行．這是因為Ajax.Updater執(zhí)行腳本是以eval的方式，而不是將腳本內(nèi)容引入到當(dāng)前頁面，直接聲明用var聲明的sayHi函數(shù)的作用域只是在這段腳本內(nèi)部，外部的其他腳本不能訪問，按照sayHi黑體描述的其作用域是整個window.
Ajax.PeriodUpdater類
在一些Ajax應(yīng)用中,需要周期性地更新某些頁面元素,例如:天氣預(yù)報,新聞等.實現(xiàn)這樣的功能通常要使用JavaScript中的定時器函數(shù) setTimeout, clearTimeout等, 而有了Ajax.PeriodUpdater類,可以得到很大地簡化.
新建一個Ajax.PeriodUpdater類的實例需要指定3個參數(shù):
container: 將要更新的頁面元素id;
url: 請求的URL地址;
options: Ajax操作選項
和Ajax.Updater類相似，Ajax.PeriodUpdater類也支持動態(tài)執(zhí)行JavaScript腳本，只需要在Ajax操作選項中增加(evalScripts : true)屬性值就行．
Ajax.PeriodUpdater類支持兩個特殊的Ajax操作選項，frequency和decay．frequency參數(shù)很容易理解，是定時更新頁面元素，或者定時執(zhí)行腳本，frequency指的就是兩次Ajax操作之間的時間間隔，單位是秒，默認(rèn)值是２
如下代碼是一個示例：
<!--客戶端：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>
<!--服務(wù)端：data.html-->
<html>
<head>
<script language="javascript" type="text/javascript" src="prototype1.6.js"></script>
<script language="javascript" type="text/javascript">
count=9;//手動改變數(shù)字，我們可以看到index.htm頁面myDiv元素的值同時在更新
$('myDiv1').innerHTML = "count = " + count + ": " + new Date() + "<br>";
</script>
</head>
<body>
<div id='myDiv1' />
</body>
</html>
Ajax.Responders對象
該類維護了一個正在運行的AJax對象列表，在需要實現(xiàn)一些全局功能時就可以使用它．例如，在Ajax請求發(fā)出以后需要提示用戶操作正在執(zhí)行中，當(dāng)操作以后取消提示，如下所示：
<!--客戶端：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'); //創(chuàng)建Ajax請求時,顯示loading
},
onComplete:function(){
//當(dāng)請求成功返回時,如果當(dāng)前沒有其他正在運行中的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>
<!--服務(wù)端：data.html-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
Ajax.responders DEMO
</body>
</html>
上述定義了一個handle 對象，其中包含onCreate和onComplete函數(shù)，頁面中發(fā)出任何一個Ajax請求時都會調(diào)用onCreate方法，而請求完成時都會調(diào)用onComplete方法.