Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "RailsによるAjaxの利用 03-1-47-002 4回生 小野 実."— Presentation transcript:

1 RailsによるAjaxの利用 4回生 小野 実

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

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

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

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

6 補足:url_for()形式 url_for {:controller => example,
:action => periodic, :id => 1}

7 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 %>

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

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

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

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

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

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

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

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

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

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


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

Similar presentations


Ads by Google