| 2006 年 12 月 26 日 對 Ajax 這種使 Web 頁面更具交互性的技術的大肆宣傳已成過度之勢。Ruby on Rails 框架和 Ajax 的完美集成所產(chǎn)生的力量在一定程度上促成了該框架的繁榮。本文旨在揭示：是什么使 Ajax on Rails 成為如此強大的組合。 跨越邊界 系列之前的兩篇文章（參見 參考資料）全面介紹了 Streamlined，這是 Rails 的輔助框架，該框架有效地利用 scaffolding 來快速生成簡單的、使用 Ajax 的用戶界面。除非您一直與世隔絕，不然您一定會知道 Ajax 是這樣一種編程技術，它使用 XML、JavaScript 和 Web 標準來創(chuàng)建高度交互性的 Web 頁面，正如您在 Google Maps 和大量其他站點上所看到的頁面那樣。許多讀過 Streamlined 文章的讀者都要求我描述一下 Ajax 在 Ruby on Rails 上的運行方式。本文全面介紹了兩個簡單的 Ajax 例子，延著這個思路介紹了 Ruby/Ajax 這一組合如此成功的原因。在本系列的下篇文章中，我將探究 JavaScript 這門編程語言。 Ajax 定義 Ajax 代表 Asynchronous JavaScript + XML。信息架構師 Jesse James Garrett 于 2005 年提出這一術語，該術語用來描述一門在夾縫中生存了近二十年的技術（參見 參考資料）。Ajax 的使用隨即爆增，不論在圖書館、流行網(wǎng)站還是文獻作品中都保持同步增長。 Ajax 重新定義了基本的瀏覽器使用模型。原模型一次呈現(xiàn)一個頁面。Ajax 允許瀏覽器在頁面更新的間隔同服務器進行交流。這樣做的好處是帶來更加豐富的客戶體驗，但卻以增加復雜度為代價。Ajax 是這樣運行的：使用 JavaScript 客戶端庫在客戶機和服務器間發(fā)送 XML。Ajax 開發(fā)人員可以在任何時刻從客戶機發(fā)送異步請求，因而在服務器處理這些請求時，用戶交互可以繼續(xù)進行。下面就是 Ajax 請求的流程： | 關于本系列
在 跨越邊界系列 文章中，作者 Bruce Tate 提出這樣一種觀點，即當今的 Java 程序員們可以通過學習其他方法和語言很好地武裝自己。自從 Java 技術明顯成為所有開發(fā)項目最好的選擇以來，編程前景已經(jīng)發(fā)生了改變。其他框架影響著 Java 框架的構建方式，從其他語言學到的概念也可以影響 Java 編程。您編寫的 Python（或 Ruby、Smalltalk 等語言）代碼可以改變編寫 Java 代碼的方式。 本系列介紹與 Java 開發(fā)完全不同的編程概念和技術，但是這些概念和技術也可以直接應用于 Java 開發(fā)。在某些情況下，需要集成這些技術來利用它們。在其他情況下，可以直接應用概念。具體的工具并不重要，重要的是其他語言和框架可以影響 Java 社區(qū)中的開發(fā)人員、框架，甚至是基本方式。 | | - 一個事件（如用戶的鼠標點擊或編程計時器的觸發(fā)）啟動一個 JavaScript 函數(shù)。
- JavaScript 函數(shù)為部分頁面而不是整個頁面創(chuàng)建一個請求。JavaScript 隨后通過 HTTP 將該請求發(fā)送到 Web 服務器。
- 此 HTTP 請求調(diào)用服務器上的一個腳本，如 Rails 控制器方法或 Java? servlet。
- 該服務器腳本創(chuàng)建一個 XML 文檔并將其返回給服務器。
- 在接收結(jié)果的同時，客戶機異步處理創(chuàng)建、更新或刪除部分 Web 頁面，如列表元素、
div 標記或圖像。 所有 Ajax 應用程序都使用類似這種順序的一種方法。例如，某個應用程序允許將字典中的單詞與其定義一起保存。舊式的應用程序會強迫您用一個新的頁面視圖來編輯定義。Ajax 允許原地編輯，它用一個條目字段替換定義文本，然后用更新的定義來替換該表單。 Ajax 解決方案的組件是： - 客戶端 JavaScript 庫，用來管理異步請求。
- 服務器端 JavaScript 庫，用來處理進來的請求，并構造一個 XML 響應。
- 客戶端 JavaScript 庫，用來處理生成的 XML。
- 稱作文檔對象模型（DOM）的庫，允許對現(xiàn)有 Web 頁面進行更新。
- 輔助例程，用來處理不可避免的 UI 和集成問題。
事件/請求/響應/替換模型是大多數(shù) Ajax 應用程序的核心模型，但如果您剛接觸 Ajax，您一定會對 Ajax 中大量的可用庫和這些庫之間巨大的差別感到驚訝不已。該領域中有許多 Ajax 框架，它們的功能常常重疊且沒有確定的勝出者。單就 Java 市場而言，有許多庫可用，包括 Echo、Dojo、DWR、Google Web Toolkit（GWT）、Java Web Parts、AjaxAnywhere、AjaxTags、Scriptaculous 和 Prototype。這些框架使用截然不同的方法。一些框架試圖通過生成 JavaScript 代碼的 Java 庫來隱藏 JavaScript，如 GWT。另一些框架致力于使 JavaScript 更易使用。一些相當?shù)厝?，?Dom4J，而另一些則僅著力于解決好一個小問題。由于有許多流行的新技術，解決方案之間互相割據(jù)的場面有時會很難駕馭，調(diào)試工具、UI 實踐（如 Back 按鈕）和明智的開發(fā)實踐的實現(xiàn)非常緩慢。Java 平臺上的 Ajax 庫的力量源自其多樣性。這也正是其缺點所在，因為多樣性導致了難以決斷、集成方面的顧慮和復雜性。 有了 Ruby on Rails，開發(fā)體驗就顯著不同了，這是由于兩個原因。首先，Ruby on Rails 有一個核心的 Web 開發(fā)平臺：Ruby on Rails。其次，到目前為止，大多數(shù)在 Rails 上的 Ajax 開發(fā)體驗都圍繞著兩個核心框架：Scriptaculous 和 Prototype（參見 參考資料）。Rails 方法使用運行時代碼生成和定制標記，這使您不必理會復雜的 JavaScript。是時候自己來實踐了。如果您想要在學習本文的過程中編寫代碼的話，需要下載 Rails，也要下載必要的 Ajax 框架（參見 參考資料）。打開您的 Rails 環(huán)境，跟我一起來吧。
沒有 Ajax 的簡單的 Rails 應用程序 要使用 Rails 和 Ajax，就要創(chuàng)建一個空項目，并生成一個有兩個方法的控制器。一個控制器控制簡單的頁面，另一個控制器建立一個 Ajax 響應。鍵入下列代碼： rails ajax cd ajax script/generate controller ajax show time |
第一行和第二行代碼生成一個 Rails 項目，并切換到新目錄。第三行代碼生成一個叫做 ajax 的控制器，并查看兩個動作：show 和 time。清單 1 顯示了該控制器的代碼：
清單 1. 有兩個空方法的控制器
class AjaxController < ApplicationController def show end def time end end |
首先在不使用 Ajax 的情況下構建兩個簡單視圖，然后用 Ajax 將這兩個視圖綁定到一起。編輯 app/views/ajax 中的 show.rhtml 視圖，使它和清單 2 類似：
清單 2. 簡單視圖
<h1>Ajax show</h1> Click this link to show the current <%= link_to "time", :action => "time" %>. |
清單 1 和清單 2 中的代碼不支持 Ajax，但我還是會仔細分析該代碼。首先，看清單 1 中的控制器。兩個空的控制器方法處理進來的 HTTP 請求。如果不明確地呈現(xiàn)一個視圖（使用 render 方法），Rails 會呈現(xiàn)和該方法同名的視圖。由于 Scriptaculous 和 Prototype 庫也使用 HTTP，Rails 不需要對標準 HTTP 方法和 Ajax 方法進行區(qū)分。 現(xiàn)在將注意力轉(zhuǎn)移到清單 2 中的視圖。大多數(shù)代碼都是簡單的 HTML 代碼，只有第二行的 link_to 輔助例程例外：<%= link_to "time", :action => "time" %>。 正如在跨越邊界 之前的文章中所看到的那樣，Ruby 用其表達式的值替代 <%=h 和 %> 之間的代碼。在這個示例中，link-to 方法是一個生成簡單 HTML 鏈接的輔助例程?？梢酝ㄟ^執(zhí)行該代碼看到該鏈接。通過鍵入 script/server 啟動服務器，然后將瀏覽器指向 http://localhost:3000/ajax/show 。您將看到圖 1 中的視圖：
圖 1. 不涉及 Ajax 的簡單用戶界面
在瀏覽器中，單擊菜單項來查看頁面源代碼（在 Internet Explorer 為 View > Source ，在 Firefox 中為 View > Page Source）。您將看到清單 3 中的代碼：
清單 3. 由 show.rhtml 生成的視圖
<h1>Ajax show</h1> Click this link to show the current <a href="/ajax/time">time</a>. |
請注意清單 3 中的鏈接代碼。該模板讓 Rails 用戶不必面對冗長且容易出錯的 HTML 句法。（Ajax 代碼也是這樣運行：使用輔助方法插入 JavaScript 代碼，該代碼替您管理遠程請求和 HTML 替換。）如果單擊該鏈接，將看到針對 time 方法的默認視圖，但我還沒有實現(xiàn)它。為加以補救，請用清單 4 中的代碼替換 app/controllers/ajax_controller.rb 中的 time 方法。為保持簡單，我直接從控制器中呈現(xiàn)視圖。稍后，我會把一切處理好并呈現(xiàn)視圖。
清單 4. 呈現(xiàn)時間
def time render_text "The current time is #{Time.now.to_s}" end |
現(xiàn)在，當單擊該鏈接時，會得到圖 2 中的視圖：
圖 2. 不涉及 Ajax 的視圖
很快就能看到這個 UI 的一個問題。這兩個視圖不從屬于單獨的頁面。該應用程序表示一個單一概念：單擊一個鏈接來顯示時間。為反復更新時間，每次都需要單擊該鏈接和 Back 按鈕。將該鏈接和時間放到相同的頁面中也許可以解決這個問題。但如果該頁面變得非常大或非常復雜，重新顯示整個頁面會很浪費，也會很復雜。
添加 Ajax Ajax 讓您可以只更新 Web 頁面的一個片段。Rails 庫為您處理大部分的工作。要將 Ajax 添加到這個應用程序中，需要以下四個步驟： - 配置 Rails 以使用 JavaScript。
- 更改時間鏈接來提交 JavaScript Ajax 請求，而不是僅呈現(xiàn)一個 HTML 鏈接。
- 指定要更新的 HTML 片斷。
- 為更新的 HTML 內(nèi)容準備一個位置。
- 構建一個控制器方法，或者一個視圖來呈現(xiàn) Ajax 響應。
首先，更改 app/views/ajax/show.rhtml 中的代碼，使其與清單 5 類似：
清單 5. 更改顯示視圖來使用 Ajax
<%= 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。您一會兒就能看到這個鏈接的作用。請注意下列三個參數(shù)： - 鏈接文本：從非 Ajax 的例子中照搬過來。
:update 參數(shù)。如果您以前沒見過這種語法，那么就把 :update => ‘time_div‘ 當作是一個已命名的參數(shù)，其中的 :update 是名稱，update_div 是值。此代碼告訴 Prototype 庫：此鏈接中的結(jié)果將用 time_div 這一名稱更新 HTML 組件。
- 代碼
:url => {:action => "time"} 指定該鏈接將調(diào)用的 URL。:url 從一個哈希映射表中獲取值。在實際中，該哈希映射表只有一個針對控制器動作的元素：:time。理論上，該 URL 也可以包含控制器的名稱和控制器需要的任何可選參數(shù)。 在清單 5 中，還可以看到空的 div，Rails 將用當前時間更新它。 在瀏覽器中，裝載頁面 http://localhost:3000/ajax/show。單擊該鏈接，將看到圖 3 中的結(jié)果。
圖 3. 含 Ajax 的視圖
為了很好地了解這里發(fā)生的情況，請查看該 Web 頁面的源代碼。清單 6 顯示了該代碼：
清單 6. 顯示模板的結(jié)果（在啟用 Ajax 的情況下）
<script src="/javascripts/prototype.js?1159113688" type="text/javascript"></script> <script src="/javascripts/effects.js?1159113688" type="text/javascript"></script> <script src="/javascripts/dragdrop.js?1159113688" type="text/javascript"></script> <script src="/javascripts/controls.js?1159113688" type="text/javascript"></script> <script src="/javascripts/application.js?1159113688" type="text/javascript"></script> <h1>Ajax show</h1> Click this link to show the current <a href="#" onclick="new Ajax.Updater( ‘time_div‘, ‘/ajax/time‘, {asynchronous:true, evalScripts:true}); return false;">time</a>.<br/> <div id=‘time_div‘> </div> |
請注意包含的 JavaScript 列表。Rails 輔助方法（include_javascript_tags :defaults）為您構建了此列表。接下來，看到一個用來構建新的 Ajax.Updater 對象的 JavaScript 函數(shù)調(diào)用，而不是一個 HTML 鏈接。正如您所料想的那樣，名為 asynchronous 的參數(shù)被設置為 true。最后，在 HTML div 標記中看不到值，這是由于初始頁面在那里沒有值。
使用其他 Ajax 選項 Ajax 能生成強大的動作，甚至能生成一些預料不到的動作。例如，用戶也許沒注意到更新的時間鏈接。link_to_remote 選項讓您能夠輕易地將特殊效果應用到該條目上，從而讓用戶注意到該結(jié)果?，F(xiàn)在將應用一些效果。請更改 show.rhtml 中的 link_to_remote 輔助方法，使它與清單 7 類似：
清單 7. 添加效果
<%= link_to_remote "time", :update => ‘time_div‘, :url => {:action => "time"}, :complete => "new Effect.Highlight(‘time_div‘)" %> |
最佳 Ajax 效果會使您的更改獲得臨時的關注，但卻不會永久持續(xù)。您的目標應該是把更改提示給用戶，而不打斷他們的工作流。像這種用黃色來弱化強調(diào)的技術，或用滑入內(nèi)容或淡出內(nèi)容來讓用戶注意的技術都不是長久之計。 到目前為止，鏈接是您見到的惟一觸發(fā)器。Ajax 還有許多其他的可用武器，一些由用戶驅(qū)動，而另一些由程序事件驅(qū)動，如時鐘。它是一個像鬧鐘一樣并不需要用戶干預的東西?？梢杂?Ajax 的 periodically_call_remote 方法定期更新時鐘。請按照清單 8 編輯 show.rhtml 中的代碼：
清單 8. 定期調(diào)用遠程方法
<%= 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> |
圖 4 顯示了結(jié)果：不需要用戶干預，每隔一秒鐘進行更新的時鐘：
圖 4. 用 Ajax 定期更新的時鐘
盡管 Rails 視圖中的代碼和不含 Ajax 的版本相似，但背后的代碼卻很不同：此版本使用 JavaScript 代替了 HTML?？梢酝ㄟ^在瀏覽器中查看源代碼看到清單 9 中的代碼：
清單 9. periodically_call_remote 的源代碼
<script src="/javascripts/prototype.js?1159113688" type="text/javascript"></script> <script src="/javascripts/effects.js?1159113688" type="text/javascript"></script> <script src="/javascripts/dragdrop.js?1159113688" type="text/javascript"></script> <script src="/javascripts/controls.js?1159113688" type="text/javascript"></script> <script src="/javascripts/application.js?1159113688" type="text/javascript"></script> <h1>Ajax show</h1> <script type="text/javascript"> //<![CDATA[ new PeriodicalExecuter(function() {new Ajax.Updater( ‘time_div‘, ‘/ajax/time‘, {asynchronous:true, evalScripts:true})}, 1.0) //]]> </script> <div id=‘time_div‘> </div> |
請一定注意這里發(fā)生的情況。您正在一個更高層的抽象之上有效地工作，而不是使用小塊的自定義 JavaScript 片段，Ruby on Rails 模板系統(tǒng)使使用模型變得相當自然。 正如之前提到的那樣，我正從控制器中直接呈現(xiàn)文本。這一簡化使開始編程變得很容易，但卻不能一直持續(xù)下去。視圖應該處理顯示，控制器應該在視圖和模型間調(diào)度數(shù)據(jù)。這項設計技術叫做模型-視圖-控制器（MVC），它使對視圖或模型的更改更容易分隔開。為使這個應用程序符合 MVC，可以讓 Rails 呈現(xiàn)默認視圖，正如預料的那樣，該內(nèi)容將替代 time-div 之前的內(nèi)容。請按照清單 10 更改 app/controllers/ajax_controller.rb 中的 time 方法：
清單 10. 重構
def time @time = Time.now end |
請按照清單 11 更改 app/views/ajax/time.rhtml 中的視圖：
清單 11. 使用視圖呈現(xiàn) Ajax 內(nèi)容
<p>The current time is <%=h @time %></p> |
控制器方法設置一個名為 @time 的實例變量。由于控制器什么都沒明確地呈現(xiàn)出來，Rails 將 time.rhtml 視圖呈現(xiàn)出來。這種使用模型和呈現(xiàn)一個不含 Ajax 的視圖完全一致。 可以再一次看到，Rails 使開發(fā)人員不必考慮使用 Ajax 和不使用 Ajax 的應用程序間的區(qū)別。從傳統(tǒng)的 Web 應用程序到 Ajax，該使用模型都驚人地相似。由于使用 Ajax 的成本如此之低，越來越多的 Rails 應用程序都開始利用 Ajax。
Rails 中 Ajax 的其他用法 Rails Ajax 體驗領域?qū)拸V且內(nèi)容深刻 —— 我無法用單篇文章甚至一系列文章來概括其深刻的內(nèi)容。我只能指出 Rails Ajax 支持可以解決其他一些問題。下面是 Rails 中 Ajax 的一些通常用法： - 提交遠程表單。 除了必須異步提交以外，Rails 中的 Ajax 表單和傳統(tǒng)表單的執(zhí)行方式完全一樣。這意味著 Rails 中的
Forms 輔助標記讓您必須指定一個要更新的 URL，執(zhí)行可視化的效果，正如使用 link_to_remote 一樣。正如 link-to-remote 擴展了 link_to 輔助方法一樣，Rails submit_to_remote 擴展了一個 Rails submit 輔助方法。
- 執(zhí)行復雜腳本。 Rails 開發(fā)人員常常需要執(zhí)行復雜的腳本，遠不止更新單個
div 和執(zhí)行效果那么簡單。為此，Rails 提供 JavaScript 模板。用 JavaScript 模板，可以將任意 JavaScript 腳本作為 Ajax 請求的結(jié)果來執(zhí)行。這些模板的一些常見用法（叫作 RJS 模板）為更新多個 div、處理表單驗證和管理 Ajax 錯誤場景。
- 拼寫補全。 您一定想基于數(shù)據(jù)庫中的條目為您的用戶提供拼寫補全服務。例如，如果用戶鍵入
Bru，我想讓我的應用程序注意到數(shù)據(jù)庫中 “Bruce Tate” 這個值。可以使用 Ajax 定期檢查字段的更改，并根據(jù)用戶鍵入的內(nèi)容發(fā)送拼寫補全建議。
- 動態(tài)構建復雜表單。 在業(yè)務領域里，常常需要查看部分已完成表單，然后才能知道用戶應該完成哪個字段。例如，如果用戶擁有一些特定種類的收入或費用，那么 1040EZ 納稅單是無效的。可以在這個過程中用 Ajax 更新表單。
- 拖放。 可以用 Rails 快速實現(xiàn)拖放支持，這比大多數(shù)其他框架要省力得多。
結(jié)束語 Ajax 并不是沒有問題。當 Ajax 運行良好時，整個體驗會是激動人心的。但當運行不順利時，您也許會發(fā)現(xiàn)對其進行調(diào)試是一個全新的領域，調(diào)試技術和工具還沒有其他語言中那么成熟。Ruby on Rails 的確有一個核心優(yōu)勢：簡單。Rails 包裝器（加上很棒的社區(qū)支持）使得進入這一新環(huán)境變得簡單，而且最初的投資非常低。但 Rails 支持也僅限于此。這兩個框架還沒有覆蓋 Ajax 的全部內(nèi)容，無法滿足每個用戶的需求。 Java 語言有更多的 Ajax 框架和方法可供選擇?？梢哉业礁哽`活性的，也可以找到具有很棒的支持基礎的。但靈活性是要付出代價的。您不僅需要一個強大的 Ajax 框架，也需要一個 Web 開發(fā)框架。例如，集成 JSF 框架和集成 Struts 是兩種截然不同的體驗。新技術通常追求簡單。對于那些在 UI 中需要 Ajax 的出色特性，卻又不需要由 Java 提供的高級企業(yè)集成特性的問題，Ajax on Rails 也許正合適。下一次，我將更深入地介紹 JavaScript。請繼續(xù)關注跨越邊界。
參考資料 學習
獲得產(chǎn)品和技術
討論
關于作者 | | | | Bruce Tate 居住在德克薩斯州的首府奧斯汀，他是一位父親，同時也是山地車手和皮艇手。他是三本 Java 暢銷書的作者，包括榮獲 Jolt 大獎的 Better, Faster, Lighter Java。最近他又出版了 Beyond Java. 一書。他在 IBM 工作了 13 年，現(xiàn)在是 RapidRed 顧問公司 的創(chuàng)始人，在這里他潛心研究基于 Java 技術和 Ruby on Rails 的輕量級開發(fā)策略和架構。 | | 
