jQuery - ajax events

Ajax requests produce a number of different events that you can subscribe to. Here's a full list of the events and in what order they are broadcast.
There are two types of events −
These are callbacks that you can subscribe to within the Ajax request object.
$.ajax({
   beforeSend: function(){
      // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......
});
These events are broadcast to all elements in the DOM, triggering any handlers which may be listening. You can listen for these events like so −
$("#loading").bind("ajaxSend", function(){
   $(this).show();
}).bind("ajaxComplete", function(){
   $(this).hide();
});
Global events can be disabled, for a particular Ajax request, by passing in the global option, like so −
$.ajax({
   url: "test.html",
   global: false,
   // ...
});
Here is the full list of Ajax events. The ajaxStart and ajaxStop events are events that relate to all Ajax requests together.
ajaxStart (Global Event) This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
ajaxStart (Global Event) This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
beforeSend (Local Event) This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
beforeSend (Local Event) This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
ajaxSend (Global Event) This global event is also triggered before the request is run.
ajaxSend (Global Event) This global event is also triggered before the request is run.
success (Local Event) This event is only called if the request was successful (no errors from the server, no errors with the data).
success (Local Event) This event is only called if the request was successful (no errors from the server, no errors with the data).
ajaxSuccess (Global Event) This event is also only called if the request was successful.
ajaxSuccess (Global Event) This event is also only called if the request was successful.
error (Local Event) This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
error (Local Event) This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
ajaxError (Global Event) This global event behaves the same as the local error event.
ajaxError (Global Event) This global event behaves the same as the local error event.
complete (Local Event) This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
complete (Local Event) This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
ajaxComplete (Global Event) This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
ajaxComplete (Global Event) This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
ajaxStop (Global Event) This global event is triggered if there are no more Ajax requests being processed.
ajaxStop (Global Event) This global event is triggered if there are no more Ajax requests being processed.

    27 Lectures 
     1 hours 

 Mahesh Kumar

    27 Lectures 
     1.5 hours 

 Pratik Singh

    72 Lectures 
     4.5 hours 

 Frahaan Hussain

    60 Lectures 
     9 hours 

 Eduonix Learning Solutions

    17 Lectures 
     2 hours 

 Sandip Bhattacharya

    12 Lectures 
     53 mins

 Laurence Svekis
 Print
 Add Notes
 Bookmark this page