當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

RubyOnRails with Ajax

發布時間：2024/8/1 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 RubyOnRails with Ajax 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

RubyOnRails with Ajax

原文出處：跨越邊界: Ajax on Rails

整理測試：cheungmine

Ajax 即 Asynchronous JavaScript XML，重新定義了基本的瀏覽器使用模型。原模型一次呈現一個頁面。Ajax 允許瀏覽器在頁面更新的間隔同服務器進行交流。這樣做的好處是帶來更加豐富的客戶體驗。Ajax 是這樣運行的：使用 JavaScript 客戶端庫在客戶機和服務器間發送 XML。Ajax 開發人員可以在任何時刻從客戶機發送異步請求，因而在服務器處理這些請求時，用戶交互可以繼續進行。

1 Ajax 請求的流程：

1）一個事件（如用戶的鼠標點擊或編程計時器的觸發）啟動一個 JavaScript 函數。
2）JavaScript 函數為部分頁面而不是整個頁面創建一個請求。JavaScript 隨后通過 HTTP 將該請求發送到 Web 服務器。
3）此 HTTP 請求調用服務器上的一個腳本，如 Rails 控制器方法或 Java servlet。
4）該服務器腳本創建一個 XML 文檔并將其返回給服務器。
5）在接收結果的同時，客戶機異步處理創建、更新或刪除部分 Web 頁面，如列表元素、div 標記或圖像。

Ajax 解決方案的組件是：

1）客戶端 JavaScript 庫，用來管理異步請求。
2）服務器端 JavaScript 庫，用來處理進來的請求，并構造一個 XML 響應。
3）客戶端 JavaScript 庫，用來處理生成的 XML。
4）文檔對象模型（DOM）的庫，允許對現有 Web 頁面進行更新。
5）輔助例程，用來處理不可避免的 UI 和集成問題。

下面以一個實際的例子來說明Ajax的用法和必要性：

2 沒有 Ajax 的簡單的 Rails 應用程序

啟動Instant Rails。如果你不了解如何使用Rails，請快速瀏覽我的上一篇文章：使用 RubyOnRails 快速搭建LBS網站。
啟動Ruby Console Window，輸入下面的命令：

清單1：

rails ajax
cd ajax
ruby script/generate controller Say show time
ruby script/server

第一行和第二行代碼生成一個 Rails 項目，并切換到新目錄。第三行代碼生成一個叫做 Say 的控制器，并增加兩個動作：show 和 time。下面顯示該控制器的代碼：

清單2：

#say_controller.rb class SayController < ApplicationControllerdef showenddef timerender:text=>"The current time is #{Time.now}"end end找到...\rails_apps\ajax\app\views\say\show.html.erb，修改如下：

清單3：

<h1>Ajax show</h1> Click this link to show the current <%= link_to "time", :action => "time" %>.Ruby 用其表達式的值替代 <%=h 和 %> 之間的代碼。在這個示例中，link_to 方法是一個生成簡單 HTML 鏈接的輔助例程。可以通過執行該代碼看到該鏈接。通過鍵入：ruby script/server 啟動網站ajax服務器，然后將瀏覽器指向 http://localhost:3000/say/show 。結果顯示如下：

Ajax show

Click this link to show the current time.

在瀏覽器中，單擊菜單項來查看頁面源代碼：

清單4：

<h1>Ajax show</h1> Click this link to show the current <a href="/say/time">time</a>.

點擊time鏈接跳轉到time頁面，如下圖：

很快就能看到這個 UI 的一個問題。這兩個視圖show和time不從屬于單獨的頁面。為反復更新時間，每次都需要單擊該鏈接和 Back 按鈕。將該鏈接和時間放到相同的頁面中也許可以解決這個問題。但如果該頁面變得非常大或非常復雜，重新顯示整個頁面會很浪費，也會很復雜。下面的采用Ajax方案來重新解決這個問題。

3 Ajax方案

