Ajax Event trong jQuery



Ajax request tạo ra số lượng các sự kiện khác nhau mà bạn có thể đăng ký tới. Ở đây là danh sách đầy đủ các sự kiện và theo thứ tự nào chúng là broadcast.

Có hai kiểu sự kiện:

Các sự kiện local

Đó là các callback mà bạn có thể đăng ký trong đối tượng Ajax request.

$.ajax({
   beforeSend: function(){
      // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......
 });

Các sự kiện Global

Những sự kiện này là broadcast tới tất cả phần tử trong DOM, kích hoạt bất kỳ Handler mà nó đang lắng nghe.

$("#loading").bind("ajaxSend", function(){
   $(this).show();
}).bind("ajaxComplete", function(){
   $(this).hide();
 });

Các sự kiện global có thể bị vô hiệu hóa, với một Ajax request cụ thể, bằng việc truyền tùy chọn global như sau:

$.ajax({
   url: "test.html",
   global: false,
   // ...
});

Các sự kiện

Dưới đây là danh sách các Ajax Event. Trong đó hai sự kiện ajaxStart và ajaxStop là các sự kiện mà liên quan tới tất cả Ajax request.

  • ajaxStart (Global Event) Sự kiện này là broadcast nếu một Ajax request được bắt đầu và không có Ajax request nào khác hiện tại đang chạy.

  • beforeSend (Local Event) Sự kiện này, mà được kích hoạt trươc khi một Ajax request được bắt đầu, cho phép bạn sửa đổi đối tượng XMLHttpRequest (thiết lập thêm header nếu cần thiết.)

  • ajaxSend (Global Event) Sự kiện global này cũng được kích hoạt trước khi request chạy.

  • success (Local Event) Sự kiện này chỉ được gọi nếu request là thành công (không có lỗi từ server, không có lỗi với dữ liệu).

  • ajaxSuccess (Global Event) Sự kiện này cũng chỉ được gọi nếu request là thành công.

  • error (Local Event) Sự kiện này chỉ được gọi nếu một lỗi xảy ra với request (bạn có thể không bao giờ có một callback vừa thành công vừa bị lỗi với một request).

  • ajaxError (Global Event) Sự kiện global này tương tự như sự kiện lỗi nội bộ.

  • complete (Local Event) Sự kiện này được gọi bất chấp việc request là thành công hoặc không. Bạn sẽ luôn luôn nhận một callback đầy đủ, ngay cả với các request đồng bộ.

  • ajaxComplete (Global Event) Sự kiện này tương tự như sự kiện complete và sẽ được kích hoạt mỗi khi một Ajax request hoàn thành.

  • ajaxStop (Global Event) Sự kiện global này được kích hoạt nếu không còn Ajax request nào đang được xử lý.

Các bài học jQuery khác tại VietJack:


jquery_ajax.jsp