Ruby on Rails-AJAX

Ajaxは* A synchronous J * avaScriptおよび* X * MLの略です。 Ajaxは単一のテクノロジーではありません。それはいくつかのテクノロジーのスイートです。 Ajaxには次のものが組み込まれています-

Webページのマークアップ用のXHTML
スタイリング用のCSS
DOMを使用した動的な表示と対話
XMLを使用したデータの操作と交換
XMLHttpRequestを使用したデータ取得
これらすべてを結び付ける接着剤としてのJavaScript

Ajaxを使用すると、ページ全体のコンテンツを更新することなく、Webページのデータを取得できます。基本的なWebアーキテクチャでは、ユーザーはリンクをクリックするか、フォームを送信します。フォームがサーバーに送信され、サーバーが応答を返します。その後、新しいページにユーザーの応答が表示されます。

Ajaxを使用したWebページを操作すると、バックグラウンドでAjaxエンジンがロードされます。エンジンはJavaScriptで記述されており、Webサーバーと通信し、結果をユーザーに表示することがその役割です。 Ajaxを使用したフォームを使用してデータを送信すると、サーバーはサーバーの応答を含むHTMLフラグメントを返し、ページ全体を更新するのではなく、新規または変更されたデータのみを表示します。

AJAXの詳細については、リンク：/ajax/index [AJAXチュートリアル]を参照してください。

RailsによるAjaxの実装方法

Railsには、Ajax操作を実装するためのシンプルで一貫したモデルがあります。ブラウザが最初のWebページをレンダリングして表示すると、さまざまなユーザーアクションによって、新しいWebページ（従来のWebアプリケーションなど）が表示されるか、Ajax操作がトリガーされます-

一部のトリガーが起動します-このトリガーは、ユーザーがボタンまたはリンクをクリックする、ユーザーがフォームまたはフィールドのデータを変更する、または定期的なトリガー（タイマーに基づく）である可能性があります。
* Webクライアントはサーバーを呼び出します*-JavaScriptメソッド_XMLHttpRequest_は、トリガーに関連付けられたデータをサーバー上のアクションハンドラーに送信します。データは、チェックボックスのID、入力フィールドのテキスト、またはフォーム全体です。
サーバーは処理を行います-サーバー側のアクションハンドラー（Railsコントローラーアクション）-データを処理し、WebクライアントにHTMLフラグメントを返します。
クライアントは応答を受け取ります-Railsが自動的に作成するクライアント側のJavaScriptは、HTMLフラグメントを受け取り、それを使用して現在のページのHTMLの指定された部分、多くの場合<div>タグのコンテンツを更新します。

これらの手順はRailsアプリケーションでAjaxを使用する最も簡単な方法ですが、少し余分な作業を行うことで、サーバーにAjaxリクエストへの応答としてあらゆる種類のデータを返させることができます。関与する相互作用。

AJAXの例

この例はscaffoldに基づいて機能し、Destroyコンセプトはajaxに基づいて機能します。

この例では、ポニーテーブルの操作を提供、一覧表示、表示、および作成します。 scaffoldテクノロジーを理解していない場合は、まず前の章を読んでから、AJAX on Railsに進むことをお勧めします。

アプリケーションを作成する

私たちはアプリケーションの作成から始めましょうそれは次のように行われます-

rails new ponies

上記のコマンドはアプリケーションを作成します。今度はcdコマンドを使用してappディレクトリを呼び出す必要があります。アプリケーションのディレクトリに入り、scaffoldコマンドを呼び出す必要があります。それは次のように行われます-

rails generate scaffold Pony name:string profession:string

上記のコマンドは、名前と職業列を持つ足場を生成します。次のコマンドでデータベースを移行する必要があります

rake db:migrate

次のコマンドでRailsアプリケーションを実行します

rails s

Webブラウザを開き、URLをhttp：//localhost：3000/ponies/newとして呼び出します。出力は次のようになります

Ajax

Ajaxを作成する

適切なテキストエディターでapp/views/ponies/indexl.erbを開きます。：remote ⇒ true、：class ⇒ 'delete_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|
      formatl { redirect_to ponies_url }
      format.json { head :no_content }
      format.js   { render :layout => false }
   end

end

最後にコントローラーページは図のようになります。

Ajax

ここで、http：//localhost：3000/ponies/newから呼び出されるアプリケーションの出力を実行すると、次の画像のようになります。

Ajax

ポニー作成ボタンを押すと、次のように結果が生成されます

Ajax

戻るボタンをクリックすると、ポニーが作成したすべての情報が画像として表示されます

Ajax

これまでは、scaffoldに取り組んでおり、destroyボタンをクリックすると、下の画像に示すようにポップアップが呼び出されます。ポップアップはAjaxに基づいて機能します。

Ajax

[OK]ボタンをクリックすると、ポニーからレコードが削除されます。ここで[OK]ボタンをクリックしました。最終的な出力は次のようになります-

Ajax