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的表单操作 简单计算器
Dec 29 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 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初学者头疼问题总结
2006/10/09 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
Python切片用法实例教程
2014/09/08 Python
Python实现数据库编程方法详解
2015/06/09 Python
python计算圆周率pi的方法
2015/07/11 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
2014年度党员自我评议
2014/09/13 职场文书
主婚人致辞精选
2015/07/28 职场文书
中秋节随笔
2015/08/15 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS