Chúng ta cùng thử viết một Web app đơn giản có sử dụng Ajax bằng Ruby on Rails nhé! ??

Trong bài viết mình sẽ không đề cập đến các thao tác cơ bản nữa mà nói thẳng vào cách xây dựng Ajax luôn nên có thể hơi vắn tắt ^^.

# Mở đầu
—–
#### Ajax là gì ?
Ajax là viết tắt của 「Asynchronous Javascript + XML」, vietsub ra là「 Truyền tin không đồng bộ dựa vào JS và XML」. Ưu điểm của “Không đồng bộ” là kể cả khi nó chạy thì cũng không gây cản trở các quá trình khác của hệ thống.
* Truyên tin đồng bộ thì sẽ xử lý tuần tự từng câu lệnh một, xử lý xong câu lệnh này thì mới đến câu lệnh tiếp theo.
* Còn Truyên tin không đồng bộ thì ngược lại, nó sẽ liên tục thực hiện các câu lệnh sau bất chấp câu lệnh hiện tại đã xong hay chưa. Việc này sẽ giúp cho trải nghiệm người dùng mượt mà hơn vì không phải mất thời gian chờ xử lý những câu lệnh dài dòng, tốn thời gian. **Chẳng hạn như người dùng có thể thao tác liên tục trên website mà không cần phải reload lại trang.**
➤ Chính vì việc xử lý câu lệnh bất tuần tự như này mà việc phát triển các ứng dụng có dùng Ajax cũng sẽ khó và tốn nhiều công sức hơn ^^.

***Ví dụ về việc áp dụng Ajax trong thực tế:** Chức năng bấm Like và Comment của Facebook, chức năng Thêm vào giỏ hàng của các Shop online…vv..*
Các bạn có thể đọc thêm về Ajax tại đây nha https://www.tutorialspoint.com/ajax/what_is_ajax.htm.

Để sử dụng Ajax thì có nhiều cách khác nhau nhưng phổ biến nhất vẫn là sử dụng Jquery. Ở bài viết này mình cũng sử dụng Jquery để viết các chức năng của Ajax ?.

# Let’s start !

—–
> Ruby version: 2.7.2
> Rails version : 6.1.5
> Database : default SQLite3
>

Mình sẽ tạo app chỉ với một chức năng là create, các chức năng khác các bạn cũng có thể làm tương tự.

## 1. Tạo Controller và model
* Đầu tiên, mình tạo một Rails app mới tên là testapp.
Mở Terminal và cùng làm như sau:

$ rails new testapp


Đợi chạy xong thì direct địa chỉ đến vị trí app vừa tạo

$ cd testapp


* Tạo controller có tên là posts với trang index

~/testapp$ rails g controller posts index



* Tạo model post với column là title, data type là text

~/testapp$ rails g model post title:text



* Tạo model thì không thể thiếu lệnh migrate.

~/testapp$ rails db:migrate


## 2. Xây dựng views và validation
* Muốn truy cập được vào trang web thì phải đầu tiên cài đặt routing phải không nào! ^^
testapp/config/route.rb
ruby
Rails.application.routes.draw do
resources :posts, only: [:index, :create]
root "posts#index"
end

resources chỉ áp dụng cho method index và create.

* Tiếp theo, các bạn hãy truy cập vào file index.html.erb bằng đường dẫn testapp/app/views/post/index.html.erb và thêm vào đoạn code dưới đây.
html

Posts#index

Find me in app/views/posts/index.html.erb


<%= form_for @post, remote: true do |f| %>
<%= f.text_field :title, class: "input-box" %>
<%= f.submit %>
<% end %>

Đoạn code trên mình dùng form_for nên phải có thêm remote: true, nếu các bạn dùng form_with thì không cần thêm remote: true vì trong form_with thì default của remote đã là true rồi. Nếu thay bằng form_with mà bị lỗi thì các bạn hãy thử restart lại server vài lần rồi vào lại xem sao nhé.

Các bạn có thể thay form_for bằng form_with như sau:

html
<%= form_with model: @post do |f| %>
<%= f.text_field :title, class: "input-box" %>
<%= f.submit %>
<% end %>


* Bên trên mình có dùng <%= render "post/post, post: post %> nên bây giờ phải tạo partial file.
Các bạn vào folder testapp/app/views/post và tạo file mới có tên _post.html.erb. Sau đó thêm vào file đoạn code sau:
html
<%= post.id %>-
<%= post.title %>


* Không được bỏ trống :title khi tạo post. File testapp/app/models/post.rb sửa như sau.
ruby
class Post < ApplicationRecord validates :title, presence: true end

## 3. Xây dựng Controller và template
* Xong phần views rồi thì đến phần controller nào, các bạn sửa file testapp/app/controllers/posts_controller.rb như dưới đây.
ruby
class PostsController < ApplicationController def index @posts = Post.all @post = Post.new end def create @post = Post.new(post_params) respond_to do |format| if @post.save format.js end end end private def post_params params.require(:post).permit(:title) end end

* Ở bài viết này, mình dùng Jquery để xây dựng Ajax. Mình sẽ import Jquery bằng cách thêm CDN của Jquery vào phần của file testapp/app/views/layout/application.html.erb.
html





<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>


<%= yield %>



* Bước cuối cùng là tạo tempate.

Tong controller ta vừa tạo hàm def create nên ta cũng cần phải tạo một template cho create ở phần views. Tuy nhiên vì ta muốn sử dụng Ajax nên template của ta không phải là ~~create.html.erb~~ mà là create.js.erb.
Vào folder testapp/app/views/posts và tạo file mới có tên create.js.erb. Sau đó thêm vào file đoạn code sau.
javascript
$('.box').append("<%= j render @post %>");
$('.input-box').val("");


$('.box').append("<%= j render @post %>"); : Ở trang index.html.erb ta đặt phần hiển thị post trong thẻ