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方法.