catch all ajax requests in jquery

Question

I'm wanting to show a "Loading" progress bar every time an ajax request is sent. Is it possible to be notified ANYTIME an ajax request is sent using jQuery?

Answer 1

You could use the $.ajaxSetup() method to set global AJAX properties that will apply for the entire page:

$.ajaxSetup({
    beforeSend: function() {
        // show progress spinner
    },
    complete: function() {
        // hide progress spinner
    }
});

Answer 2

For some reason or another $.ajaxSetup() wasn't working for me. After reading through the docs though, I found the following:

Note: Global callback functions should be set with their respective global Ajax event handler methods—.ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()—rather than within the options object for $.ajaxSetup().

Try $.ajaxStart() and $.ajaxComplete() instead:

$(document).ajaxStart(function () {
    console.log('Request Initiated');
});
$(document).ajaxComplete(function () {
    console.log('Request Complete');
});