Ajax 讓您可以只更新 Web 頁面的一個片段。Rails 庫為您處理大部分的工作。要將 Ajax 添加到這個應用程序中，需要以下四個步驟：

1）配置 Rails 以使用 JavaScript。
2）更改時間鏈接來提交 JavaScript Ajax 請求，而不是僅呈現一個 HTML 鏈接。
3）定要更新的 HTML 片斷。
4）為更新的 HTML 內容準備一個位置。
5）構建一個控制器方法，或者一個視圖來呈現 Ajax 響應。

將...\rails_apps\ajax\app\views\say\show.html.erb，修改如下：

清單5：

<%= javascript_include_tag :defaults %> <h1>Ajax show</h1> Click this link to show the current <%= link_to_remote "time", :update => 'time_div', :url => {:action => "time"} %>.<br/> <div id='time_div'> </div> 首先，為處理配置，簡單地將必要的 JavaScript 庫直接包含在視圖中。通常，還會有更多的視圖，為避免重復，可以將 JavaScript 文件包含在一個公共的 Rails 組件中，如 Rails 布局。本例只有一個視圖，所以一切從簡。
其次，改變了鏈接標記來使用 link_to_remote。您一會兒就能看到這個鏈接的作用。請注意下列三個參數：
1）鏈接文本：從非 Ajax 的例子中照搬過來。
2）:update 參數。如果您以前沒見過這種語法，那么就把 :update => 'time_div' 當作是一個已命名的參數，其中的 :update 是名稱，update_div 是值。此代碼告訴 Prototype 庫：此鏈接中的結果將用 time_div 這一名稱更新 HTML 組件。
3）代碼 :url => {:action => "time"} 指定該鏈接將調用的 URL。:url 從一個哈希映射表中獲取值。在實際中，該哈希映射表只有一個針對控制器動作的元素：:time。理論上，該 URL 也可以包含控制器的名稱和控制器需要的任何可選參數。
還可以看到空的 div，Rails 將用當前時間更新它。在瀏覽器中，裝載頁面 http://localhost:3000/say/show。單擊該time鏈接，注意到當前頁面的地址并未更改：

查看頁面源碼：

清單6：

4 使用其他 Ajax 選項

Ajax 能生成強大的動作，甚至能生成一些預料不到的動作。例如，用戶也許沒注意到更新的時間鏈接。link_to_remote 選項讓您能夠輕易地將特殊效果應用到該條目上，從而讓用戶注意到該結果。現在將應用一些效果。請更改 show.html.erb 中的 link_to_remote 輔助方法，更改后的文件如下：

清單7：

<%= javascript_include_tag :defaults %> <h1>Ajax show</h1> Click this link to show the current <%= link_to_remote "time", :update => 'time_div', :url => {:action => "time"},:complete => "new Effect.Highlight('time_div')" %>.<br/> <div id='time_div'> </div>

在瀏覽器中，裝載頁面 http://localhost:3000/say/show。單擊該time鏈接，可以看到特殊的顏色效果。

到目前為止，鏈接是您見到的惟一觸發器。Ajax 還有許多其他的可用武器，一些由用戶驅動，而另一些由程序事件驅動，如時鐘。它是一個像鬧鐘一樣并不需要用戶干預的東西。可以用 Ajax 的 periodically_call_remote 方法定期更新時鐘。請更改 show.html.erb 代碼如下：

清單8：

<%= javascript_include_tag :defaults %> <h1>Ajax show</h1> <%= periodically_call_remote :update => 'time_div', :url => {:action => "time"},:frequency => 1.0 %> <div id='time_div'> </div>在瀏覽器中，裝載頁面 http://localhost:3000/say/show。可以看到時間自動更新了。盡管 Rails 視圖中的代碼和不含 Ajax 的版本相似，但背后的代碼卻很不同：此版本使用 JavaScript 代替了 HTML。可以通過在瀏覽器中查看源代碼：

清單9：

