prototype 的ajax

原文:http://www.prototypejs.org/learn/introduction-to-ajax]
翻 译:www.ruby-china.cn 站长]

Prototype框架提供了非常容易和有意思的方法处理Ajax的调用,同时它也是浏 览器安全的 。除了简单的请求外,这个模块(指prototype里的Ajax)也能很聪明的处理从服务器返回 的javascript代码,并且提供了一个辅助的类不停的轮循。

Ajax的功能包含在了全局的Ajax对象里面。用于Ajax请求的 transport是xmlHttpRequest,它是从用户角度的对不同浏览器进行安全的抽象的结果。真正的请求是通过创建Ajax. Request对象的实例实现的。复制内容到剪贴板代码: new Ajax.Request('/some_url', { method:'get' });第一个参数是请求的地址,第二个是可选的哈希值。方法选项指定要使用的HTTP请求方法,默认是POST。

记住,由于安全的原 因(也就是防止跨站脚本攻击)Ajax请求只能被用在与包含这个Ajax请求页面相同的协议、主机与端口上。有些浏览器会允许任意的URL,但是你能不依 靠这个。

Ajax响应回调

Ajax请求默认是异步的,这也就意味着你必须要有回调函数能够处理返回的数据。回调方法 在发起请求的时候传给可选的哈希。复制内容到剪贴板代码:

new Ajax.Request('/some_url',
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
alert("Success! \n\n" + response);
},
onFailure: function(){ alert('Something went wrong...') }
});
这里两个回调函数传给了这个哈希值,分别表示成功与失败的警告。onSuccess和 onFailure根据返回的状态相应的被调用。第一个参数是原生的xmlHttpRequest对象,可以分别使用它的responseText和 responseXML属性。

你可以把两个回调都定义,也可以是一个或者没有,这全由你来定。其它的可以用的回调函数还有:
onUninitialized,
onLoading,
onLoaded,
onInteractive,
onComplete and
onException.


他们都与xmlHttpRequest的传输的某一个状态有关系,除了在分发其它回调时出现异常后引起的onException外。

还 有可以得到的就是onXXX的回调。这里XXX是HTTP的返回状态,象200或者404。需要注意的是,如果用这种方法,你的onSuccess和 onFailure就不会被调用了。因为onXXX有更高的优先级,因为这样做的话,表示你知道你在做什么。

而 onUninitialized、onLoading、 onLoaded和onInteractive这些回调函数并没有完全的被所有的浏览器实现出来。通过我们避免使用它们。

参数与 HTTP方法

你可以将请求参数象一个参数属性一样传递。复制内容到剪贴板代码:
new Ajax.Request('/some_url', {
method: 'get',
parameters: {company: 'example', limit: 12}
});那么参数会以company=example&limit=12的形式发出。

你可以使用GET/POST中的任一种。但是需要注意的是GET的请求不应该导到致数据发生变化
。浏览器很少会缓存POST请求,但是它往往会缓存GET请求。

参数属性的一个重要的应用是用Ajax请求发送一个FORM的内容,Prototype已经给了你一个
帮助的方法,叫做Form.serialize:复制内容到剪贴板代码:
new Ajax.Request('/some_url', {
parameters: $('id_of_form_element').serialize(true)
});如果你需要发送自定义的HTTP请求头,你可以用requestHeaders项来实现。只要作为
一个哈希或者用一个扁平的数组传入名字—值对就可以了。如:['X-Custom-1', 'value',
'X-Custom-2', 'other value'].

如果由于某种原因,你必须POST一个自定义的POST体(没有参数来自于参数项)的请求,有
一个postBody项就是为了这个目的设的。要注意的时,如果你使用postBody,那么你传进来
的所有的参数都不会被发送,因为postBody有更高的优先级。这样做的时候,你应该是清醒
的。

对javascript返回值求值

有时应用程序发送javascript代码作为响应。如果这个返回的Contenty-Type与Javascript
的MIME的类型是一样的,那么Prototype将会自动eval()返回的代码。你如果没有需要的话
,就不用显式的处理这个响应。

