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 −

Local 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
   }
   // ......
});

Global Events

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,
   // ...
});

Events

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.

• 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.

• 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.

• 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.

• 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.

• ajaxStop (Global Event) This global event is triggered if there are no more Ajax requests being processed.