对 Ajax 这种使 Web 页面更具交互性的技术的大肆宣传已成过度之势。Ruby on Rails 框架和 Ajax 的完美集成所产生的力量在一定程度上促成了该框架的繁荣。本文旨在揭示：是什么使 Ajax on Rails 成为如此强大的组合。

　　除非您一直与世隔绝，不然您一定会知道 Ajax 是这样一种编程技术，它使用 XML、JavaScript 和 Web 标准来创建高度交互性的 Web 页面，正如您在 Google Maps 和大量其他站点上所看到的页面那样。本文全面介绍了两个简单的 Ajax 例子，延着这个思路介绍了 Ruby/Ajax 这一组合如此成功的原因。在本系列的下篇文章中，我将探究 JavaScript 这门编程语言。

　　Ajax 定义

　　Ajax 代表 Asynchronous JavaScript + XML。信息架构师 Jesse James Garrett 于 2005 年提出这一术语，该术语用来描述一门在夹缝中生存了近二十年的技术。Ajax 的使用随即爆增，不论在图书馆、流行网站还是文献作品中都保持同步增长。

　　Ajax 重新定义了基本的浏览器使用模型。原模型一次呈现一个页面。Ajax 允许浏览器在页面更新的间隔同服务器进行交流。这样做的好处是带来更加丰富的客户体验，但却以增加复杂度为代价。Ajax 是这样运行的：使用 JavaScript 客户端库在客户机和服务器间发送 XML。Ajax 开发人员可以在任何时刻从客户机发送异步请求，因而在服务器处理这些请求时，用户交互可以继续进行。下面就是 Ajax 请求的流程：

　　一个事件(如用户的鼠标点击或编程计时器的触发)启动一个 JavaScript 函数。

　　JavaScript 函数为部分页面而不是整个页面创建一个请求。JavaScript 随后通过 HTTP 将该请求发送到 Web 服务器。

　　此 HTTP 请求调用服务器上的一个脚本，如 Rails 控制器方法或 Java™ servlet。

　　该服务器脚本创建一个 XML 文档并将其返回给服务器。

　　在接收结果的同时，客户机异步处理创建、更新或删除部分 Web 页面，如列表元素、div 标记或图像。

　　所有 Ajax 应用程序都使用类似这种顺序的一种方法。例如，某个应用程序允许将字典中的单词与其定义一起保存。旧式的应用程序会强迫您用一个新的页面视图来编辑定义。Ajax 允许原地编辑，它用一个条目字段替换定义文本，然后用更新的定义来替换该表单。

　　Ajax 解决方案的组件是：

　　客户端 JavaScript 库，用来管理异步请求。
　　服务器端 JavaScript 库，用来处理进来的请求，并构造一个 XML 响应。
　　客户端 JavaScript 库，用来处理生成的 XML。
　　称作文档对象模型(DOM)的库，允许对现有 Web 页面进行更新。
　　辅助例程，用来处理不可避免的 UI 和集成问题。

　　事件/请求/响应/替换模型是大多数 Ajax 应用程序的核心模型，但如果您刚接触 Ajax，您一定会对 Ajax 中大量的可用库和这些库之间巨大的差别感到惊讶不已。该领域中有许多 Ajax 框架，它们的功能常常重叠且没有确定的胜出者。单就 Java 市场而言，有许多库可用，包括 Echo、Dojo、DWR、Google Web Toolkit(GWT)、Java Web Parts、AjaxAnywhere、AjaxTags、Scriptaculous 和 Prototype。这些框架使用截然不同的方法。一些框架试图通过生成 JavaScript 代码的 Java 库来隐藏 JavaScript，如 GWT。另一些框架致力于使 JavaScript 更易使用。一些相当地全面，如 Dom4J，而另一些则仅着力于解决好一个小问题。由于有许多流行的新技术，解决方案之间互相割据的场面有时会很难驾驭，调试工具、UI 实践(如 Back 按钮)和明智的开发实践的实现非常缓慢。Java 平台上的 Ajax 库的力量源自其多样性。这也正是其缺点所在，因为多样性导致了难以决断、集成方面的顾虑和复杂性。

