Ruby on Rails 2.1教程

关于Rails的AJAX 2.1

← 上一节 下一节 →

Ajax代表 A 同步 Ja vaScript和 X ML. Ajax不是一种单一的技术;它是一套技术. Ajax包含以下 :

  • XHTML用于网页标记

  • CSS for the样式

  • 使用DOM进行动态显示和交互

  • 使用XML进行数据处理和交换

  • 使用DOM进行数据检索XMLHttpRequest

  • JavaScript作为将所有这些结合在一起的粘合剂

Ajax使您能够检索网页的数据无需刷新整个页面的内容.在基本Web架构中，用户单击链接或提交表单.表单将提交给服务器，然后服务器会发回响应.然后在新页面上为用户显示响应.

当您与支持Ajax的网页交互时，它会在后台加载Ajax引擎.引擎是用JavaScript编写的，它的职责是与Web服务器通信并将结果显示给用户.当您使用基于Ajax的表单提交数据时，服务器返回包含服务器响应的HTML片段，并仅显示新的或更改的数据，而不是刷新整个页面.

有关AJAX的完整详细信息，您可以浏览我们的 AJAX教程.

Rails如何实现Ajax

Rails有一个简单，一致的模型来实现Ajax操作.一旦浏览器呈现并显示初始网页，不同的用户操作会使其显示新的网页(如任何传统的Web应用程序)或触发Ajax操作 :

  • 某些触发器触发 : 此触发器可以是用户单击按钮或链接，用户对表单或字段中的数据进行更改，或者只是定期触发(基于计时器).

  • Web客户端调用服务器 :  JavaScript方法 XMLHttpRequest 将与触发器关联的数据发送到服务器上的操作处理程序.数据可能是复选框的ID，输入字段中的文本或整个表单

  • 服务器正在处理  : 去;服务器端操作处理程序(Rails控制器操作)对数据执行某些操作并将HTML片段返回给Web客户端.

  • 客户端收到回复 :  Rails自动创建的客户端JavaScript接收HTML片段并使用它来更新当前页面HTML的指定部分，通常是< div>的内容.标签.

这些步骤是在Rails应用程序中使用Ajax的最简单方法，但是通过一些额外的工作，您可以让服务器返回响应Ajax请求的任何类型的数据，您可以在浏览器中创建自定义JavaScript以执行更多相关的交互.

AJAX示例

在讨论其他Rails概念时，我们以图书馆为例.我们有一个名为 subject 的表格，我们在迁移时添加了一些主题.到目前为止，我们还没有提供任何在此表中添加和删除主题的过程.

在本例中，我们将在主题表上提供，列出，显示和创建操作.如果您对前面章节中解释的库信息系统没有任何了解，那么我们建议您先完成前面的章节，然后继续使用Rails上的AJAX.

创建控制器

让我们为主题创建一个控制器.它将按以下方式完成 :

C:\ruby\library> ruby script/generate controller Subject

此命令创建控制器文件app/controllers/subject_controller.rb.在任何文本编辑器中打开此文件并将其修改为具有以下内容 :

class SubjectController < ApplicationController
   layout 'standard'
   def list
   end
   def show
   end
   def create
   end
end

现在，我们将按照前面章节中给出的相同方式讨论所有这些函数的实现部分.

列表方法实现

 
 def list 
 @subjects = Subject.find(:all)
 end

这与前面解释的示例类似，将用于列出我们数据库中可用的所有主题.

该节目方法实现

def list
   @subjects = Subject.find(:all)
end

这也与前面解释的示例类似，将用于显示与传递的ID相对应的特定主题.

创建方法实现

def create
   @subject = Subject.new(params[:subject])
      
   if @subject.save
      render :partial => 'subject', :object => @subject
   end
end

这部分有点新.这里我们不会将页面重定向到任何其他页面;我们只是渲染已更改的部分而不是整页.

仅在使用部分时才会发生.我们不编写完整的视图文件，而是在/app/view/subject目录中编写部分文件.我们马上就会看到它.首先，让我们为其他方法创建视图文件.

创建视图

现在我们将为除create方法之外的所有方法创建视图文件为此我们将创建一个部分.

创建视图列表方法

在/app/view/subject中创建文件list.rhtml并填充它使用以下代码.

