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

编程问答

RubyOnRails with Ajax

發(fā)布時間：2024/8/1 编程问答 33 豆豆

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

RubyOnRails with Ajax

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

整理測試：cheungmine

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

1 Ajax 請求的流程：

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

Ajax 解決方案的組件是：

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

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

2 沒有 Ajax 的簡單的 Rails 應(yīng)用程序

啟動Instant Rails。如果你不了解如何使用Rails，請快速瀏覽我的上一篇文章：使用 RubyOnRails 快速搭建LBS網(wǎng)站。
啟動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 鏈接的輔助例程。可以通過執(zhí)行該代碼看到該鏈接。通過鍵入：ruby script/server 啟動網(wǎng)站ajax服務(wù)器，然后將瀏覽器指向 http://localhost:3000/say/show 。結(jié)果顯示如下：

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鏈接跳轉(zhuǎn)到time頁面，如下圖：

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

3 Ajax方案

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

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

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

查看頁面源碼：

清單6：

4 使用其他 Ajax 選項

Ajax 能生成強大的動作，甚至能生成一些預(yù)料不到的動作。例如，用戶也許沒注意到更新的時間鏈接。link_to_remote 選項讓您能夠輕易地將特殊效果應(yīng)用到該條目上，從而讓用戶注意到該結(jié)果。現(xiàn)在將應(yīng)用一些效果。請更改 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鏈接，可以看到特殊的顏色效果。

到目前為止，鏈接是您見到的惟一觸發(fā)器。Ajax 還有許多其他的可用武器，一些由用戶驅(qū)動，而另一些由程序事件驅(qū)動，如時鐘。它是一個像鬧鐘一樣并不需要用戶干預(yù)的東西。可以用 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：

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

正如之前提到的那樣，我正從控制器中直接呈現(xiàn)文本。這一簡化使開始編程變得很容易，但卻不能一直持續(xù)下去。視圖應(yīng)該處理顯示，控制器應(yīng)該在視圖和模型間調(diào)度數(shù)據(jù)。這項設(shè)計技術(shù)叫做模型-視圖-控制器（MVC），它使對視圖或模型的更改更容易分隔開。為使這個應(yīng)用程序符合 MVC，可以讓 Rails 呈現(xiàn)默認視圖，正如預(yù)料的那樣，該內(nèi)容將替代 time_div 之前的內(nèi)容。請按照清單 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>控制器方法設(shè)置一個名為 @time 的實例變量。由于控制器什么都沒明確地呈現(xiàn)出來，Rails 將 time.html.erb 視圖呈現(xiàn)出來。 這種使用模型和呈現(xiàn)一個不含 Ajax 的視圖完全一致。 可以再一次看到， Rails 使開發(fā)人員不必考慮使用 Ajax 和不使用 Ajax 的應(yīng)用程序間的區(qū)別。從傳統(tǒng)的 Web 應(yīng)用程序到 Ajax，該使用模型都驚人地相似。由于使用 Ajax 的成本如此之低，越來越多的 Rails 應(yīng)用程序都開始利用 Ajax。

5 Rails 中 Ajax 的其他用法

Rails Ajax 體驗領(lǐng)域?qū)拸V且內(nèi)容深刻。下面是 Rails 中 Ajax 的一些通常用法：

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

6 轉(zhuǎn)載評語

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

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