源码搜藏网

Ajax（Ajax培训 ） 是一种编程技术，它使用 XML、JavaScript 和 Web 标准来创建高度交互性的 Web 页面，正如您在 Google Maps 和大量其他站点上所看到的页面那样。本文全面介绍了两个简单的 Ajax 例子，延着这个思路介绍了 Ruby/Ajax 这一组合如此成功的原因。

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. 简单视图

Ajax show

Click this link to show the current "time" %>.

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

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

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

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

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

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

Ajax show

Click this link to show the current time.

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

共3页: 1 [2] [3] 下一页

【内容导航】

原文：Ajax和Ruby on Rails框架的结合应用(1)