Ruby on Rails - AJAX

Ajax 代表 Asynchronous 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 示例

此示例基于 scaffold 工作，Destroy 概念基于 ajax 工作。

在此示例中，我们将在小马表上提供、列出、显示和创建操作。如果您不了解脚手架技术，那么我们建议您先阅读前面的章节，然后继续使用 AJAX on Rails。

创建应用程序

让我们从创建应用程序开始它将按如下方式完成 −

rails new ponies

上面的命令创建了一个应用程序，现在我们需要使用 cd 命令调用应用程序目录。它将进入应用程序目录，然后我们需要调用脚手架命令。它将按如下方式完成 −

rails generate scaffold Pony name:string profession:string

上述命令生成了带有姓名和职业列的脚手架。我们需要按照以下命令迁移数据库

rake db:migrate

现在按照以下命令运行 Rails 应用程序

rails s

现在打开 Web 浏览器并调用 http://localhost:3000/ponies/new 这样的 URL，输出将如下所示

创建 Ajax

现在使用合适的文本编辑器打开 app/views/ponies/index.html.erb。使用 :remote => true、:class => 更新您的 destroy 行'delete_pony'。最后，它看起来如下所示。

创建一个文件 destroy.js.erb，将其放在其他 .erb 文件旁边(在 app/views/ponies 下)。它应该看起来像这样 −

现在在 destroy.js.erb 中输入如下所示的代码

$('.delete_pony').bind('ajax:success', function() {
   $(this).closest('tr').fadeOut();
});

现在打开位于 app/controllers/ponies_controller.rb 的控制器文件，并在 destroy 方法中添加以下代码，如下所示 −

# DELETE /ponies/1
# DELETE /ponies/1.json
def destroy
   @pony = Pony.find(params[:id])
   @pony.destroy
   
   respond_to do |format|
      format.html { redirect_to ponies_url }
      format.json { head :no_content }
      format.js   { render :layout => false }
   end
   
end

最终控制器页面如下图所示。