Rails系統中的AJAX開發技術簡析(2)

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的行動。

圖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都沒有改變。在這樣類似的小例子中，即使對一個完整的頁面更新也節省不了多少時間。但是，當你有一更複雜的頁面而其中僅需要更新很小的一部分時，這種差別將變得非常顯著。