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 相关文章推荐
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
javascript实现的简单计时器
Jul 19 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
javascript实现电商放大镜效果
Nov 23 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数组无限分级数据的层级化处理代码
2012/12/29 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
Gird事件机制初级读本
2007/03/10 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
chrome调试javascript详解
2015/10/21 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
详解Python做一个名片管理系统
2019/03/14 Python
python地震数据可视化详解
2019/06/18 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
办公室副主任岗位职责
2013/11/25 职场文书
2014年党支部承诺书
2014/05/30 职场文书
2014年销售部工作总结
2014/12/01 职场文书
大学生求职自荐信
2015/03/24 职场文书
自荐信格式模板
2015/03/27 职场文书
保险内勤岗位职责
2015/04/13 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书