ajax|rails
五、 使用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的行动。
 开发技术简析(2)-ajax原理与系统开发">图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都没有改变。在这样类似的小例子中，即使对一个完整的页面更新也节省不了多少时间。但是，当你有一更复杂的页面而其中仅需要更新很小的一部分时，这种差别将变得非常显著。