請一定注意這里發生的情況。您正在一個更高層的抽象之上有效地工作，而不是使用小塊的自定義 JavaScript 片段，Ruby on Rails 模板系統使使用模型變得相當自然。

正如之前提到的那樣，我正從控制器中直接呈現文本。這一簡化使開始編程變得很容易，但卻不能一直持續下去。視圖應該處理顯示，控制器應該在視圖和模型間調度數據。這項設計技術叫做模型-視圖-控制器（MVC），它使對視圖或模型的更改更容易分隔開。為使這個應用程序符合 MVC，可以讓 Rails 呈現默認視圖，正如預料的那樣，該內容將替代 time_div 之前的內容。請按照清單 10 更改 say_controller.rb 中的 time 方法（對比清單2）：

清單 10：

def time@time = Time.now end

請按照清單 11 更改 ...\rails_apps\ajax\app\views\say\time.html.erb的代碼：

清單 11：

<p>The current time is <%=h @time %></p>控制器方法設置一個名為 @time 的實例變量。由于控制器什么都沒明確地呈現出來，Rails 將 time.html.erb 視圖呈現出來。 這種使用模型和呈現一個不含 Ajax 的視圖完全一致。 可以再一次看到， Rails 使開發人員不必考慮使用 Ajax 和不使用 Ajax 的應用程序間的區別。從傳統的 Web 應用程序到 Ajax，該使用模型都驚人地相似。由于使用 Ajax 的成本如此之低，越來越多的 Rails 應用程序都開始利用 Ajax。

5 Rails 中 Ajax 的其他用法

Rails Ajax 體驗領域寬廣且內容深刻。下面是 Rails 中 Ajax 的一些通常用法：

1）提交遠程表單。除了必須異步提交以外，Rails 中的 Ajax 表單和傳統表單的執行方式完全一樣。這意味著 Rails 中的 Forms 輔助標記讓您必須指定一個要更新的 URL，執行可視化的效果，正如使用 link_to_remote 一樣。正如 link-to-remote 擴展了 link_to 輔助方法一樣，Rails submit_to_remote 擴展了一個 Rails submit 輔助方法。
2）執行復雜腳本。 Rails 開發人員常常需要執行復雜的腳本，遠不止更新單個 div 和執行效果那么簡單。為此，Rails 提供 JavaScript 模板。用 JavaScript 模板，可以將任意 JavaScript 腳本作為 Ajax 請求的結果來執行。這些模板的一些常見用法（叫作 RJS 模板）為更新多個 div、處理表單驗證和管理 Ajax 錯誤場景。
3）拼寫補全。您一定想基于數據庫中的條目為您的用戶提供拼寫補全服務。例如，如果用戶鍵入 Bru，我想讓我的應用程序注意到數據庫中 “Bruce Tate” 這個值。可以使用 Ajax 定期檢查字段的更改，并根據用戶鍵入的內容發送拼寫補全建議。
4）動態構建復雜表單。在業務領域里，常常需要查看部分已完成表單，然后才能知道用戶應該完成哪個字段。例如，如果用戶擁有一些特定種類的收入或費用，那么 1040EZ 納稅單是無效的。可以在這個過程中用 Ajax 更新表單。
5）拖放。可以用 Rails 快速實現拖放支持，這比大多數其他框架要省力得多。

6 轉載評語

如此精彩的文章，不但用最簡單的示例清晰地說明了Ajax在Rails中是如何被使用的，原理和背后發生的邏輯。同時也讓我們明白了Rails的MVC框架帶來的簡潔和便利。雖然是轉載，但原文中的全部代碼都經過我親自測試，去掉了一些舊版本的語法錯誤。請支持原作者，點擊：

http://www.ibm.com/developerworks/cn/java/j-cb12056/index.html#resources

總結

以上是生活随笔為你收集整理的RubyOnRails with Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【macOS】Macbook修改键盘映射
下一篇：电脑总是弹出广告怎么办？