Ajax Global Event Handlers JQ Home  <<  JQ Advanced  <<  Ajax Global Event Handlers

In our final lesson on Ajax we explore the methods that make up the jQuery Ajax Global Event Handlers.

The global event handler methods can be used as 'catch all' handlers for all Ajax requests that are made during the duration of a pages lifecycle. With the information returned from each handler you can get a lot of details returned from your Ajax requests which can help with error correction as well as the smooth running and maintenance of your applications.

jQuery ajax methods return a jqXHR object which is a superset of the browser's native XMLHttpRequest object. The jqXHR object implements the Promise interface, giving it all the properties, methods, and behavior of a Promise as discussed in The Deferred Object lesson.

Global Event Handlers

The six Global Event Handlers methods are listed in the table below, click a link to go to examples for that method.

The results shown in each division may vary dependant upon the order in which you press the buttons in the lesson. This is because we are firing off a global when we hit a particular button. Of course in a real world scenario you would set the global event handlers at the start of the application to catch the globals you wished to handle.

Global Event Handler Methods Description
.ajaxComplete()Register an Ajax Event handler to be called when Ajax requests complete.
.ajaxError()Register an Ajax Event handler to be called when Ajax requests complete with an error.
.ajaxSend()Register an Ajax Event handler to be called before Ajax requests are sent.
.ajaxStart()Register an Ajax Event handler to be called when the first Ajax request starts.
.ajaxStop()Register an Ajax Event handler to be called when Ajax requests are finished.
.ajaxSuccess()After an Ajax request ends successfully trigger all handlers attached to it.

The .ajaxComplete() Method Top

Register an Ajax Event handler to be called when Ajax requests complete.

As of jQuery 1.8, the .ajaxComplete() method should only be attached to document.

We will be using this methods only signature .ajaxComplete( handler(event, jqXHR, ajaxSettings)) for our example.

In the example below when we press the button the first time, we use the .ajaxComplete() method to set up a global event handler to be run for each Ajax request. The handler is fired at the end of each request and we output a message giving some information about the request.


$(function(){
  $('#btn1').one('click', function(){
    // Register global event handler and attach to 'div1' element
    $(document).ajaxComplete(function(event, jqXHR, ajaxOptions) {
       $('#div1').append('Triggered the ajaxComplete() global event handler for url: ' 
                      + ajaxOptions.url + '. Status: ' + jqXHR.status + '. Status text: ' 
                      + jqXHR.statusText + '.<br><br>');
    });
    $.ajax( "../../js/get1.js", {
      dataType: "script",
      success: function() { 
        $('#div1').append('The request was a sucesss! <br>');
      }
    });
    $.getScript( "../../js/get6.js" );
    $.post( "../../js/post1.js" );
  });
});

div1. Some initial text.

Press the button below to action the above code:

The .ajaxError() Method Top

Register an Ajax Event handler to be called when Ajax requests complete with an error.

As of jQuery 1.8, the .ajaxError() method should only be attached to document.

We will be using this methods only signature .ajaxError( handler(event,
jqXHR, ajaxSettings, thrownError) ) for our example.

When we press the button the first time, we use the .ajaxError() method to set up a global event handler to be run for each Ajax request. The handler is fired at the end of each request that finishes with an error. In this case the handler outputs a message giving some information about the request error.


$(function(){
  $('#btn2').one('click', function(){
    // Register global event handler and attach to 'div2' element
    $(document).ajaxError(function(event, jqXHR, ajaxSettings, thrownError) {
       $('#div2').append('Triggered the ajaxError() global event handler for url: ' 
                      + ajaxSettings.url + '. Status: ' + jqXHR.status + '. Status text: ' 
                      + jqXHR.statusText + '. Error: ' + thrownError + '.<br><br>');
    });
    $.ajax( "../../js/get2.js", {
      dataType: "script",
      success: function() { 
        $('#div2').append('The request was a sucesss! <br>');
      }
    });
    $.ajax( "../../../js/get22.js", {
      dataType: "script",
      success: function() { 
        $('#div2').append('The request was a sucesss! <br>');
      }
    });
    $.get( "../../js/get4.js" );
    $.post( "../../js/post2.js" );
  });
});

div2. Some initial text.

Press the button below to action the above code:

The .ajaxSend() Method Top

Register an Ajax Event handler to be called before Ajax requests are sent.

As of jQuery 1.8, the .ajaxSend() method should only be attached to document.

We will be using this methods only signature .ajaxSend( handler(event, jqXHR, ajaxSettings) ) for our example.

