Prototype使用指南之ajax


Posted in Javascript onJanuary 10, 2007

Prototype中的ajax.js提供了一个非常好用的ajax框架,一般应用中简单的调用以下代码就可以了

new Ajax.Request(
    url, {method: “get”,
    onSuccess: showFilter,
    onFailure: function(request){alert(”Server error!”)},
    onException: showError}
  );

这个框架中提供了如下的对象和方法等:

Ajax对象:

只有一个getTransport方法,返回一个XMLHttpRequest对象,另外有一个activeRequestCount属性,反映当前正在处理的ajax数量

Ajax.Responders对象:

继承自Enumerable,管理全局Ajax的请求,具有如下方法
register(responder):注册一个管理ajax请求的对象
unregister(responder):撤销一个管理ajax请求的对象
dispatch(callback, request, transport, json):触发注册的处理对象的方法

这个对象一般很少使用,系统中已经使用如下的代码注册了一个处理对象

Ajax.Responders.register({
  onCreate: function() {
    Ajax.activeRequestCount++;
  },
  onComplete: function() {
    Ajax.activeRequestCount?;
  }
});

Ajax.Base类:

Ajax的基类, 只有一个方法setOptions(options), 默认request参数如下,你可以在新建Ajax.request时指定:

method:       ‘post',
asynchronous: true,
contentType:  ‘application/x-www-form-urlencoded',
encoding:     ‘UTF-8′,

Ajax.Request类:

ajax主要的类,继承自ajax.base类,客户端使用 new Ajax.Request(url,options) 调用,options是一个对象(关联数组), 在options中可以指定method,asynchronous,contentType,encoding,parameters, postBody,username,password等选项,其中parameters可以是字符传或者关联数组象,

另外在options中还可以通过requestHeaders指定request heads,其中requestHeaders可以是数组(例如[”Connection”,”Close”,”aheadkey”,”aheadvalue”])或一个关联数组;

options中最重要的选项就是指定ajax的回调方法,可以定义onComplete, onSuccess, onFailure, onException(执行过程中发生异常调用的方法,主要为onComplete, onSuccess, onFailure等回调方法产生的),甚至可以定义on404,on503这样的回调方法,它们的参数为(transport, json),其中transport为请求的XMLHttpRequest对象, json是evalJSON的结果

如果返回的是一个javascript文件(根据返回的Content-type头判断)将会执行evalResponse方法,另外Ajax.Request对象还有一个evalJSON方法,取得文件的时候就会执行

这个对象的方法列表如下:
request(url) : 发送请求,new的时候就已经调用了,所以一般不需要使用
success(): 判断request是否成功了
getHeader(name):根据name得到request head
evalJSON(): 执行getHeader(”X-JSON”),并返回结果
evalResponse(): 执行返回的responseText并返回

Ajax.Updater类:

继承自Ajax.Request,只是比Ajax.Request增加了更新html元素的功能,一般使用方法是new Ajax.Updater(element, url, options), element可以是一个元素,也可以是{success:e1,failure:e2}这种形式,

默认情况下不会执行返回结果中的javascript,如果你先执行,你可以指定options中的evalScripts为true

默认情况下是替换指定元素的内容,如果你希望是添加,可以指定options的insertion参数, insertion是一个Insertion.Before、Insertion.Top或Insertion.Bottom、 Insertion.After(将在dom.js中介绍)

Ajax.PeriodicalUpdater类:

继承自Ajax.Base,周期性的更新一个html元素的内容,这个类会调用Ajax.Updater对html元素进行周期性的更新,使用方法 为new Ajax.PeriodicalUpdater(container, url, options), 参数跟Ajax.Updater差不多,其中options可以设置frequency(默认为2),decay,decay指的是当请求的内容没有变化 的时候,frequency需要延长的倍数,默认是1,例如如果decay设为2,frequency设为3而内容一直没有变化,则请求的时间依次会变为 3,6,12,24等

start(): 开始更新, 初始化的时候会自动调用
stop(): 停止更新

Javascript 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
js只执行1次的函数示例
Jul 20 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
JS请求servlet功能示例
Jun 01 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
Prototype使用指南之range.js
Jan 10 #Javascript
Prototype使用指南之hash.js
Jan 10 #Javascript
Prototype使用指南之array.js
Jan 10 #Javascript
Prototype使用指南之enumerable.js
Jan 10 #Javascript
Prototype使用指南之base.js
Jan 10 #Javascript
Prototype使用指南之string.js
Jan 10 #Javascript
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 #Javascript
You might like
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
js下弹出窗口的变通
2007/04/18 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
python 从远程服务器下载东西的代码
2013/02/10 Python
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
深入了解Python 方法之类方法 & 静态方法
2020/08/17 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
酒店保洁主管岗位职责
2013/11/28 职场文书
大学学习计划书范文
2014/05/02 职场文书
施工安全汇报材料
2014/08/17 职场文书
奖金申请报告模板
2015/05/15 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android