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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
vue2路由基本用法实例分析
Mar 06 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
原生js轮播特效
2017/05/18 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
js实现电灯开关效果
2021/01/19 Javascript
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
pyqt5自定义信号实例解析
2018/01/31 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
职工运动会感言
2014/02/07 职场文书
安全生产计划书
2014/05/04 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
高二英语教学反思
2016/03/03 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
500字作文之难忘的同学
2019/12/20 职场文书