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