極客書

Ruby on Rails - AJAX

Ajax代表AsynchronousJavaScript和XML。Ajax不是單一的技術，它是多種技術的組合。Ajax包含以下內容−

  • XHTML for the markup of web pages
  • CSS for the styling
  • Dynamic display and interaction using the DOM
  • Data manipulation and interchange using XML
  • Data retrieval using XMLHttpRequest
  • JavaScript as the glue that meshes all this together

Ajax允許您檢索web頁面的數據，而無需刷新整個頁面的內容。在基本的web架構中，用戶單擊連結或提交表單。表單被提交到伺服器，然後伺服器發送回一個響應。然後在新頁面上爲用戶顯示響應。

當您與Ajax驅動的web頁面交互時，它會在後台加載Ajax引擎。引擎是用JavaScript編寫的，它的職責是與web伺服器通信並向用戶顯示結果。當使用Ajax支持的表單提交數據時，伺服器返回一個HTML片段，其中包含伺服器的響應，並且只顯示新的或更改的數據，而不是刷新整個頁面。

有關AJAX的完整詳細信息，請閱讀我們的AJAX教程

How Rails Implements Ajax

Rails對於如何實現Ajax操作有一個簡單、一致的模型。一旦瀏覽器呈現並顯示了初始web頁面，不同的用戶操作將導致它顯示新的web頁面（與任何傳統web應用程式一樣）或觸發Ajax操作;

  • 某些觸發器觸發−此觸發器可能是用戶單擊按鈕或連結、用戶更改窗體或欄位中的數據，或者只是周期性觸發器（基於計時器）。

  • web客戶端調用伺服器−一個JavaScript方法XMLHttpRequest，將與觸發器相關的數據發送到伺服器上的操作處理程序。數據可能是複選框的ID、輸入欄位中的文本或整個表單。

  • 伺服器正在處理伺服器端操作處理程序（Rails controller action）對數據執行某些操作，並將HTML片段返回給web客戶端。

  • 客戶機接收響應−由Rails自動創建的客戶機端JavaScript接收HTML片段，並使用它更新當前頁面HTML的指定部分，通常是<div>標記的內容。

這些步驟是在Rails應用程式中使用Ajax的最簡單方法，但是只需做一些額外的工作，您就可以讓伺服器響應Ajax請求返回任何類型的數據，並且可以在瀏覽器中創建自定義JavaScript來執行更複雜的交互。

AJAX Example

本例基於scaffold，Destroy concept基於ajax。

在本例中，我們將提供、列出、顯示和創建對ponies表的操作。如果您不了解scaffold技術，那麼我們建議您先閱讀前面的章節，然後在Rails上繼續使用AJAX。

Creating An Application

讓我們從創建一個應用程式開始，它將按如下方式完成&負;

rails new ponies

上面的命令創建了一個應用程式，現在我們需要使用with cd命令調用app目錄。它將進入應用程式目錄，然後我們需要調用scaffold命令。它將按以下步驟完成&負;

rails generate scaffold Pony name:string profession:string

上面的命令生成帶有name和profession列的scaffold。我們需要按照以下命令遷移資料庫

rake db:migrate

現在按如下命令運行Rails應用程式

rails s

現在打開web瀏覽器並調用一個url作爲http://localhost:3000/ponies/new，輸出如下

Ajax

Creating an Ajax

現在用合適的文本編輯器打開app/views/ponies/index.html.erb。使用：remote=>true，：class=>'delete\u pony'更新銷毀行。最後，如下所示。

Ajax

創建一個文件destroy.js.erb，將它放在其他.erb文件旁邊（在app/views/ponies下）。應該是這樣的&負;

Ajax

現在在destroy.js.erb中輸入如下所示的代碼

$('.delete_pony').bind('ajax:success', function() {
   $(this).closest('tr').fadeOut();
});

現在打開位於app/controllers/ponies_controller.rb的控制器文件，並在destroy方法中添加以下代碼，如下所示−

# DELETE /ponies/1
# DELETE /ponies/1.json
def destroy
   @pony = Pony.find(params[:id])
   @pony.destroy
   
   respond_to do |format|
      format.html { redirect_to ponies_url }
      format.json { head :no_content }
      format.js   { render :layout => false }
   end
   
end

最後控制器頁面如圖所示。

Ajax

現在運行一個應用程式，從http://localhost:3000/ponies/new調用輸出，如下所示

Ajax

按下create pony按鈕，將產生如下結果

Ajax

現在點擊後退按鈕，它將顯示所有小馬創建的信息，如圖所示

Ajax

到目前爲止，我們正在研究scaffold，現在點擊destroy按鈕，它會調用一個彈出窗口，如下圖所示，這個彈出窗口基於Ajax工作。

Ajax

如果單擊ok按鈕，它將從小馬中刪除記錄。在這裡我點擊了ok按鈕。最終輸出如下所示;