还有可能就是这个响应是一个X-JSON的头,那他的内容就会被解析,保存成立个对象并发送
给这些回调函数,当成第二个参数:复制内容到剪贴板代码:
new Ajax.Request('/some_url', { method:'get',
onSuccess: function(transport, json){
alert(json ? Object.inspect(json) : "no JSON object");
}
});可以用这个函数来取比较重要的数据,以避免解析XML返回的损耗。JSON比XML要更快
(当然也更轻)。

全局响应者

这里有一个对象在每次Ajax请求时都会被调用:Ajax.Responders。你可以用他来注册回调
函数在任何一个Ajax.Request状态发生时被触发:复制内容到剪贴板代码:
Ajax.Responders.register({
onCreate: function(){
alert('a request has been initialized!');
},
onComplete: function(){
alert('a request completed');
}
});每个与xmlHttpRequest的传输状态匹配的回调都可以放在这里,再带上一个onCreate。
象这样的全局的跟踪请求在不少方面是很有用的:你可以把它们记录下来以用于调试或者抛
出一个异常处理,来通过用户可能的连接问题。

用Ajax.Updater来动态更新你的页面
开发者经常想通过Ajax请求来接收HTML的片段来更新文档的部分内容。通过Ajax.Request的
onComplete回调是相当容易的,但是如果是用Ajax.Update就会变得更加容易。
假设你的HTML文档中有以下代码:复制内容到剪贴板代码:
<h2>Our fantastic products</h2>
<div id="products">(fetching product list ...)</div>'products'容器是空的,你
想把Ajax的响应的HTML返回值放到这里。没有问题:复制内容到剪贴板代码:
new Ajax.Updater('products', '/some_url', { method: 'get' });这就是全部,没有别
的其它工作。变量与Ajax.Request是一样的。除了第一个位置上多了一个接收元素。
Prototype会通过Element.update()来神奇的把响应更新到容器。

如果你的HTML里还有内含的一些脚本,默认情况下会被过滤掉,为了让你的脚本被执行,你
必须在evalScripts选项上传入真值。

那如果有错误发生,服务器返回一个错误信息而不是HTML,那会怎么样?一般来讲,你不会
想插入错误到用户需要内容的地方。幸运的时,prototype提供了一个方法的解决办法:你
现在在第一个参数里传入以这种形式{ success:'products', failure:'errors' }表示两个
不同的容器的哈希值,而不只是原来那一个。那么成功的话,内容就会被放在success的容
器上,错误就会被放在failure容器上。通过使用这些特性,你的界面就会变得更加用户友
好。

你也可能不想覆盖当前容器中的内容,而是想把新的HTML加在最前或者最后面。很好,你完
全可以这样做。只要把要插入的对象当成是插入参数传递给Ajax就可以了:复制内容到剪贴
板代码:
new Ajax.Updater('products', '/some_url', {
method: 'get',
insertion: Insertion.Top
});Ajax.Updater就会使用给定的对象在容器('products')元素里对返回的HTML执行插入
。漂亮的手法!


用Ajax.PeriodicalUpdater自动执行请求

你发现Ajax.Updater很酷,但是你还想定时的执行他从服务器取数据?Prototype框架也有
这个东西。这个东西就是Ajax.PeriodicalUpdater,它基本上就是定时的运行Ajax.
Updater。复制内容到剪贴板代码:
new Ajax.PeriodicalUpdater('products', '/some_url',
{
method: 'get',
insertion: Insertion.Top,
frequency: 1,
decay: 2
});两个新的参数是频率与衰退。频率就是请求产生的间隔,用秒表示。这里它是1秒,表
示Ajax每分钟请求一次。默认的频率是2秒。我们的用户可能会对应用有这么好的响应程序
感到非常高兴,但是我们的服务器可能性会承受非常大的压力,如果用户一直长时间开着浏
览器的话。这也是为什么有decay这个选项的原因。这是一个因子,通过它,频率会在每次
得到相同的返回内容时被加倍。第一次可能是1秒,然后是2秒,然后是4秒,然后是8这样一
直下去。当然,如果这个服务器一直返回不同的数据,decay就不会起作用。这个因子只在
你的内容基本上不变化了,返回的数据也基本相同时才起作用。

将频率调低可以明显减轻服务器的负担,因为无用的请求次数会减少。你可以用这个因子在
监视服务器的负载,或者你可以传进1来完全关掉它(1是默认值)或者省略掉。

你可能感兴趣的:(prototype)