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 相关文章推荐
juqery 学习之四 筛选查找
Nov 30 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
Vue 实现登录界面验证码功能
Jan 03 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 cache类代码(php数据缓存类)
2010/04/15 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php缓存技术详细总结
2013/08/07 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
js轮播图代码分享
2016/07/14 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
Python函数参数分类原理详解
2020/05/28 Python
python多线程和多进程关系详解
2020/12/14 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
租房安全协议书
2014/08/20 职场文书
公民代理授权委托书
2014/09/24 职场文书
清明节寄语2015
2015/03/23 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL