Rails 2.1 中的 AJAX

Ajax 代表**非同步** **Ja**vaScript 和 **X**ML。Ajax 不是一項單一的技術；它是一套多種技術的組合。Ajax 包含以下內容 -

用於網頁標記的 XHTML
用於樣式的 CSS
使用 DOM 進行動態顯示和互動
使用 XML 進行資料操作和交換
使用 XMLHttpRequest 檢索資料
JavaScript 作為將所有這些整合在一起的粘合劑

Ajax 使您能夠檢索網頁資料，而無需重新整理整個網頁的內容。在基本的 Web 架構中，使用者點選連結或提交表單。表單提交到伺服器，然後伺服器傳送迴響應。然後在新的頁面上向用戶顯示響應。

當您與支援 Ajax 的網頁互動時，它會在後臺載入 Ajax 引擎。該引擎是用 JavaScript 編寫的，其職責是與 Web 伺服器通訊並將結果顯示給使用者。當您使用支援 Ajax 的表單提交資料時，伺服器會返回一個包含伺服器響應的 HTML 片段，並且只顯示新的或更改的資料，而不是重新整理整個頁面。

有關 AJAX 的完整詳細資訊，您可以檢視我們的AJAX 教程。

Rails 如何實現 Ajax

Rails 具有一個簡單一致的模型來實現 Ajax 操作。瀏覽器渲染並顯示初始網頁後，不同的使用者操作會導致它顯示新網頁（就像任何傳統的 Web 應用程式一樣）或觸發 Ajax 操作 -

**某些觸發器觸發** - 此觸發器可能是使用者點選按鈕或連結，使用者更改表單或欄位中的資料，或者只是一個週期性觸發器（基於計時器）。
**Web 客戶端呼叫伺服器** - JavaScript 方法XMLHttpRequest將與觸發器關聯的資料傳送到伺服器上的操作處理程式。資料可能是複選框的 ID、條目欄位中的文字或整個表單
**伺服器進行處理** - 伺服器端操作處理程式（Rails 控制器操作）對資料進行處理並將 HTML 片段返回給 Web 客戶端。
**客戶端接收響應** - Rails 自動建立的客戶端 JavaScript 接收 HTML 片段並使用它來更新當前頁面 HTML 的指定部分，通常是<div>標籤的內容。

這些步驟是在 Rails 應用程式中使用 Ajax 的最簡單方法，但是透過一些額外的操作，您可以讓伺服器返回任何型別的資料以響應 Ajax 請求，並且您可以在瀏覽器中建立自定義 JavaScript 以執行更復雜的互動。

AJAX 示例

在討論 Rails 的其他概念時，我們以圖書館為例。在那裡，我們有一個名為subject的表，並且我們在遷移時添加了一些主題。到目前為止，我們還沒有提供任何在該表中新增和刪除主題的程式。

在本例中，我們將提供主題表的列表、顯示和建立操作。如果您不瞭解前面章節中解釋的圖書館資訊系統，那麼我們建議您先完成前面的章節，然後再繼續學習 Rails 上的 AJAX。

建立控制器

讓我們為主題建立一個控制器。它將按如下方式完成 -

C:\ruby\library> ruby script/generate controller Subject

此命令建立控制器檔案 app/controllers/subject_controller.rb。在任何文字編輯器中開啟此檔案並修改它以包含以下內容 -

class SubjectController < ApplicationController
   layout 'standard'
   def list
   end
   def show
   end
   def create
   end
end

現在，我們將以與前面章節中給出的相同方式討論所有這些函式的實現部分。

列表方法實現

def list
   @subjects = Subject.find(:all)
end

這類似於前面解釋的示例，並將用於列出資料庫中所有可用的主題。

顯示方法實現

def show
   @subject = Subject.find(params[:id])
end

這與前面解釋的示例也類似，並將用於顯示對應於傳遞的 ID 的特定主題。

建立方法實現

def create
   @subject = Subject.new(params[:subject])
      
   if @subject.save
      render :partial => 'subject', :object => @subject
   end
end

這部分有點新。在這裡，我們沒有將頁面重定向到任何其他頁面；我們只是渲染更改的部分而不是整個頁面。

只有在使用部分時才會發生這種情況。我們不編寫完整的檢視檔案，而是將在/app/view/subject目錄中編寫一個部分。我們稍後會看到它。首先，讓我們為其他方法建立檢視檔案。

建立檢視

現在，我們將為所有方法建立檢視檔案，除了我們將為其建立部分的建立方法。

為列表方法建立檢視

在/app/view/subject中建立一個名為list.rhtml的檔案，並將其填充以下程式碼。