<h1>Listing Subjects</h1>
<ul id="subject_list">
   <% @subjects.each do |c| %>
   <li><%= link_to c.name, :action => 'show', :id => c.id %>
   <%= "(#{c.books.count})" -%></li>
   <% end %>
</ul>

在这里，您将遍历@subjects数组并输出< li>
元素，包含指向数组中每个项目的主题的链接.此外，您输出括号内该特定主题的书籍数量. Rails的关联可以轻松地逐步完成关系并获取这样的信息.

现在，尝试使用http://localhost:3000/subject/list浏览主题列表.它将显示以下屏幕.

列出主题

为show方法创建视图

在/app/view/subject中创建一个文件show.rhtml，并使用以下代码填充它.

<h1><%= @subject.name -%></h1>
<ul>
   <% @subject.books.each do |c| %>
   <%= link_to c.title, :controller => 
      "book", :action => "show",:id => c.id -%>
   <% end %>
</ul>

现在，尝试点击任何主题，你会找到该主题下所有可用书籍的列表.

为创建方法创建视图

我们不会为创建方法创建视图，因为我们正在使用部分
而不是查看.在下一节中，我们将为create方法创建一个部分.

添加Ajax支持

要在Rails应用程序中获得Ajax支持，需要在布局中包含必要的
JavaScript文件. Rails捆绑了几个库，使用Ajax非常容易地生成
.两个库 -  原型和 script.aculo.us 非常受欢迎.

添加Prototype和script.aculo.us支持应用程序，在app/views/layouts中打开
standard.rhtml布局文件，在</head>之前添加以下行标记，并保存您的更改和减号;

<%= javascript_include_tag :defaults %>

这包括模板中的Prototype和script.aculo.us库，因此
可以从任何视图访问它们的效果.

现在，在app/views/subject/list.rhtml的底部添加以下代码.

<p id="add_link"><%= link_to_function("Add a Subject",
   "Element.remove('add_link'); Element.show('add_subject')")%></p>
<div id="add_subject" style="display:none;">
   <% form_remote_tag(:url => {:action => 'create'},
      :update => "subject_list", :position => :bottom,
      :html => {:id => 'subject_form'}) do %>
      Name: <%= text_field "subject", "name" %>
   <%= submit_tag 'Add' %>
   <% end %>
</div>

我们正在使用link_to_function而不是link_to方法，因为link_to_function方法使您能够利用Prototype JavaScript库的强大功能来进行一些简洁的DOM操作.

第二部分是add_subject< div>的创建.请注意，您可以使用CSS显示属性将
的可见性设置为默认隐藏.前面的link_to_function将更改此属性并显示< div>向用户提取添加新主题所需的输入.

接下来，您将使用 form_remote_tag 创建Ajax表单.这个Rails助手类似于 start_form_tag 标签，但是这里使用它来让Rails框架知道它需要触发这个方法的Ajax动作. form_remote_tag采用:action 参数，就像start_form_tag一样.

你还有两个额外的参数 :  :更新和:职位.

  • :update 参数告诉Rails的Ajax引擎哪个元素根据其id更新
    .在这种情况下，它是< ul>标记.

  • :position 参数告诉引擎将新添加的
    对象放在DOM中的位置.您可以将其设置在无序列表(:底部)或顶部(:顶部)的底部.

下一步，您创建标准表单字段并像以前一样提交按钮，然后使用end_form_tag包装以关闭< form>标签.确保事物在语义上是正确且有效的XHTML.

为create方法创建部分

我们正在调用 create 添加主题时的方法，并在此创建
方法中，我们使用一个局部.在实际实用之前，让我们实现这个部分.

在app/views/subject下，创建一个名为 _subject.rhtml的新文件.请注意，
所有部分都以开头的下划线(_)命名.

将以下代码添加到此文件中 :

<li id="subject_<%= subject.id %>">
   <%= link_to subject.name, :action => 'show', :id => subject.id %>
   <%= "(#{subject.books.count})" -%>
</li>

您现在已经完成并且可以轻松添加多个主题，而无需等待每个主题添加后刷新页面
.现在，尝试使用http://localhost:3000/subject/list浏览主题列表.它会显示以下屏幕.尝试添加一些主题.

Add Subject

当您按下添加按钮时，主题将添加到所有
可用主题的底部，您将感觉不到页面刷新.

← 上一节 下一节 →

相关菜鸟教程