ajax.updater应用

最新推荐文章于 2021-08-06 20:32:07 发布

秤秤biubiu

最新推荐文章于 2021-08-06 20:32:07 发布

阅读量6.5k

点赞数

分类专栏： js 文章标签： xmlhttprequest function ajax prototype asynchronous parameters

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

ajax.updater应用

通过这个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" >

ajax.html
<body><script language="javascript">test = function (){alert ("ok");}</script><div style="border:1px silver solid;">using ajax!<input type="button" value="gettest" ></div></body>

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

二：
表单的提交可以无刷新的方式
<form action="/action/here" method="post" >
以上这段代码是我在wiki.script.aculo.us上看到的，有兴趣可以去看看原文。

firehack (张宗荣)

超级版主

UID 3
精华 15
积分 4651
帖子 1691
阅读权限 150
注册 2006-4-3
状态在线

发表于 2006-11-14 14:57 资料文集短消息

Prototype 是一个开源的 javascript 开发框架，里面封装了大量可以加快开发速度的方法，例如使用$('div')代替getElementById("div"),封装了xmlhttprequest等。许多语言的开发框架如 Ruby on Rails, symfony(PHP) 都集成 Prototype，更有很多如 script.aculo.us , Rico , Behaviour 这样的衍生作品，大大扩充了protopype的功能了,很方便的实现自动完成,元素拖动,闪烁提示,圆角矩形提示框,文字渐隐等功能。使得页面一下"动"了起来,大大提高了用户的使用体验。对于设计者来说，大大减少了在UI方面花的时间，以前为了实现一个效果需要长长的 script 代码,而现在可能只需要一两行了.
在 Prototype 中,主要有两个方法来实行异步数据传输分别是 Ajax.Updater 和 Ajax.Request。

[Copy to clipboard]

CODE: