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支持带x身份证号码验证函数
Aug 10 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 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
一个好用的分页函数
2006/11/16 PHP
PHP函数常用用法小结
2010/02/08 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
PHP内核探索之变量
2015/12/22 PHP
form自动提交实例讲解
2017/07/10 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
工厂仓管员岗位职责
2014/01/01 职场文书
致400米运动员广播稿
2014/02/07 职场文书
洗发露广告词
2014/03/14 职场文书
党代会心得体会
2014/09/04 职场文书
行风评议整改报告
2014/11/06 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS