Ruby on Rails - 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 示例

该示例基于脚手架，Destroy 概念基于 ajax 工作。

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

创建应用程序

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

rails new ponies

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

rails generate scaffold Pony name:string profession:string

上面的命令生成带有名称和职业列的脚手架。我们需要迁移数据库如下命令

rake db:migrate

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

rails s

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

AJAX

创建 Ajax

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

AJAX

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

AJAX

现在在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

最后控制器页面如图所示。

AJAX

现在运行一个应用程序，从 http://localhost:3000/ponies/new 调用输出，它将如下图所示

AJAX

按创建小马按钮，将生成如下结果

AJAX

现在点击后退按钮，它将显示所有小马创建的信息，如图所示

AJAX

到目前为止，我们正在开发脚手架，现在点击销毁按钮，它将调用一个弹出窗口，如下图所示，该弹出窗口基于Ajax工作。

AJAX

如果单击“确定”按钮，则会从 pony 中删除该记录。在这里我点击了确定按钮。最终输出如下 -

AJAX