RailsによるAjaxの利用 03-1-47-002 4回生 小野　実

お品書き Ajax Ajaxとは RailsでのAjax利用方法 link_to_remote() form_remote_tag() オブザーバ periodically_call_remote() 視覚効果 置換 コールバック

Ajaxとは 例：GoogleSuggest，GoogleMaps，etc. Asynchronous JavaScript and XML XMLHtmlRequest DHTML(：DynamicHTML) サーバサイドウェブアプリケーション これらを複合した技がAjax 例：GoogleSuggest，GoogleMaps，etc.

利用方法 link_to_remote form_remote_tag() オブザーバ periodically_call_remote 視覚効果 置換 コールバック

link_to_remote 基本的なAjax呼び出しを行うための構文 3つのパラメータを受け取る :update => ‘mydiv’, :url => { :action => :say_hello }) %> 3つのパラメータを受け取る リンクの文字列 更新するページ上の要素のid=属性 呼び出すアクションのURLをurl_for()形式で記述したもの

補足：url_for()形式 url_for {:controller => example, :action => periodic, :id => 1} http://RAILS_ROOT/example/periodic/1

form_remote_tag() form_tag()のAjax版 form_tag()をform_remote_tag()に置き換えるだけでよい <%= form_remote_tag(:update => ‘hoge’, :url {:action => ‘test’})%> <%= text_field_tag :text1 %> <%= submit_tag “送信” %> <%= end_form_tag %>

オブザーバ 文字予測に使われる observe：観察する，監視する GoogleSuggest，郵便番号検索が有名 <%= observe_field(:word, :frequency => 0.5, :update => :results, :url => { :action => :search})%>

定期的な更新:periodically_call_remote() Ajaxを介して定期的にサーバを呼び出す <%= periodically_call_remote(:update => ‘list’, :url => {:action => :ps}, :frequency => 2) %>

DocumentObjectModel(DOM)操作 $(id) 指定のidのDOM要素を返す．そうでなければその引数を返す． Element.toggle(element,...) 指定の要素が表示されるかどうかを切り替える． Element.show(element,...) 指定された要素が表示されるように保証する． Element.hide(element,...) 指定された表祖が表示されないように保証する． Element.remove(element) 指定された要素を完全にDOMから削除します．

視覚効果(１回限りの効果) Effect.Appear(element) Effect.Fade(element) 指定されたようその不透明度を0%~100%まで滑らかに変化かさせる．(滑らかなフェードイン) Effect.Fade(element) Appeearの逆で滑らかにフェードアウトさせる． Effect.Highlight(element) 要素に対してYellowFadeTechniqueを使い，その背景を黄色から白へと滑らかにフェードさせる． Effect.Puff(element)

視覚効果(１回限りの効果) Effect.Puff(element) Effect.Squish(element) 煙が徐々に雲状に広がって要素が消えたように見せる． Effect.Squish(element) 滑らかに縮小させることで要素を消す．

視覚効果(繰り返し呼び出し可能) Effect.Scale(element,percent) 指定された要素を滑らかに拡大縮小する． Effect.setContentZoom(element,percent) emを単位として使用するテキストや，その他の要素のスケールを設定する，アニメーションによらない手法を提供．

置換 Insertion.Top(element,content) Insertion.Bottom(element,content) 要素の開始の直後にHTMLの断片を挿入する． Insertion.Bottom(element,content) 要素の終了の直前にHTMLの断片を挿入する． Insertion.Before(element,content) 要素の開始の前にHTMLフラグメントを挿入する． Insertion.After(element,content) 要素の終了の後にHTMLフラグメントを挿入する．

コールバック 目的の作業の前後に「付随して行わせる作業」． link_to_remote()、form_remote_tag()、　　　　　observe_xxxメソッドで利用できる． requestと呼ばれるJavaScript変数にアクセスできる． requestにはXMLHttpRequestオブジェクトが格納されている．

コールバック :loading() :loaded() :interactive() :complete() サーバにデータを送信し始めると呼び出される． :loaded() 全てのデータがサーバに送信され終わると呼び出される． :interactive() データがサーバから戻り始めたことをきっかけに呼び出される． :complete() サーバからの全てのデータを受信し呼び出しが完了すると，呼び出される．

コールバック(link_to_remote限定) :confirm 確認ダイアログを利用する． :condition JavaScriptの式を評価し提供する．リモートリクエストは，式がtrueの場合のみ開始される． :before Ajax呼び出しが行われる直前でJavaScriptの式を評価する． :after Ajax呼び出しが行われる直後にJavaScriptの式を評価する．