Rails を使うと Ajax がとっても簡単ですよ、というお話。

普通のリンク

例えば、以下のコードを Rails の MVC パターンにおける View の部分に相当する *.rhtml ファイルに書きます。

<%= link_to "link to hoge", :action => 'hoge' %>

すると以下の HTML が出力されます。

<a href="/chapter3/hoge">link to hoge</a>

これだけでもまあ便利です。

Ajax 版のリンク - 1

Ajax 版のリンクを作ってみましょう。
そのためには上のコードを少し変えるだけです。
以下のように link_to のところを link_to_remote に変えて、後ろの :action のところも少し変えます。

<%= link_to_remote 'link to hoge', :url => { :action => 'hoge' } %>

出力される HTML(と JavaScript)は以下のようになります。

<a href="#" onclick="new Ajax.Request('/chapter3/hoge', {asynchronous:true, evalScripts:true}); return false;">link to hoge</a>

「Ajax.Request…」とかそれっぽいコードが生成されているのがわかりますね。

Ajax 版のリンク - 2

上の例だとリンクをクリックしても(リクエストは送信されるけど画面上は)何も変化がないのでちょっとさみしいですよね。
例えば以下のようにすれば、レスポンスの内容を画面に挿入することができます。

<%= link_to_remote 'link to hoge',
  :update => 'content',
  :url => { :action => 'hoge' } %>
<div id="content"><div>

出力される HTML(と JavaScript)は以下ようになります。

<a href="#" onclick="new Ajax.Updater('content', '/chapter3/hoge', {asynchronous:true, evalScripts:true}); return false;">link to hoge</a>

これで胸を張って Ajax と言えますね。
めでたしめでたし。

参考:

Ajax on Rails Ajax on Rails
Scott Raymond 牧野 聡

オライリー・ジャパン 2007-07-24
売り上げランキング : 17962

Amazonで詳しく見る by G-Tools