<h1>Listing Subjects</h1>
<ul id="subject_list">
   <% @subjects.each do |c| %>
   <li><%= link_to c.name, :action => 'show', :id => c.id %>
   <%= "(#{c.books.count})" -%></li>
   <% end %>
</ul>

在這裡，您正在遍歷@subjects陣列併為陣列中的每個專案輸出一個包含指向其引用的主題的連結的<li>元素。此外，您還在括號內輸出該特定主題中的書籍數量。Rails 的關聯使您可以輕鬆地遍歷關係並獲取此類資訊。

現在，嘗試使用https://:3000/subject/list瀏覽您的主題列表。它將顯示以下螢幕。

為顯示方法建立檢視

在/app/view/subject中建立一個名為show.rhtml的檔案，並將其填充以下程式碼。

<h1><%= @subject.name -%></h1>
<ul>
   <% @subject.books.each do |c| %>
   <%= link_to c.title, :controller => 
      "book", :action => "show",:id => c.id -%>
   <% end %>
</ul>

現在，嘗試點選任何主題，您將找到該主題下所有可用書籍的列表。

為create方法建立檢視

我們不會為create方法建立檢視，因為我們使用的是部分而不是檢視。在下一節中，我們將為建立方法建立一個部分。

新增 Ajax 支援

要在 Rails 應用程式中獲得 Ajax 支援，您需要在佈局中包含必要的 JavaScript 檔案。Rails 與多個庫捆綁在一起，使使用 Ajax 變得非常容易。兩個庫 - prototype 和 script.aculo.us 非常受歡迎。

要將 Prototype 和 script.aculo.us 支援新增到應用程式中，請開啟 app/views/layouts 中的 standard.rhtml 佈局檔案，在</head>標記之前新增以下行，然後儲存更改 -

<%= javascript_include_tag :defaults %>

這在模板中包含了 Prototype 和 script.aculo.us 庫，因此它們的效應可以從任何檢視訪問。

現在，將以下程式碼新增到 app/views/subject/list.rhtml 的底部。

<p id="add_link"><%= link_to_function("Add a Subject",
   "Element.remove('add_link'); Element.show('add_subject')")%></p>
<div id="add_subject" style="display:none;">
   <% form_remote_tag(:url => {:action => 'create'},
      :update => "subject_list", :position => :bottom,
      :html => {:id => 'subject_form'}) do %>
      Name: <%= text_field "subject", "name" %>
   <%= submit_tag 'Add' %>
   <% end %>
</div>

我們使用link_to_function而不是link_to方法，因為link_to_function方法使您能夠利用Prototype JavaScript庫的功能來進行一些簡潔的DOM操作。

第二部分是建立add_subject <div>。請注意，您使用 CSS display 屬性將其可見性預設設定為隱藏。前面的link_to_function將更改此屬性並向用戶顯示<div>以獲取新增新主題所需的輸入。

接下來，您使用form_remote_tag建立 Ajax 表單。此 Rails 助手類似於start_form_tag標記，但此處用於讓 Rails 框架知道它需要為此方法觸發 Ajax 操作。form_remote_tag與start_form_tag一樣接受:action引數。

您還有兩個額外的引數 - :update 和 :position。

:update引數告訴 Rails 的 Ajax 引擎根據其 id 更新哪個元素。在本例中，它是<ul>標記。
:position引數告訴引擎在 DOM 中將新新增的物件放在哪裡。您可以將其設定為位於無序列表的底部(:bottom)或頂部(:top)。

接下來，像以前一樣建立標準表單欄位和提交按鈕，然後使用end_form_tag結束<form>標記。確保內容在語義上正確且是有效的 XHTML。

為建立方法建立部分

我們在新增主題時呼叫create方法，並且在此建立方法內部，我們使用了一個部分。在進行實際操作之前，讓我們實現此部分。

在app/views/subject下，建立一個名為_subject.rhtml的新檔案。請注意，所有部分的名稱開頭都有一個下劃線(_)。

將以下程式碼新增到此檔案中 -

<li id="subject_<%= subject.id %>">
   <%= link_to subject.name, :action => 'show', :id => subject.id %>
   <%= "(#{subject.books.count})" -%>
</li>

您現在已經完成了，並且可以輕鬆地新增多個主題，而無需在新增每個主題後等待頁面重新整理。現在，嘗試使用https://:3000/subject/list瀏覽您的主題列表。它將顯示以下螢幕。嘗試新增一些主題。

當您按下新增按鈕時，主題將新增到所有可用主題的底部，並且您不會感覺到頁面重新整理。

列印頁面