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 相关文章推荐
简单实用的全选反选按钮例子
Oct 18 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
python写xml文件的操作实例
2014/10/05 Python
python获取图片颜色信息的方法
2015/03/18 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
django中的图片验证码功能
2019/09/18 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
试述DBMS的主要功能
2016/11/13 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
库房主管岗位职责
2013/12/31 职场文书
大学秋游活动方案
2014/02/11 职场文书
高中军训感言600字
2014/03/11 职场文书
腾讯广告词
2014/03/19 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
小学教师自我评价
2015/03/04 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
餐厅开业活动方案
2019/07/08 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS