Ruby On Rails with Ajax

wujiajax 2011-07-22

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

1 Ajax 请求的流程:

1) 一个事件(如用户的鼠标点击或编程计时器的触发)启动一个 JavaScript 函数。
2)JavaScript 函数为部分页面而不是整个页面创建一个请求。JavaScript 随后通过 HTTP 将该请求发送到 Web 服务器。
3)此 HTTP 请求调用服务器上的一个脚本,如 Rails 控制器方法或 Java servlet。
4)该服务器脚本创建一个 XML 文档并将其返回给服务器。
5)在接收结果的同时,客户机异步处理创建、更新或删除部分 Web 页面,如列表元素、div 标记或图像。

Ajax 解决方案的组件是:

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

下面以一个实际的例子来说明Ajax的用法和必要性:

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

启动Instant Rails。如果你不了解如何使用Rails,请快速浏览我的上一篇文章:使用 RubyOnRails 快速搭建LBS网站
启动Ruby Console Window,输入下面的命令:

清单1:

rails ajax
cd ajax
ruby script/generate controller Say show time
ruby script/server

第一行和第二行代码生成一个 Rails 项目,并切换到新目录。第三行代码生成一个叫做 Say 的控制器,并增加两个动作:show 和 time。下面显示该控制器的代码:

清单2:

  1. #say_controller.rb   
  2. class SayController < ApplicationController  
  3.   
  4.   def show  
  5.   end  
  6.   
  7.   def time  
  8.     render:text=>"The current time is #{Time.now}"  
  9.   end  
  10. end  
找到...\rails_apps\ajax\app\views\say\show.html.erb,修改如下:

清单3:

  1. <h1>Ajax show</h1>  
  2. Click this link to show the current <%= link_to "time":action => "time" %>.  
Ruby 用其表达式的值替代 <%=h 和 %> 之间的代码。在这个示例中,link_to 方法是一个生成简单 HTML 链接的辅助例程。可以通过执行该代码看到该链接。通过键入:ruby script/server 启动网站ajax服务器,然后将浏览器指向 http://localhost:3000/say/show 。结果显示如下:

Ajax show

Click this link to show the current time.

在浏览器中,单击菜单项来查看页面源代码:

清单4:

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

点击time链接跳转到time页面,如下图:

Ruby On Rails with Ajax

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

相关推荐

mmywcoco / 0评论 2020-06-06