Rails 2.1 上的 AJAX

Ajax代表同步JavaScript和XML。Ajax 不是一项单一技术；它是一种技术。它是多种技术的组合。Ajax 包含以下内容 -

  • 用于网页标记的 XHTML
  • CSS 样式
  • 使用DOM进行动态显示和交互
  • 使用 XML 进行数据操作和交换
  • 使用 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 的其余概念时，我们以 Library 为例。那里有一个名为主题的表，我们在迁移时添加了一些主题。到目前为止，我们还没有提供任何在此表中添加和删除主题的过程。

在这个例子中，我们将提供、列出、显示和创建主题表的操作。如果您对前面章节中解释的图书馆信息系统没有任何了解，那么我们建议您先完成前面的章节，然后继续 AJAX on Rails。

创建控制器

让我们为主题创建一个控制器。它将按如下方式完成 -

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

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

show 方法实现

def show
   @subject = Subject.find(params[:id])
end

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

create方法的实现

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

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

仅当使用partial时才会发生这种情况。我们不会编写完整的视图文件，而是在 /app/view/subject 目录中编写部分视图文件。我们很快就会看到它。首先，让我们为其他方法创建视图文件。

创建视图

现在，我们将为所有方法创建视图文件，但创建方法除外，我们将为其创建部分视图文件。

为列表方法创建视图

在 /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方法创建视图

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

添加 Ajax 支持

要在 Rails 应用程序中获得 Ajax 支持，您需要在布局中包含必要的 JavaScript 文件。Rails 捆绑了多个库，使 Ajax 的使用变得非常容易。两个库——prototype和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与 start_form_tag 一样采用:action参数。

您还有两个附加参数 - :update和:position。

  • :update参数告诉 Rails 的 Ajax 引擎根据其 id 更新哪个元素。在本例中，它是 <ul> 标记。

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

接下来，您像以前一样创建标准表单字段并提交按钮，然后用 end_form_tag 包裹起来以关闭 <form> 标记。确保内容在语义上正确且 XHTML 有效。

为 create 方法创建 Partial

我们在添加主题时调用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 浏览您的主题列表。它将向您显示以下屏幕。尝试添加一些主题。

添加主题

当您按下“添加”按钮时，主题将被添加到所有可用主题的底部，并且您不会有页面刷新的感觉。