添加 Ajax

Ajax 让您可以只更新 Web 页面的一个片段。Rails 库为您处理大部分的工作。要将 Ajax 添加到这个应用程序中，需要以下四个步骤：

1. 配置 Rails 以使用 JavaScript。
2. 更改时间链接来提交 JavaScript Ajax 请求，而不是仅呈现一个 HTML 链接。
3. 指定要更新的 HTML 片断。
4. 为更新的 HTML 内容准备一个位置。
5. 构建一个控制器方法，或者一个视图来呈现 Ajax 响应。

首先，更改 app/views/ajax/show.rhtml 中的代码，使其与清单 5 类似：

            <%= javascript_include_tag :defaults %>
            <h1>Ajax show</h1>
            Click this link to show the current
            <%= link_to_remote "time",
            :update => 'time_div',
            :url => {:action => "time"} %>.<br/>
            <div id='time_div'>
            </div>
            

我做了一些更改。首先，为处理配置，简单地将必要的 JavaScript 库直接包含在视图中。通常，还会有更多的视图，为避免重复，我将 JavaScript 文件包含在一个公共的 Rails 组件中，如 Rails 布局。本例只有一个视图，所以一切从简。

其次，我改变了链接标记来使用 link_to_remote。您一会儿就能看到这个链接的作用。请注意下列三个参数：

• 链接文本：从非 Ajax 的例子中照搬过来。
  
  
• :update 参数。如果您以前没见过这种语法，那么就把 :update => 'time_div' 当作是一个已命名的参数，其中的 :update 是名称，update_div 是值。此代码告诉 Prototype 库：此链接中的结果将用 time_div 这一名称更新 HTML 组件。
  
  
• 代码 :url => {:action => "time"} 指定该链接将调用的 URL。:url 从一个哈希映射表中获取值。在实际中，该哈希映射表只有一个针对控制器动作的元素：:time。理论上，该 URL 也可以包含控制器的名称和控制器需要的任何可选参数。

在清单 5 中，还可以看到空的 div，Rails 将用当前时间更新它。

在浏览器中，装载页面 http://localhost:3000/ajax/show。单击该链接，将看到图 3 中的结果。

为了很好地了解这里发生的情况，请查看该 Web 页面的源代码。清单 6 显示了该代码：

清单 6. 显示模板的结果（在启用 Ajax 的情况下）

            <script src="/javascripts/prototype.js?1159113688" type="text/javascript"></script>
            <script src="/javascripts/effects.js?1159113688" type="text/javascript"></script>
            <script src="/javascripts/dragdrop.js?1159113688" type="text/javascript"></script>
            <script src="/javascripts/controls.js?1159113688" type="text/javascript"></script>
            <script src="/javascripts/application.js?1159113688" type="text/javascript"></script>
            <h1>Ajax show</h1>
            Click this link to show the current
            <a href="#" onclick="new Ajax.Updater(
            'time_div', '/ajax/time', {asynchronous:true, evalScripts:true});
            return false;">time</a>.<br/>
            <div id='time_div'>
            </div>
            

请注意包含的 JavaScript 列表。Rails 辅助方法（include_javascript_tags :defaults）为您构建了此列表。接下来，看到一个用来构建新的 Ajax.Updater 对象的 JavaScript 函数调用，而不是一个 HTML 链接。正如您所料想的那样，名为 asynchronous 的参数被设置为 true。最后，在 HTML div 标记中看不到值，这是由于初始页面在那里没有值。