ajax 常用

ActionView

RJS 模板通过 update_page() 代码块渲染，代码块接受名叫 page 的 Rails JavaScriptGenerator 实例。

在我们这个 "Thought Log" 的例子中，RJS 模板在它执行之前由 ActionView 完成转换。
update_page do |page|
　page.insert_html :bottom, 'thoughts', :partial => 'thought'
　page.visual_effect :highlight, 'thoughts'
　page.form.reset 'thought-form'
end

ActionView 用两行 update_page() 代码块来包装模板的 RJS 代码。

很多 RJS 方法接受可变长度参数列表，options_for_render。如果这个参数是一个 Hash，把参数传递给 ActionView#render()。这允许你用字符串或渲染一个模板更新 DOM 元素。

在 RJS 调用中使用 :partial 选项，你也可以使用其他你在 RHTML 模板常使用的参数bject 和 :localsthat 。下面这个局部模板能渲染用户信息。
<div id="user">
　<p>Name: <%= name %></p>
　<p>Title: <%= title %></p>
</div>

这部分需要局部变量 name 和 title，所以你需要在调用 RJS 方法时正确使用参数 :locals 传递一个 hash 。
page.replace_html 'user', :partial => 'user', :locals => { :name => 'Cody Fauser', :title => 'El Presidente' }
Element, Class, and Collection Proxies

当 RJS 第一次提出来的时候，更新页面上 DOM 对象的唯一办法是调用一个页面对象并在 action 中传递期望更新的对象的 id。 Element 和 collection proxies 引入了一个新途径将 DOM 对象和使用 Proxy 设计模式结合起来。proxy 让 RJS 模板可操作一个或多个 DOM 元素。
Element Proxies

element proxy 给 JavaScriptGenerator 增加了 [] 方法。proxy 和 page 对象调用 visual_effect() 方法很像，除了这个方法会在 JavaScript 中产生一个实际 DOM 对象。proxy 对象可以理解页面中的 DOM id。下面的 RJS 模板隐藏的 id 是 header 的 DOM 元素。。
page['header'].hide

当然也可以理解符号，所以如下写法也可以正常工作。
page[:header].hide

proxy 也支持连锁方法，所以你可以定义多个连锁的方法：
page[:header].hide.show
Class Proxies

RJS class proxy 提供使用 JavaScript class 方法。这些方法可能定义在 Prototype 中，例如 class Form，或者定义在你自己的脚本中。而不是根据 DOM 的 id 来选择一个对象，和 element proxies 一样，page 对象在使用 class proxy 时可以使用连锁方法。

一个实际的应用是采用 class proxies 的方式用 Prototype's Form class 处理表单。Form class 支持表单的 disabling, enabling, resetting, 和其他很多功能：
page.form.reset('employee-form') # => Form.reset("employee-form");

然而，class proxies 不是仅仅能依靠 Prototype 工作。你可以利用你自己的静态 JavaScript 方法调用它。也就是说你可以在你的 public/javascripts/application.js 文件中定义 JavaScript class。
var Alerter = {
　displayMessage: function(text) {
　　alert(text);
　}
}

使用 Alerter 类定义，你可以在 RJS 模板中使用 RJS class proxying 来调用静态的 displayMessage() 函数。
page.alerter.display_message('Welcome') # => Alerter.displayMessage("Welcome");

class proxies 为结合 JavaScript 提供了一个很好的桥梁，以便你可以压缩你的 JavaScript 库并且在 RJS 中方便的使用。
Collection Proxies

select() 方法返回一批 DOM 对象。select() 根据一个 CSS-based 选择器并且返回一组符合条件的 DOM 对象。所以如果你想得到 id 是 content 的 <div> 中全部的段，可以采用如下方法：
page.select('#content p')

更进一步，你可以：
page.select('#content p').each do |element|
　element.hide
end

把 id 是 content 的元素内的所有 <p> 元素均被隐藏。

最近增加了一个支持 attribute-based 选择器的功能，允许你根据 CSS 属性来选择所需的元素。
page.select('#form input[type=text]').each do |element|
　element.hide
end

