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 相关文章推荐
清除div下面的所有标签的方法
Feb 17 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
vuex实现及简略解析(小结)
Mar 01 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
详细分析JavaScript中的深浅拷贝
Sep 17 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/06/01 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
jQuery 动画基础教程
2008/12/25 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
基于opencv实现简单画板功能
2020/08/02 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
硕士研究生个人求职信
2013/12/04 职场文书
文明教师事迹材料
2014/01/16 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python