railsノートajax

3227 ワード

ajax web2.0
ajaxを使用するには、まずページに<%=javascript_を含める必要があります.include_tag "prototype"%>
ajaxの命令は以下の通りです
link_to_remote
例は以下の通り
<%= link_to_remote("Do the Ajax thing",

        :update => 'mydiv',

        :url => { :action => :say_hello }) %>

<div id="mydiv">This text will be changed</div>


1番目のパラメータがlinkのテキスト2番目のパラメータは更新された要素のid(div,span fontなど)3番目のパラメータはリモートのurl(url_for構文)で、このurlがlayoutを閉じることに注意します
form_remote_tag
例は以下の<%=form_remote_tag(:update => "update_div", :url => { :action => :guess } ) %> <%= text_field_tag :guess %> <%= submit_tag "Post form with AJAX"%> <%= end_form_tag %>
パラメータはあります:update更新の要素id:urlはもっと多くのパラメータとapi??を調べますなぜapiのパラメータが違うのでしょうか
observers
例は以下の通り
<%= text_field_tag :search %>



<%= observe_field(:search,

:frequency => 0.5,

:update => :results,

:url => { :action => :search }) %>


:frequencyは更新の頻度を指定し、入力フィールドが変更されたことを発見すると自動的に対応するactionに変更をコミットし、戻り値を更新します
??? ここでaction側ではrequest.raw_を使用していますpost || request.query_stringはまだこの使い方がよく分からないようです.
periodic update
例は以下の<%=periodically_call_remote(:update => 'process-list', :url => { :action => :ps }, :frequency => 2 )%>
パラメータ
Domインターフェイス!!!Javascriptのドキュメントを見てください
railsはjavascriptのapiを単独で提供し、Domインタフェースを操作します.
$(id)
Pass the $( ) method a string, and it returns the DOM element with the given id. Otherwise it returns its argument. (This behavior means you can pass in either an element’s id= attribute or the element itself and get an element returned.)
$('mydiv').style.border = "1px solid red"; /* sets border on mydiv */


Element.toggle(element, ...)
Element.toggle( ) toggles whether the given element (or elements) are shown. Internally, it switches the value of the CSS display attribute between ’inline’ and ’none’.
Element.toggle('mydiv'); /* toggles mydiv */

Element.toggle('div1', 'div2', 'div3'); /* toggles div1-div3 */


Element.show(element, ...)
Element.show( ) ensures all elements it receives as parameters will be shown.
Element.show('warning'); /* shows the element with id 'warning' */


Element.hide(element, ...)
Opposite of Element.show( ).
Element.remove(element)
Element.remove( ) completely removes an element from the DOM.
Element.remove('mydiv'); /* completely erase mydiv */


Insertion methods
The various insertion methods make it easy to add HTML fragments to existing elements. They are discussed in Section 18.4, Replacement Techniques, on page 389.
JAvascript効果
JAvascript効果には追加のinclude「effects」パッケージが必要なので、合計includeの2つのパッケージが必要です
<%= javascript_include_tag "prototype", "effects" %>


呼び出し効果は、通常、Effect.xxx(element)を使用してidを表すstringを送信するか、thisを使用して現在のオブジェクトを表示します.
...次の内容はjavascriptを熟知する必要があります.本人はしばらく深く研究しないことにしました.