ppt

RailsによるAjaxの利用
03-1-47-002
4回生
小野実
お品書き

Ajax


Ajaxとは
RailsでのAjax利用方法







link_to_remote()
form_remote_tag()
オブザーバ
periodically_call_remote()
視覚効果
置換
コールバック
Ajaxとは
Asynchronous JavaScript and XML
 asynchronous:非同期
Ajaxという技術があるわけではない




XMLHtmlRequest
DHTML(：DynamicHTML)
サーバサイドウェブアプリケーション
これらを複合した技がAjax
例：GoogleSuggest，GoogleMaps，etc.
利用方法







link_to_remote
form_remote_tag()
オブザーバ
periodically_call_remote
視覚効果
置換
コールバック
link_to_remote

基本的なAjax呼び出しを行うための構文
<%= link_to_remote(“Ajax処理を実行”,
: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()


periodically ：定期的に，周期的に
Ajaxを介して定期的にサーバを呼び出す
<%= periodically_call_remote(:update => ‘list’,
:url => {:action => :ps},
:frequency => 2) %>
DocumentObjectModel(DOM)操作

$(id)


Element.toggle(element,...)


指定された要素が表示されるように保証する．
Element.hide(element,...)


指定の要素が表示されるかどうかを切り替える．
Element.show(element,...)


指定のidのDOM要素を返す．そうでなければその引
数を返す．
指定された表祖が表示されないように保証する．
Element.remove(element)

指定された要素を完全にDOMから削除します．
視覚効果(１回限りの効果)

Effect.Appear(element)


Effect.Fade(element)


Appeearの逆で滑らかにフェードアウトさせる．
Effect.Highlight(element)


指定されたようその不透明度を0%~100%まで滑らか
に変化かさせる．(滑らかなフェードイン)
要素に対してYellowFadeTechniqueを使い，その背
景を黄色から白へと滑らかにフェードさせる．
Effect.Puff(element)
視覚効果(１回限りの効果)

Effect.Puff(element)


煙が徐々に雲状に広がって要素が消えたように見せ
る．
Effect.Squish(element)

滑らかに縮小させることで要素を消す．
視覚効果(繰り返し呼び出し可能)

Effect.Scale(element,percent)


指定された要素を滑らかに拡大縮小する．
Effect.setContentZoom(element,percent)

emを単位として使用するテキストや，その他の要素
のスケールを設定する，アニメーションによらない手
法を提供．
置換

Insertion.Top(element,content)


Insertion.Bottom(element,content)


要素の終了の直前にHTMLの断片を挿入する．
Insertion.Before(element,content)


要素の開始の直後にHTMLの断片を挿入する．
要素の開始の前にHTMLフラグメントを挿入する．
Insertion.After(element,content)

要素の終了の後にHTMLフラグメントを挿入する．
コールバック




目的の作業の前後に「付随して行わせる作業」．
link_to_remote()、form_remote_tag()、
observe_xxxメソッドで利用できる．
requestと呼ばれるJavaScript変数にアクセスで
きる．
requestにはXMLHttpRequestオブジェクトが格
納されている．
コールバック

:loading()


:loaded()


全てのデータがサーバに送信され終わると呼び出さ
れる．
:interactive()


サーバにデータを送信し始めると呼び出される．
データがサーバから戻り始めたことをきっかけに呼び
出される．
:complete()

サーバからの全てのデータを受信し呼び出しが完了
すると，呼び出される．
コールバック(link_to_remote限定)

:confirm


:condition


JavaScriptの式を評価し提供する．リモートリクエスト
は，式がtrueの場合のみ開始される．
:before


確認ダイアログを利用する．
Ajax呼び出しが行われる直前でJavaScriptの式を評
価する．
:after

Ajax呼び出しが行われる直後にJavaScriptの式を評
価する．

Download Report