添加 Ajax 支持

在项目中添加 Ajax 支持的第一步是加入 JavaScript 库，Prototype 和 script.aculo.us。这些库 是与 Ruby on Rails 绑定在一起的。Prototype 库提供了 Ruby on Rails 中 Ajax 实现的基础，而 script.aculo.us 库则提供了视觉特效，可在应用程序中随意添加。

展开“Views”>“layouts”，然后打开 blog.rhtml 文件。

在包含 stylesheet_link_tag 的行下面，添加如下代码行：

<%= javascript_include_tag :defaults %>

此行代码会加入与 Ruby on Rails 绑定的 JavaScript 库：Prototype 和 script.aculo.us。下一步 是创建 form_remote_tag，以触发 Ajax 动作。

打开 show.rhtml 文件。删除已有的 form_tag（执行 HTTP POST），并将其替换成下面的 form_remote_tag（执行 XMLHTTPRequest）。 <% form_remote_tag :url => {:action => "post_comment"} do %>

此行代码会触发用于 blog_controller.rb 文件中 post_comment 操作的 Ajax 动作。而此时，整个 页面仍然会在读者提交评论时重新加载。这是因为post_comment 动作会通过调用 show 动作强制重新加 载。最后一步即是编缉 blog_controller.rb 文件，删除该调用。

展开“Controllers”节点，打开 blog_controller.rb 文件。

滚动至 post_comment 动作，注释掉 redirect_to 调用。 # redirect_to :action => 'show', :id => flash[:post_id]

如果您现在就运行应用程序，并添加一条评论，则该评论不会被显示出来。您必须在下一步插入 Ruby JavaScript （RJS）模板来处理 XMLHTTPRequest。

添加 RJS 实现动态更新

最后的步骤是使用内建的 RJS 支持来动态更新 blog 上的评论。

在“Views”节点中，右键点击“blog”节点，选择“新建”->“Empty RJS Template”。

设置“文件名”为 post_comment，并将其仿真在 app\views\blog 文件夹中。

删除已有的页面对象，然后在该位置插入下面的页面对象。

page.replace_html 'comments', :partial => 'comments', :object => @post_comments
　page[:comment_comment].clear

回忆一下，show.rhtml 文件包含一个名为 comments 的 HTML div 标签（参见代码示例 2）。在此段 代码的第一行中，replace_html 使用 DHTML 动态地将 show.rhtml 文件中该 div 标签内的这一部分 HTML 代码替换为局部模板 _comments.rhtml 中的 HTML 代码。而@post_comment 变量则含有局部模板 _comments 显示的评论。此段代码的第二行会在用户提交评论后清空文本框。

不过您现在运行该应用程序，评论依然不会显示，因为变量 @post_comment 是空的。如果您回头看看 blog_controller.rb 文件，您会发现 @post_comment 是在 show 动作中设置的，而它不再被调用了。因 此现在必须编缉 blog_controller.rb 文件。

打开 blog_controller.rb 文件，找到 post_comment 动作，在早先注释掉的重定向语句后面添加如 下三行代码：

代码示例 3：用于 blog_controller.rb 文件的更新

#redirect_to :action => 'show', :id => flash[:post_id]
　@post = Post.find(flash[:post_id])
　@post_comments = @post.comments.collect
　flash[:post_id] = @post.id　#Store the post.id back in the flash

此段代码的第一行会调用 flash（类似 HTTP 会话，但可以跨越单个请求）。当在 flash 中放入一个 物品时，该物品对下个请求可用，但然后就消失了（因此使用术语“flash”称之）。此段代码从 flash 中获取 post_id（1, 2, ...），并使用该 id 查找与之相关联的 blog 文章。

此段代码的第二行会把该文章的整个评论集合放到变量 @post_comment 中，该变量会在之后被传递至 局部模板 _comments 中。

此段代码的最后一行把 post_id 放回 flash 中，这样可以为用户提交的下一条评论做好准备。

运行项目，验证一下评论能被动态更新了。