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 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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
php的正则处理函数总结分析
2008/06/20 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
javascript遍历控件实例详细解析
2014/01/10 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python中文编码与json中文输出问题详解
2018/08/24 Python
Python函数式编程实例详解
2020/01/17 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
工程造价专业大学生自荐信
2013/10/01 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
员工培训邀请函
2014/02/02 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书