When we press the button the first time, we use the .ajaxSend() method to set up a global event handler to be run for each Ajax request. The handler is fired every time an Ajax request is about to be sent. In this case the handler outputs a message giving some information about the request to be sent.


$(function(){
  $('#btn3').one('click', function(){
    // Register global event handler and attach to 'div2' element
    $(document).ajaxSend(function(event, jqXHR, ajaxSettings) {
       $('#div3').append('Triggered the ajaxSend() global event handler for url: ' 
                      + ajaxSettings.url + '.<br><br>');
    });
    $.ajax( "../../js/get3.js", {
      dataType: "script",
      success: function() { 
        $('#div3').append('The request was a sucesss! <br>');
      }
    });
    $.ajax( "../../js/get33.js", {
      dataType: "script",
      success: function() { 
        $('#div3').append('The request was a sucesss! <br>');
      }
    });
    $.get( "../../js/get5.js" );
    $.post( "../../js/post3.js" );
  });
});

div3. Some initial text.

Press the button below to action the above code:

The .ajaxStart() Method Top

Register an Ajax Event handler to be called when an Ajax request starts and no other requests are in progress.

As of jQuery 1.8, the .ajaxStart() method should only be attached to document.

We will be using this methods only signature .ajaxStart( handler() ) for our example.

When we press the button the first time, we use the .ajaxStart() method to set up a global event handler to be run for each Ajax request. The handler is fired every time an Ajax request is about to be sent. In this case the handler outputs a message giving some information about the request to be sent.


$(function(){
  $('#btn4').one('click', function(){
    $(document).ajaxStart(function(event, jqXHR, ajaxSettings) {
       $('#div4').append('Triggered the ajaxStart() global event handler for get7.js<br>');
    });
  });
  $('#div4').on('click', function(){
    $.get( "../../js/get7.js" );
  });
});

div4. Some initial text.

Press the button below to action the above code:

The .ajaxStop() Method Top

Register an Ajax Event handler to be called when Ajax requests are finished.

As of jQuery 1.8, the .ajaxStop() method should only be attached to document.

We will be using this methods only signature .ajaxStop( handler() ) for our example.

In the example below when we press the button the first time, we use the .ajaxStop() method to set up a global event handler to be run for each Ajax request. The handler is fired when all Ajax requests have finsihed. In this case the handler outputs a message informing us all requests are finished.


$(function(){
  $('#btn5').one('click', function(){
    // Register global event handler and attach to 'div5' element
    $(document).ajaxStop(function() {
       $('#div5').append('Triggered the ajaxStop() global event handler.<br>');
    });
    $.get( "../../js/get8.js" );
    $.post( "../../js/post5.js" );
  });
});

div5. Some initial text.

Press the button below to action the above code:

The .ajaxSuccess() Method Top

After an Ajax request ends successfully trigger all handlers attached to it.

As of jQuery 1.8, the .ajaxSuccess() method should only be attached to document.

We will be using this methods only signature jQuery.get( url [, data] [, function(data, textStatus, jqjqXHR)] [, dataType] ) for our example.

When we press the button the first time, we use the .ajaxSuccess() method to set up a global event handler to be run for each Ajax request. The handler is fired on successful completion of a request and we output a message giving some information about the request.


$(function(){
  $('#btn6').one('click', function(){
    // Register global event handler and attach to 'div6' element
    $(document).ajaxSuccess(function(event, jqXHR, ajaxSettings) {
       $('#div6').append('Triggered the ajaxSuccess() global event handler for url: ' 
                      + ajaxSettings.url + '. Status: ' + jqXHR.status + '. Status text: ' 
                      + jqXHR.statusText + '.<br><br>');
    });
    $.getScript( "../../js/get9.js" );
    $.post( "../../js/post6.js" );
  });
});

div6. Some initial text.

Press the button below to action the above code:

Lesson 11 Complete

In this lesson we looked at the Ajax Global Event Handlers.

Related Tutorials

jQuery Advanced - Lesson 8: Ajax Low-Level Interface
jQuery Advanced - Lesson 9: Ajax Shorthand Methods
jQuery Advanced - Lesson 10: Ajax Helper Functions

Reference

Methods

Events - .on() method
Events - .one() method
Manipulation - .append() method
Ajax Global Event Handlers- .ajaxComplete() method
Ajax Global Event Handlers - .ajaxError() method
Ajax Global Event Handlers - .ajaxSend() method
Ajax Global Event Handlers - .ajaxStart() method
Ajax Global Event Handlers - .ajaxStop() method
Ajax Global Event Handlers - .ajaxSuccess() method