监控JQuery提出的所有AJAX请求？

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?

有没有办法监视在页面上使用JQuery进行的所有ajax请求，并使用每个请求的结果调用回调函数？

E.g I make my ajax requests:

例如，我提出了我的ajax请求：

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

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

然后，每次完成任何ajax请求时，我都会调用一个函数，其中包含引用的url和请求的结果？

3 个解决方案

#1

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

查看jQuery的“ajaxComplete”;它应该是你正在寻找的：

http://api.jquery.com/ajaxComplete/

http://api.jquery.com/ajaxComplete/

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

使用它，您可以注册一个处理程序，并在每次ajax调用时调用该处理程序。

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

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

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

要查看返回的响应，只需使用提供的XHR对象，如下所示：

$.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:

要检查URL，您可以使用提供的第三个“设置”arg：

$.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 comments, 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:

正如Yusuf K.在评论中有用地指出的那样，如果你正在使用jQuery 3等jQuery的新版本，那么事情已经发生了变化。 ajaxComplete不再是静态方法，而是您在文档上调用的实例方法：

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

#2

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

使用ajaxComplete访问任何请求的URL的示例...直接从docs获取：

http://api.jquery.com/ajaxComplete/

http://api.jquery.com/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

如果您将console.log（）xhr和设置对象添加到浏览器控制台，则可以在ajaxComplete中查看您有权访问的所有数据

#3

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 );
  });
});