Ruby on Rails - AJAX

Ajax là viết tắt của Ađồng bộ JavaScript và XML. Ajax không phải là một công nghệ đơn lẻ; nó là một bộ gồm nhiều công nghệ. Ajax kết hợp những điều sau:

XHTML để đánh dấu các trang web
CSS để tạo kiểu
Hiển thị động và tương tác bằng DOM
Thao tác và trao đổi dữ liệu bằng cách sử dụng XML
Truy xuất dữ liệu bằng XMLHttpRequest
JavaScript như chất keo gắn kết tất cả những điều này lại với nhau

Ajax cho phép bạn truy xuất dữ liệu cho một trang web mà không cần phải làm mới nội dung của toàn bộ trang. Trong kiến trúc web cơ bản, người dùng nhấp vào liên kết hoặc gửi biểu mẫu. Biểu mẫu được gửi đến máy chủ, sau đó sẽ gửi lại phản hồi. Phản hồi sau đó được hiển thị cho người dùng trên một trang mới.

Khi bạn tương tác với một trang web được hỗ trợ bởi Ajax, nó sẽ tải một công cụ Ajax ở chế độ nền. Công cụ được viết bằng JavaScript và trách nhiệm của nó là vừa giao tiếp với máy chủ web vừa hiển thị kết quả cho người dùng. Khi bạn gửi dữ liệu bằng biểu mẫu do Ajax cung cấp, máy chủ sẽ trả về một đoạn HTML chứa phản hồi của máy chủ và chỉ hiển thị dữ liệu mới hoặc đã thay đổi chứ không phải làm mới toàn bộ trang.

Để biết chi tiết đầy đủ về AJAX, bạn có thể xem qua Hướng dẫn AJAX của chúng tôi

Cách Rails triển khai Ajax

Rails có một mô hình đơn giản, nhất quán về cách nó triển khai các hoạt động Ajax. Khi trình duyệt đã kết xuất và hiển thị trang web ban đầu, các hành động khác nhau của người dùng khiến trình duyệt hiển thị một trang web mới (giống như bất kỳ ứng dụng web truyền thống nào) hoặc kích hoạt hoạt động Ajax -

Some trigger fires - Trình kích hoạt này có thể là người dùng nhấp vào nút hoặc liên kết, người dùng thực hiện các thay đổi đối với dữ liệu trên biểu mẫu hoặc trong một trường hoặc chỉ là trình kích hoạt định kỳ (dựa trên bộ đếm thời gian).
The web client calls the server- Một phương thức JavaScript, XMLHttpRequest , gửi dữ liệu được liên kết với trình kích hoạt đến một trình xử lý hành động trên máy chủ. Dữ liệu có thể là ID của hộp kiểm, văn bản trong trường mục nhập hoặc toàn bộ biểu mẫu.
The server does processing - Trình xử lý hành động phía máy chủ (Hành động bộ điều khiển Rails) - thực hiện điều gì đó với dữ liệu và trả về một đoạn HTML cho máy khách web.
The client receives the response - JavaScript phía máy khách, được Rails tạo tự động, nhận đoạn HTML và sử dụng nó để cập nhật một phần cụ thể của HTML của trang hiện tại, thường là nội dung của thẻ <div>.

Các bước này là cách đơn giản nhất để sử dụng Ajax trong ứng dụng Rails, nhưng với một chút thao tác bổ sung, bạn có thể yêu cầu máy chủ trả về bất kỳ loại dữ liệu nào theo yêu cầu Ajax và bạn có thể tạo JavaScript tùy chỉnh trong trình duyệt để thực hiện nhiều hơn các tương tác liên quan.

Ví dụ AJAX

Ví dụ này hoạt động dựa trên giàn giáo, khái niệm Hủy diệt hoạt động dựa trên ajax.

Trong ví dụ này, chúng tôi sẽ cung cấp, liệt kê, hiển thị và tạo các thao tác trên bảng ngựa con. Nếu bạn chưa hiểu về công nghệ giàn giáo thì chúng tôi khuyên bạn nên xem qua các chương trước và sau đó tiếp tục với AJAX trên Rails.

Tạo ứng dụng

Hãy để chúng tôi bắt đầu với việc tạo một ứng dụng Nó sẽ được thực hiện như sau:

rails new ponies

Lệnh trên tạo một ứng dụng, bây giờ chúng ta cần gọi thư mục ứng dụng bằng lệnh cd. Nó sẽ nhập vào một thư mục ứng dụng sau đó chúng ta cần gọi một lệnh giàn giáo. Nó sẽ được thực hiện như sau:

rails generate scaffold Pony name:string profession:string

Lệnh trên tạo ra khung với cột tên và nghề nghiệp. Chúng ta cần di chuyển cơ sở dữ liệu như lệnh sau

rake db:migrate

Bây giờ chạy ứng dụng Rails như lệnh sau

rails s

Bây giờ hãy mở trình duyệt web và gọi một url là http: // localhost: 3000 / ponies / new, Kết quả sẽ như sau

Tạo một Ajax

Bây giờ hãy mở app / views / ponies / index.html.erb bằng các trình soạn thảo văn bản phù hợp. Cập nhật dòng hủy của bạn bằng: remote => true,: class => 'delete_pony'. Cuối cùng, nó trông giống như sau.

Tạo một tệp, hủy bỏ.js.erb, đặt nó bên cạnh các tệp .erb khác của bạn (trong app / views / ponies). Nó sẽ trông như thế này -

Bây giờ, hãy nhập mã như được hiển thị bên dưới vào kill.js.erb

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

Bây giờ, hãy mở tệp bộ điều khiển của bạn được đặt tại app / controllers / ponies_controller.rb và thêm mã sau vào phương thức hủy như được hiển thị bên dưới:

# 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

Cuối cùng trang điều khiển như hình ảnh hiển thị.

Bây giờ chạy một ứng dụng, Đầu ra được gọi từ http: // localhost: 3000 / ponies / new, nó sẽ giống như hình sau

Nhấn vào nút tạo ngựa, nó sẽ tạo ra kết quả như sau

Bây giờ bấm vào nút quay lại, nó sẽ hiển thị tất cả thông tin đã tạo của ngựa con như hình ảnh minh họa

Cho đến bây giờ, chúng ta đang làm việc trên giàn giáo, bây giờ hãy nhấp vào nút hủy, nó sẽ gọi một cửa sổ bật lên như hình dưới đây, cửa sổ bật lên hoạt động dựa trên Ajax.

Nếu Click vào nút ok, nó sẽ xóa bản ghi khỏi pony. Ở đây tôi đã nhấp vào nút ok. Kết quả cuối cùng sẽ như sau: