Ruby on Rails - AJAX

Ajax 代表**非同步** **J**avaScript 和 **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 示例

此示例基於腳手架，Destroy 概念基於 ajax 工作。

在此示例中，我們將對 ponies 表提供列表、顯示和建立操作。如果您不瞭解腳手架技術，我們建議您先閱讀前面的章節，然後再繼續學習 Rails 上的 AJAX。

建立應用程式

讓我們從建立應用程式開始，它將按如下方式完成：-

rails new ponies

上述命令建立了一個應用程式，現在我們需要使用 cd 命令呼叫 app 目錄。它將進入應用程式目錄，然後我們需要呼叫腳手架命令。它將按如下方式完成：-

rails generate scaffold Pony name:string profession:string

上面的命令生成具有名稱和職業列的腳手架。我們需要遷移資料庫，如下面的命令所示

rake db:migrate

現在執行 Rails 應用程式，如下面的命令所示

rails s

現在開啟 Web 瀏覽器並呼叫 url，例如 https://:3000/ponies/new，輸出將如下所示

建立 Ajax

現在使用合適的文字編輯器開啟 app/views/ponies/index.html.erb。使用 :remote => true 和 :class => 'delete_pony' 更新您的 destroy 行。最後，它看起來像這樣。

建立一個檔案 destroy.js.erb，將其放在其他 .erb 檔案旁邊（在 app/views/ponies 下）。它應該如下所示：-

現在在 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

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

現在執行應用程式，從 https://:3000/ponies/new 呼叫的輸出將如下面的影像所示

按下建立小馬按鈕，它將生成如下結果

現在單擊後退按鈕，它將顯示所有建立的小馬資訊，如圖所示

到目前為止，我們一直在使用腳手架，現在單擊銷燬按鈕，它將呼叫一個彈出視窗，如下面的影像所示，彈出視窗基於 Ajax 工作。

如果單擊確定按鈕，它將從 pony 中刪除記錄。這裡我單擊了確定按鈕。最終輸出將如下所示：-

列印頁面