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 标记或图像。
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:
cd ajax
ruby script/generate controller Say show time
ruby script/server
第一行和第二行代码生成一个 Rails 项目,并切换到新目录。第三行代码生成一个叫做 Say 的控制器,并增加两个动作:show 和 time。下面显示该控制器的代码:
清单2:
#say_controller.rb class SayController < ApplicationController def show end def time render:text=>"The current time is #{Time.now}" end end
找到...\rails_apps\ajax\app\views\say\show.html.erb,修改如下:清单3:
<h1>Ajax show</h1> Click this link to show the current <%= link_to "time", :action => "time" %>.
Ruby 用其表达式的值替代 <%=h 和 %> 之间的代码。在这个示例中,link_to 方法是一个生成简单 HTML 链接的辅助例程。可以通过执行该代码看到该链接。通过键入:ruby script/server 启动网站ajax服务器,然后将浏览器指向 :3000/say/show 。结果显示如下: Ajax showClick this link to show the current time.在浏览器中,单击菜单项来查看页面源代码:
清单4:
点击time链接跳转到time页面,如下图:
很快就能看到这个 UI 的一个问题。这两个视图show和time不从属于单独的页面。为反复更新时间,每次都需要单击该链接和 Back 按钮。将该链接和时间放到相同的页面中也许可以解决这个问题。但如果该页面变得非常大或非常复杂,重新显示整个页面会很浪费,也会很复杂。下面的采用Ajax方案来重新解决这个问题。