技术开发 频道

Rails系统中的AJAX开发技术简析

五、 使用link_to_remote

  Rails有若干帮助者方法以在你的视图的模板中实现Ajax。一种最简单且很通用的方法就是link_to_remote()。让我们考察一个简单的web页面-它实现询问时间并且有一个链接,用户可以点击这个链接来获得当前的时间。该应用程序经由link_to_remote()使用Ajax以检索时间并且显示它于web页面。

  我的视图模板(index.rhtml)看起来象: 

<html> <head> <title>Ajax Demo</title> <%= javascript_include_tag "prototype" %> </head> <body> <h1>What time is it?/h1> <div id="time_div"> I don’t have the time, but <%= link_to_remote( "点击这里", :update ="time_div", :url =>{ :action => :say_when }) %> and I will look it up. </div> </body> </html>


  上面的模板中有两个很有意思的帮助者方法,以粗体标出。javascript_include_tag()包括了Prototype JavaScript库。所有的Rails Ajax特性都使用这个JavaScript库-它被包含在Rails分发包之中。

  这里的link_to_remote()调用使用了它的最简单的形式,有3个参数:

  1. 要显示的链接文本-在本例中是,"点击这里"。

  2. DOM元素的id,它包含将用行动执行结果进行替换的内容,在本例中是time_div。

  3. 要调用的服务器端行动的URL-在本例中是,一个叫作say_when的行动。



图1.点击链接前

  我的控制器类看起来象:
class DemoController < ApplicationController def index end def say_when render_text "<p>The time is <b>" + DateTime.now.to_s + "</b></p>" end end

 




图2.点击链接后

  这里的索引行动处理器不做任何东西,除了让Rails承认有一个索引行动并生成index.rhtml模板外。这个say_when行动处理器构建一个HTML片断-它包含当前日期和时间。图1和2显示了在点击"点击这里"链接前后索引页面是怎样显示的。

  当用户点击"点击这里"链接时,浏览器构建一个XMLHttpRequest对象,并把它发送到服务器-伴随一个将调用say_when行动处理器的URL-它返回一个包含当前时间的HTML响应片断。客户端JavaScript接收到该响应并且通过它来用一个time_div id替换<div>的内容。

  也有可能插入这个响应,而不是代替现有内容:

%= link_to_remote( "点击这里", :update ="time_div", :url => { :action => :say_when }, :position ="after" ) %


  我增加了一可选的参数:position=>"after"-它让Rails嵌入返回的HTML片断于目标元素(time_div)之后。位置参数能接受值before,after,top,和bottom-其中top和bottom插入到目标元素的内部,而before和after插入到目标元素的外部。

  在任何情况下,既然我添加了位置参数,那么"点击这里"链接就不会消失。因此,我可以不断地点击它并观察新加到页面上的时间。



图3.在位置选项插入新的内容

  这个web页面和被浏览器显示的URL都没有改变。在这样类似的小例子中,即使对一个完整的页面更新也节省不了多少时间。但是,当你有一更复杂的页面而其中仅需要更新很小的一部分时,这种差别将变得非常显著。

0
相关文章