　　有了 Ruby on Rails，开发体验就显著不同了，这是由于两个原因。首先，Ruby on Rails 有一个核心的 Web 开发平台：Ruby on Rails。其次，到目前为止，大多数在 Rails 上的 Ajax 开发体验都围绕着两个核心框架：Scriptaculous 和 Prototype。Rails 方法使用运行时代码生成和定制标记，这使您不必理会复杂的 JavaScript。是时候自己来实践了。如果您想要在学习本文的过程中编写代码的话，需要下载 Rails，也要下载必要的 Ajax 框架。打开您的 Rails 环境，跟我一起来吧。

　　没有 Ajax 的简单的 Rails 应用程序

　　要使用 Rails 和 Ajax，就要创建一个空项目，并生成一个有两个方法的控制器。一个控制器控制简单的页面，另一个控制器建立一个 Ajax 响应。键入下列代码：

rails ajax
cd ajax
script/generate controller ajax show time

　　第一行和第二行代码生成一个 Rails 项目，并切换到新目录。第三行代码生成一个叫做 ajax 的控制器，并查看两个动作：show 和 time。清单 1 显示了该控制器的代码：

　　清单 1. 有两个空方法的控制器

class AjaxController < ApplicationController

   def show
   end

   def time
   end
end
 
　　首先在不使用 Ajax 的情况下构建两个简单视图，然后用 Ajax 将这两个视图绑定到一起。编辑 app/views/ajax 中的 show.rhtml 视图，使它和清单 2 类似：

　　清单 2. 简单视图

<h1>Ajax show</h1>
Click this link to show the current <%= link_to “time”, :action => “time” %>.

　　清单 1 和清单 2 中的代码不支持 Ajax，但我还是会仔细分析该代码。首先，看清单 1 中的控制器。两个空的控制器方法处理进来的 HTTP 请求。如果不明确地呈现一个视图(使用 render 方法)，Rails 会呈现和该方法同名的视图。由于 Scriptaculous 和 Prototype 库也使用 HTTP，Rails 不需要对标准 HTTP 方法和 Ajax 方法进行区分。

　　现在将注意力转移到清单 2 中的视图。大多数代码都是简单的 HTML 代码，只有第二行的 link_to 辅助例程例外：<%= link_to “time”, :action => “time” %>。

　　正如在跨越边界 之前的文章中所看到的那样，Ruby 用其表达式的值替代 <%=h 和 %> 之间的代码。在这个示例中，link-to 方法是一个生成简单 HTML 链接的辅助例程。可以通过执行该代码看到该链接。通过键入 script/server 启动服务器，然后将浏览器指向 http://localhost:3000/ajax/show 。您将看到图 1 中的视图：

　　图 1. 不涉及 Ajax 的简单用户界面

　　在浏览器中，单击菜单项来查看页面源代码(在 Internet Explorer 为 View > Source ，在 Firefox 中为 View > Page Source)。您将看到清单 3 中的代码：

　　清单 3. 由 show.rhtml 生成的视图

<h1>Ajax show</h1>
Click this link to show the current <a href=”/ajax/time”>time</a>.

　　请注意清单 3 中的链接代码。该模板让 Rails 用户不必面对冗长且容易出错的 HTML 句法。(Ajax 代码也是这样运行：使用辅助方法插入 JavaScript 代码，该代码替您管理远程请求和 HTML 替换。)如果单击该链接，将看到针对 time 方法的默认视图，但我还没有实现它。为加以补救，请用清单 4 中的代码替换 app/controllers/ajax_controller.rb 中的 time 方法。为保持简单，我直接从控制器中呈现视图。稍后，我会把一切处理好并呈现视图。

　　清单 4. 呈现时间

def time
  render_text “The current time is #{Time.now.to_s}”
end

　　现在，当单击该链接时，会得到图 2 中的视图：

　　图 2. 不涉及 Ajax 的视图

　　很快就能看到这个 UI 的一个问题。这两个视图不从属于单独的页面。该应用程序表示一个单一概念：单击一个链接来显示时间。为反复更新时间，每次都需要单击该链接和 Back 按钮。将该链接和时间放到相同的页面中也许可以解决这个问题。但如果该页面变得非常大或非常复杂，重新显示整个页面会很浪费，也会很复杂。

　　添加 Ajax

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

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