Ajax (Rails ajax, jQuery ajax)

Trong bài trước mình có giới thiệu về AJAXified Form ,nó sửa dụng ajax để lấy dữ liệu.

Vậy AJAXified Form là Rails ajax hay jQuery ajax?. Bài viết này mình sẽ giới thiệu về 2 kiểu này.

Giới thiệu về ajax.

Ajax là viết tắt của Asynchronous JavaScript và XML. Ajax không phải là một công nghệ duy nhất.Ajax là sự kết hợp của:

-XHTML

-CSS

-Cấu trúc DOM HTML

-Thao tác dữ liệu và trao đổi sử dụng XML

-Lấy dữ liệu sử dụng XMLHttpRequest

-JavaScript

Rails Ajax

Rails có một mô hình phù hợp đơn giản để thực hiện các hoạt động Ajax. Rails cung cấp sẵn các helper để hiển thị đối tượng có thể kích hoạt ajax trên trình duyệt.

• Kích hoạt ajax có thể là click button ,link hoặc có thể là nhập dữ liệu vào input
• Phương thức XMLHttpRequest sẽ gửi dữ liệu đến 1 handler trên server
• Server sẽ xử lý dữ liệu về phía client
• Client nhận được dữ liệu gửi về sẽ sử dụng để thay đổi trên web

Ví dụ về Rails Ajax

-Tạo 1 app

rails new ponies

-Generate scaffold

rails generate scaffold User name:string email:string
rake db:migrate

-Start server:

rails s

Tạo nút Delete bằng ajax: Trong file app/views/users/index.html.erb thêm remote: true

<% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' },
          remote: true, class: user_delete %></td>
      </tr>
<% end %>

-Tạo file destroy.js.erb

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

-Tạo phương thức response_to trong users_controller

   respond_to do |format|
      format.html { redirect_to ponies_url }
      format.json { head :no_content }
      format.js   { render :layout => false }
   end

-Testing? Chỉ cần thêm param remote: true vào form thì sẽ sử dụng ajax, ngoài ra có thể áp dụng cho link_to, ví du:

<%= link_to my_path, method: :delete, :remote => true do %>
  <i class="icon-trash"></i>
<% end %>

Về cách hoạt động nhận và gửi dữ liệu của rails ajax các bạn hãy xem bài AJAXified Form nhé

II> Jquery Ajax Cách thức hoạt động cũng giống như rails ajax, nhưng hành động kích hoạt ajax được bắt bằng jquery, sau đó nó cũng gửi request đến server, sau đó xử lý dữ liệu trả về.

Ví dụ : Có 1 form như sau :

<div id="custom_phase2">
  <%= form_for @zombie, url: custom_decomp_zombie_path(@zombie) do |f| %>
    <strong>Custom Phase via JSON</strong>
    <%= f.text_field :decomp %>
    <%= f.submit "Set" %>
  <% end %>
</div>

Form này không có remote: true nên không dùng ajax, nhưng ta có thể dùng jquery để dùng ajax khi submit form.

zombies_cotroller :

def custom_decomp
  @zombie = Zombie.find(params[:id])
  @zombie.decomp = params[:zombie][:decomp]
  @zombie.save
  respond_to do |format|
    format.js
    format.json { render json: @zombie.to_json(only: :decomp) }
  end
end

zombies.js

$(document).ready(function(){
  $('div#custom_phase2 form').on("submit",function(){
    url = $(this).attr('action');
    custom_decomp = $('div#custom_phase2 #zombie_decomp').val();

    $.ajax(
      type: 'put',
      url: url,
      data: { zombie: { decomp: custom_decomp } },
      dataType: 'json',
      success: function(){
        $('#decomp').text(json.decomp).effect('highlight')
        $('div#custom_phase2').fadeOut() if json.decomp == "Dead (again)"
    });
  });
})

Trên đây là bài tìm hiểu về rails ajax và jquery ajax. Mong được sự góp ý của mọi ngươi