AJAX on Rails 2.1

Ajaxは[。underline] #A＃* synchronous * [。underline] #Ja＃ vaScriptおよび[。underline] #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コントローラーアクション）はデータを処理し、HTMLフラグメントをWebクライアントに返します。
クライアントは応答を受け取ります-Railsが自動的に作成するクライアント側のJavaScriptは、HTMLフラグメントを受け取り、それを使用して現在のページのHTMLの指定された部分、多くの場合<div>タグのコンテンツを更新します。

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

AJAXの例

Railsの残りの概念について議論する間、ライブラリの例を取り上げました。そこには subject というテーブルがあり、移行時にいくつかのサブジェクトを追加していました。これまで、この表のサブジェクトを追加および削除する手順は提供していません。

この例では、サブジェクトテーブルで操作を提供、一覧表示、表示、および作成します。前の章で説明したライブラリ情報システムについて理解していない場合は、最初に前の章を完了してからAJAX on Railsを続行することをお勧めします。

コントローラーの作成

件名のコントローラーを作成しましょう。それは次のように行われます-

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

これは、前に説明した例に似ており、データベースで利用可能なすべてのサブジェクトをリストするために使用されます。

showメソッドの実装

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

これも前述の例に似ており、渡されたIDに対応する特定のサブジェクトを表示するために使用されます。

createメソッドの実装

def create
   @subject = Subject.new(params[:subject])

   if @subject.save
      render :partial => 'subject', :object => @subject
   end
end

この部分は少し新しいです。ここでは、ページを他のページにリダイレクトしていません。ページ全体ではなく、変更された部分のみをレンダリングしています。

*partial* を使用している場合にのみ発生します。 完全なビューファイルを記述するのではなく、/app/view/subjectディレクトリにパーシャルを記述します。 すぐに表示されます。 最初に、他のメソッドのビューファイルを作成しましょう。

ビューを作成する

次に、パーシャルを作成するcreateメソッドを除く、すべてのメソッドのビューファイルを作成します。

listメソッドのビューの作成

/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の関連付けにより、関係を簡単に確認して、このような情報を取得できます。

次に、http：//localhost：3000/subject/listを使用して件名リストを参照してみてください。次の画面が表示されます。

被験者リスト

showメソッドのビューの作成

/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 メソッドのビューを作成しません。次のセクションでは、createメソッドのパーシャルを作成します。

Ajaxサポートの追加

RailsアプリケーションでAjaxサポートを取得するには、必要なJavaScriptファイルをレイアウトに含める必要があります。 Railsには、Ajaxの使用を非常に簡単にするいくつかのライブラリがバンドルされています。 2つのライブラリ-link：/prototype/index [prototype]とlink：/script.aculo.us/index [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メソッドを使用すると、Prototype JavaScriptライブラリのパワーを利用して適切なDOM操作を行うことができるため、link_toメソッドの代わりにlink_to_functionを使用しています。

2番目のセクションは、add_subject <div>の作成です。 CSS表示プロパティを使用して、デフォルトで非表示に可視性を設定していることに注意してください。前述のlink_to_functionは、このプロパティを変更し、ユーザーに<div>を表示して、新しいサブジェクトを追加するために必要な入力を取得します。

次に、 form_remote_tag を使用してAjaxフォームを作成します。このRailsヘルパーは start_form_tag タグに似ていますが、このメソッドのAjaxアクションをトリガーする必要があることをRailsフレームワークに知らせるためにここで使用されます。 form_remote_tagは、start_form_tagと同様に*：action *パラメーターを取ります。

：update *と：position *の2つの追加パラメーターもあります。

*：update *パラメーターは、RailsのAjaxエンジンに更新する要素を指示しますそのIDに基づきます。この場合、それは<ul>タグです。
*：position *パラメーターは、新しく追加された場所をエンジンに指示します DOMのオブジェクト。番号なしリストの下部（：bottom）または上部（：top）に設定できます。

次に、標準のフォームフィールドを作成し、ボタンを以前と同様に送信し、end_form_tagでまとめて<form>タグを閉じます。意味が正しく、有効なXHTMLであることを確認してください。

createメソッドのパーシャルの作成

サブジェクトの追加中に_create_メソッドを呼び出しており、このcreateメソッド内では、1つのパーシャルを使用しています。実際に実際に進む前に、この*部分*を実装しましょう。

app/views/subjectの下に、* _ subject.rhtmlという名前の新しいファイルを作成します。*すべてのパーシャルには、先頭にアンダースコア（_）が付いていることに注意してください。

このファイルに次のコードを追加します-

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

これで、各サブジェクトが追加された後にページが更新されるのを待たずに、複数のサブジェクトを簡単に追加できます。次に、http：//localhost：3000/subject/listを使用して件名リストを参照してみてください。次の画面が表示されます。件名を追加してください。

件名を追加

[追加]ボタンを押すと、使用可能なすべてのサブジェクトの下部にサブジェクトが追加され、ページが更新されたように感じられません。

Ruby-on-rails-2.1-rails-and-ajax