Is there a way to monitor all ajax requests that have been made using JQuery on a page, and to have a callback function be called with the result of each request?

E.g I make my ajax requests:

$.get('foo', {foo: bar} );
$.get('bar', {bar: foo} );

And then I have a function called each time any of those ajax requests is pleted, with the url that was referenced, and the result of the request?

Is there a way to monitor all ajax requests that have been made using JQuery on a page, and to have a callback function be called with the result of each request?

E.g I make my ajax requests:

$.get('foo', {foo: bar} );
$.get('bar', {bar: foo} );

And then I have a function called each time any of those ajax requests is pleted, with the url that was referenced, and the result of the request?

• javascript
• jquery
• ajax

3 Answers 3

Check out jQuery's "ajaxComplete"; it should be exactly what you're looking for:

http://api.jquery./ajaxComplete/

Using it, you can register a handler and that handler will get invoked on every ajax call.

$.ajaxComplete(function() {
    alert('it worked');
});

$.get('foo', {foo: bar} ); // "it worked" would get alerted when this pletes

To see the response that came back, just use the XHR object that gets provided, like so:

$.ajaxComplete(function(e, xhr) {
    alert('it worked, and the response was:' + xhr.responseHTML);
});

$.get('foo', {foo: bar} );

And to check the URL you can use a third "settings" arg that gets provided:

$.ajaxComplete(function(e, xhr, settings) {
    alert('it worked, and the response was:' + xhr.responseHTML);
    alert('and the original URL was:' + settings.url);
});

$.get('foo', {foo: bar} );

EDIT

As Yusuf K. helpfully pointed out in the ments, if you're using one of the new versions of jQuery such as jQuery 3, things have moved around. ajaxComplete is no longer a static method, but is instead an instance method that you call on document:

$(document).ajaxComplete(function(e, xhr, settings) { // ...

Example of accessing url for any request using ajaxComplete... taken straight from docs:

http://api.jquery./ajaxComplete/

$('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxComplete handler. The result is ' +
                     xhr.responseHTML);
  }
});

If you console.log() xhr and settings objects to your browser console you can see all the data you have access to within ajaxComplete

You can store the requests in an array and use the chained callbacks if that's what you mean:

function callback( data ) {
  // do something with the request
}

var requests = [];
requests.push( $.get('foo', { foo: bar }) ); // add to array and run request
requests.push( $.get('bar', { bar: foo }) );

requests.forEach(function( request ) {
  request.done(function( data ) {
    callback( data );
  });
});