最近评论
正在载入评论列表...
19.3 用Rails开发Ajax应用
这里主要介绍如何用Rails开发Ajax应用，包括基本步骤和示例分析。
19.3.1 用Rails开发Ajax应用的基本步骤
用Rails开发Ajax应用的步骤跟开发普通Web应用类似。主要的差异在视图模板层，需要在视图模板里包含Ajax要用到的JavaScript库，同时需要调用Rails提供的辅助类来生成远程调用的HTML代码。下面详细介绍每个步骤。
（1）在需要使用Ajax的视图模板中，包含prototype JavaScript库，代码如下。
<%= javascript_include_tag "prototype" %>
（2）用Web控制器实现远程方法。
（3）在需要使用Ajax的视图模板中，调用Rails提供的Ajax辅助函数，进行远程方法调用，如link_to_remote。
19.3.2 用Rails实现“Hello World”的Ajax版本
本小节用Rails开发基于Ajax的“Hello World”版本。通过这个例子，读者可以掌握Rails开发Ajax应用的步骤。下面详细介绍每个步骤。
（1）创建Rails Web应用。在命令行窗口运行如下命令，创建一个新的Rails应用AjaxHelloWorld。
rails AjaxHelloWorld
（2）创建Web控制器，处理Ajax的处理请求。在命令行窗口运行如下命令，创建控制器Ajax，同时创建这个控制器的say_hello方法。
ruby script\generate controller Ajax say_hello
（3）给say_hello方法添加逻辑处理代码，代码如下。
class AjaxController < ApplicationController
def say_hello
render_text "<p>Hello World! </p><p>The time is <b>" + DateTime.now.to_s + "</b></p>"
end
end
这个say_hello方法被Ajax方式调用。
（4）修改index视图，远程调用Web控制器的say_hello方法，步骤如下。
· 包含prototype JavaScript库。
· 定义用于Ajax显示的层。
· 调用Rails的Ajax辅助函数进行Ajax调用。
完成后代码如下。
<html>
<head>
<title>Ajax Hello World</title>
<%= javascript_include_tag "prototype" %>
</head>
<body>
<h1>Hello World!</h1>
<div id="hello_div">
Please
<%= link_to_remote( "click me",
:update => "hello_div",
:url =>{ :action => :say_hello }) %>
to say hello.
</div>
</body>
</html>
（5）启动WEBrick Web Server进行功能测试。访问http://127.0.0.1:3000/Ajax，这个页面输出index模块的解析结果，如图19.5所示。这个页面只是一个简单的HTML页面，用户可以通过单击“click me”链接进行Ajax远程调用。
进行Ajax远程调用后的页面输出如图19.6所示。这个页面没有被整个刷新，只是通过Ajax调用刷新了页面上的局部区域。
图19.5 Hello World首页 图19.6 进行Ajax远程调用后的Hello World页面
整个过程的大致流程如下：用户单击“click me”链接，浏览器启用Ajax远程调用Web服务器上的远程方法并获取执行结果，更新页面上的相关部分。到此为止，一个简单的Ajax应用就完成了。
