jQuery Global Ajax Event Handlers

In the jQuery Ajax Introduction, we discussed about sending Ajax requests and processing returned data using jQuery. In this article we’ll discuss about Ajax event handler methods. These Ajax event handler methods are invoked when Ajax related events are triggered like sending an Ajax request, completion of an Ajax request, and error during Ajax request processing or upon successful Ajax requests.

These events are triggered on each Ajax request if the global property in jQuery.ajaxSetup() method is set to true. The default value for this property is true. Please note that these global events are not fired for cross-domain requests or JSONP requests irrespective of the value of global property. The jQuery.ajaxSetup() method is used to configure default values for future Ajax requests.

Buy: jQuery in Action

also read:

The following example sends an Ajax request to a static HTML resource and shows how these events are triggered.


<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
	$("#ajaxBtn").click( function() {
		$(".result").load("test.html");
	});

	$(".result").ajaxStart(function(){
		console.log('ajaxStart triggered');
	});

	$(".result").ajaxSend(function(){
		console.log('ajaxSend triggered');
	});

	$(".result").ajaxError(function(){
		console.log("ajaxError triggered.");
	});

	$(".result").ajaxComplete(function(){
		console.log('ajaxComplete triggered');
	});

	$(".result").ajaxStop(function(){
		console.log('ajaxStop triggered');
	});

	$(".result").ajaxSuccess(function() {
		console.log('ajaxSuccess triggered');
	});
      });
   </script>
   </head>
   <body>
     <div class="result"></div>
     <input type="button" id="ajaxBtn" value="Send Ajax Request"/>
  </body>
</html>

The following screen capture shows the successful Ajax request and the sequence of events triggered. Please take note of the .ajaxSuccess() event triggered since the Ajax request is successful.

However for the failed Ajax request, the sequence is pretty much same except that the .ajaxError event is triggered instead of .ajaxSuccess as shown below.

Summary of Ajax Event Handlers

.ajaxStart()

The .ajaxStart() event is triggered when an Ajax request starts. This event is invoked if there are no outstanding Ajax requests in progress.

$(".result").ajaxStart(function(){
console.log('ajaxStart triggered');
});

.ajaxSend()

The .ajaxSend() event is triggered just before an Ajax request is sent.

$(".result").ajaxSend(function(){
	console.log('ajaxSend triggered');
});

.ajaxSuccess()

The .ajaxSuccess() event is triggered when an Ajax request completes successfully without any error.

$(".result").ajaxSuccess(function() {
	console.log('ajaxSuccess triggered');
});

.ajaxError()

The .ajaxError() event is triggered when an Ajax request completes with error.

$(".result").ajaxError(function(){
console.log("ajaxError triggered.");
});

This event is not fired when .ajax() or .ajaxSetup() are called with global property set to false.

$(.result).ajaxError(function(event, request, settings) {
	console.log( "Error when requesting: " + settings.url);
});

If the Ajax request is failed because of any JavaScript exception, the exception object is passed
to this function as a fourth parameter.

$(.result).ajaxError(function(event, request, settings, exception) {
	console.log( "Error when requesting: " + settings.url);
});

.ajaxComplete()

The .ajaxComplete() event is fired when the Ajax request completes irrespective of the request is failed or succeeded.

$(".result").ajaxComplete(function(){
console.log('ajaxComplete triggered');
});

.ajaxStop()

The .ajaxStop() event is fired when all Ajax requests have been completed and no other Ajax request is pending for processing.

$(".result").ajaxStop(function(){
console.log('ajaxStop triggered');
});

The Ajax event handlers are great to get the exact status of the request. We can do pre-processing tasks like data preparation in the .ajaxStart() and .ajaxSend() methods just before sending any Ajax request. Error handling can be done in .ajaxError() method in case any Ajax request fails. The .ajaxSuccess() is useful to display acknowledgement message to the user upon successful completion of request. The events .ajaxComplete() and .ajaxStop() marks the end of Ajax request(s) so any clean up can be done in these events.

Buy: jQuery in Action