Ajax Global Event HandlersS2C Home « 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.

Ajax Global Event Handlers Methods

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.

The six methods which make up the jQuery Ajax Global Event Handlers suite are listed in the table below, click a link to go to examples for that method.

Ajax Global Event Handlers 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.

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
    $('#div1').ajaxComplete(function(event, jqXHR, ajaxOptions) {
       $(this).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.

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
    $('#div2').ajaxError(function(event, jqXHR, ajaxSettings, thrownError) {
       $(this).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.

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
    $('#div3').ajaxSend(function(event, jqXHR, ajaxSettings) {
       $(this).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.

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(){
    // Register global event handler and attach to 'div4' element
    $('#div4').ajaxStart(function(event, jqXHR, ajaxSettings) {
       $(this).append('Triggered the ajaxStart() global event handler.');
    });
    $.get( "../js/get7.js" );
    $.post( "../js/post4.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.

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
    $('#div5').ajaxStop(function() {
       $(this).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.

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
    $('#div6').ajaxSuccess(function(event, jqXHR, ajaxSettings) {
       $(this).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

What's Next?

This concludes the lessons for the jQuery side of the site and we hope you learned from them. Remember to pop back and use the fully linked reference covering the jQuery 3.5 major release giving syntax and usage, arranged in sections for easy retrieval of relevant information.