Prototype使用指南之ajax

所属分类: 网络编程 / JavaScript 阅读数: 912
收藏 0 赞 0 分享

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(): 停止更新

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多