如何在rails中实现简单的ajax请求

摘要

本文主要是作为一个分享Ajax基本原理和以及在ruby on rails中实现基本的Ajax的过程。

什么是Ajax?

Ajax 全称asynchronous javascript and xml,Ajax并不是一个新的技术，是已有技术的组合，主要用来实现客户端与服务器的异步通信效果，实现页面的局部刷新，现在的浏览器都支持原生的ajax请求。

Ajax基本原理

Ajax的原理简单来说就是通过XmlHttoRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作Dom而刷新页面。其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XmlHttpRequest有所了解。

而XmlHttpRequest是Ajax的核心机制，它是在IE5中首次被引入的，是一种支持异步请求的技术。简单来说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果。

基本步骤：

//创建XHR对象
var request = new xmlHttpRequest()
//配置XHR请求参数
request.open('GET',this.href+'?='+(new Date()),true);
//发送XHR请求
request.send(null);
//监听XHR响应状态
request.onreadystatechange = function(){
//当XHR响应成功的时候
if(request.readystate == 4 && request.states == 200){
//用XHR响应信息，来更新页面中指定的DOM元素内容
content.innerHTML = request.responseText;
}
}
//关闭原标签的默认行为，所有的点击由用户自定义的ajax请求来完成
return false;

关于rails的一点说明

那么到底什么是 Rails 呢？Rails 是建立在 Ruby 编程语言上的一种 Web 应用程序平台。Ruby 存在大约有 10 年了。和 Perl 以及 Python 一样，它也是一种开放源码的敏捷编程语言，完全支持面向对象编程。

Rails 作为一种应用程序框架，强调使用正确的 Web 应用程序模式，即模型-视图-控制器（MVC）。在这里，系统的模型部分通常用一组映射到数据库表的 ActiveRecord 对象表示。控制器部分是一个 Ruby 类，其方法可以对模型执行各种操作。视图一般就是通过 ERB 模板（ERB 是 Ruby 内置的文本模板包）生成的超文本标记语言代码（HTML），形式上和 PHP 或 JavaServer Pages（JSP）代码生成的 HTML 类似。视图也可以是可扩展标记语言（XML）、文本、JavaScript 代码、图片或者其他东西。

用户从 Rails Web 应用程序请求页面时，URL 通过路由系统发送，后者将请求发送给控制器。控制器从模型请求数据并发送给视图完成格式化。

创建 Rails 应用程序时，系统自动生成一些目录和基本文件。包括随系统安装的 JavaScript 文件目录、视图、模型和控制器目录，甚至还有存放从其他开发人员那里下载的插件的目录。

如何实现一个简单的Ajax请求

步骤1:创建新应用程序 步骤2：生成脚手架 步骤3：开始发出js请求并添加一些代码以获取所需结果。
创建一个应用程序并生成一个脚手架，即：

rails g scaffold products name:string price:inreger

然后就会生成对应的目录文件

在index.html.erb创建一个js请求新连接，即：

<%= link_to 'New Product', new_product_path, :remote => true, :id => "new_product_link" %>

然后在控制器中的new动作启动js请求以执行新操作，即：

  def new
    @product = Product.new

    respond_to do |format|
      format.html # new.html.erb
      format.json { render json: @product }
      format.js
    end
  end

然后我们在视图文件中的products目录下创建一个new.js.erb文件并添加一下代码行：

$('#new_product_link').hide().after('<%= j render("form") %>');

这将隐藏new_product_link并添加新的产品表单。点击你的首页的链接，它会加载表单。
但是我们要使它成为Ajax,就要像这样修改表单：

<%= form_for @product, :remote => true do |f| %> # adding remote=> true to form

现在刷新并尝试提交表单。表单将被提交，但请求在控制器端没有正确处理。以下是create 这个动作的代码：

    def create
      @product = Product.new(params[:product])
    
      respond_to do |format|
        if @product.save
          format.html { redirect_to @product, notice: 'Product was successfully created.' }
          format.json { render json: @product, status: :created, location: @product }
          format.js
        else
          format.html { render action: "new" }
          format.json { render json: @product.errors, status: :unprocessable_entity }
          format.js
        end
      end
    end

以及create.js.erb的相关代码

$('#new_product').remove();
$('#new_product_link').show();
$('#products').append(' @product)%>');

最后我们将index.html.erb稍作修改

<h1>Listing products</h1>
<table>
  <tr>
    <th>Name</th>
    <th>Price</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tbody id="products">
<% @products.each do |product| %>
<%= render "product", :product => product %>
<% end %>
</tbody>
</table>
<br />
<%= link_to 'New Product', new_product_path, :remote => true, :id => "new_product_link" %>

创建_product.html.erb

<tr id="product_<%= product.id %>">
  <td><%= product.name %></td>
  <td><%= product.price %></td>
  <td><%= link_to 'Show', product %></td>
  <td><%= link_to 'Edit', edit_product_path(product) %></td>
  <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>

运行后如图：

这样一个简单的ajax请求完成了。
参考文档：详细解析