关于基于prototype的AJAX应用

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 987 阅读

文章标签：

#ajax #prototype #xmlhttprequest #asynchronous #function #javascript

脚本技术/Javascript/浏览器兼容性专栏收录该内容

103 篇文章

订阅专栏

本文介绍如何利用Ajax.Updater类库简化AJAX技术应用，实现页面局部更新及表单无刷新提交等功能，并提供了具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出处:http://hi.baidu.com/zijian0428/blog/item/188bb7fbdb773a204f4aeab0.html

通过这个JS类库，将很容易的应用AJAX技术
ajax.updater应用
new Ajax.Updater('id',"url",{options});
id:你要更新的目标id
url:你要执行的操作，也可以是cgi
options:
属性类型默认描述
method Array 'post' HTTP 请求方式。
parameters String '' 在HTTP请求中传入的url格式的值列表。
asynchronous Boolean true 指定是否做异步 AJAX 请求。
postBody String undefined 在HTTP POST的情况下，传入请求体中的内容。
requestHeaders Array undefined 和请求一起被传入的HTTP头部列表，这个列表必须含有偶数个项目，任何奇数项目是自定义的头部的名称，接下来的偶数项目使这个头部项目的字符串值。例子:['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX Function(XMLHttpRequest) undefined 在AJAX请求中，当相应的事件/状态形成的时候调用的自定义方法。例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
onSuccess Function(XMLHttpRequest) undefined 当AJAX请求成功完成的时候调用的自定义方法。这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
onFailure Function(XMLHttpRequest) undefined 当AJAX请求完成但出现错误的时候调用的自定义方法。这个方法将被传入一个参数，这个参数是携带AJAX操作的 XMLHttpRequest对象。
insertion Function(Object, String) null 为了把返回的文本注入到一个元素中而执行的方法。这个方法将被传入两个参数，要被更新的对象并且只应用于 Ajax.Updater的响应文本。
evalScripts Boolean undefined, false 决定当响应到达的时候是否执行其中的脚本块，只在 Ajax.Updater 对象中应用。即要用到目标对象的JS代码必须设定true。
decay Number undefined,1 决定当最后一次响应和前一次响应相同时在 Ajax.PeriodicalUpdater 对象中的减漫访问的次数，例如，如果设为2，后来的刷新和之前的结果一样，这个对象将等待2个设定的时间间隔进行下一次刷新，如果又一次一样，那么将等待4次，等等。不设定这个只，或者设置为1，将避免访问频率变慢。
（参考 https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html#options_reference）

简单例子：
一：
index.html:

<body>
<script language="javascript" src="js/prototype.js"></script>
<script language="javascript">
function doajax(){
var ajax = new Ajax.Updater('my',"ajax.thtml",{onComplete:function(){}
,evalScripts:true});
}

</script>
<div id="my">
</div>



<input type="button" value="click" onclick="doajax()">

ajax.html

<body>
<script language="javascript">
test = function ()
{
alert ("ok");

}
</script>
<div style="border:1px silver solid;">
using ajax!

<input type="button" value="gettest" onclick="test()">

</div>
</body>

说明：为了使ajax.html中test()方法运行，首先必须设定evalScripts：true，其次在test函数的命名方式修改为“函数名字＝function()”的方式。另外也可以将js之前放至index.html也能运行，不需要修改函数。

二：
表单的提交可以无刷新的方式

<form action="/action/here" method="post" onsubmit="new 
Ajax.Updater('div_to_be_updated', '/action/here', {asynchronous:true, 
parameters:Form.serialize(this)}); return false;">

以上这段代码是我在wiki.script.aculo.us上看到的，有兴趣可以去看看原文。

具体应用可以根据需要修改，总之AJAX应用还是满好玩的。异步更新虽然好，但是网速慢的情况下，多次点击总感觉有问题。