这个代码会隐藏全部父元素的 id 属性是 form 并且 type 值是 text 的 input 元素，

属性选择器支持 =, ~=, |=, existence 和 != 你可以使用属性选择器的同时使用这些，例如 input[class=link][href="#"]。可惜 IE 不支持这些选择器。
在 Rails 中使用 Ajax

如果页面中不使用 Ajax 的话 RJS 不是很有用处。Rails 根据不同的环境提供了许多方法来实现 Ajax。可以看看 Ruby on Rails 文档中关于这些方法的详细说明。
link_to_remote(name, options = {}, html_options = {})

在 Rails 中这是生成 Ajax 的最常用的办法。当点击 link_to_remote() 生成的超链接的时候产生一个 Ajax 请求。当 <a> 的 onclick() 事件发生时， Rails 产生一个 Ajax.Request 或 Ajax.Updater，依靠传递给 link_to_remote() 的 :update 参数。在 RJS 中，:update 选项不会产生 Prototype Ajax.Updater 对象。如果页面中的 RJS 返回的结果出现问题，可以看看是否在 RJS 模板中错误的使用了 :update 选项。
link_to_function(name, function, html_options = {})

当点击超链接的时候执行 JavaScript 函数或代码。这实际上不会创建　Ajax 请求，但是它可以执行自己编写的　JavaScript 函数。使用这个方法来执行自己编写的 JavaScript 库，在其中利用 Ajax.Request 来构造 Ajax 调用。
remote_function(options)

产生 JavaScript 在后台生成一个 Ajax 请求访问控制器的 action。这个方法用在操作 DOM 对象事件的时候发起 Ajax 调用是非常有用，例如 <select> 标签的 onchange() 动作。接受和 link_to_remote() 方法一样的参数。
observe_form(form_id, options = {})

工作原理和 observe_field() 一样，但是侦测整个表单。
form_remote_tag(options = {})

创建一个表单，在背后使用 Ajax 请求来提交其中的内容。这是另一个非常有用的生成 Ajax 请求的方法。
form_remote_for(object_name, object, options = {}, &proc)

和 form_remote_tag() 一样，Rails 1.1 提出使 form_for 更符合语义。
submit_to_remote(name, value, options = {})

创建一个 button 来提交父表单中的内容到一个远程的控制器 action。接受的参数和 form_remote_tag() 一样。
in_place_editor_field(object, method, tag_options = {}, in_place_editor_options = {})

当修改输入框的字段时候，产生一个 Ajax 请求。在 RJS 中使用这个方法需要给 the in_place_editor_options 传递一个 hash 其中指定 :script => true。
in_place_editor(field_id, options = {})

这个方法限制于 in_place_editor_field()。在 RJS 中使用这个方法需要给 options 传递的 hash 参数有 :script => true。
drop_receiving_element(element_id, options = {})

当删除一个元素的时候产生一个 Ajax 请求。
sortable_element(element_id, options = {})

当元素使用拖放功能的时候随时产生 Ajax 请求。
Ajax.Request(url, options)

所有的 Rails 辅助方法都使用这个 Prototype 对象来生成真实的 Ajax 请求。你也可以在你的 JavaScript 中使用这个对象发起 Ajax 请求。这个 JavaScript 对象不是 Ruby 对象。
辅助方法

Rails 辅助方法让 RJS 模板可以在一个方法中操作多个。不同于传统的辅助方法，RJS 辅助方法必须传递给一个 page 对象。
def insert_item(list_id, item)
　page.insert_html :bottom, list_id, '<li>#{item.title}</li>'
　page.visual_effect :highlight, 'item_#{item.id}', :duration => 0.5
end

现在，不必在每个模板中总是使用 insert_html() 和 visual_effect()，我们可以使用 insert_item() 方法，它能帮助我们写出更简单易读的模板。这个新的辅助方法可以在如下的 RJS template 调用， @item 是一个传递给 RJS 模板的实例变量，我们希望把每一个 item 追加到 my_list 列表中：
page.insert_item 'my_list', @item