全局中止所有jQuery AJAX请求

Question

Is there a way to abort all Ajax requests globally without a handle on the request object?

The reason I ask is that we have quite a complex application where we are running a number of different Ajax requests in the background by using setTimeOut(). If the user clicks a certain button we need to halt all ongoing requests.

Answer 1

You need to call abort() method:

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){..........}
});

After that you can abort the request:

request.abort();

This way you need to create a variable for your ajax request and then you can use the abort method on that to abort the request any time.

Also have a look at:

• Aborting Ajax

Answer 2

You cannot abort all active Ajax requests if you are not tracking the handles to them.

But if you are tracking it, then yes you can do it, by looping through your handlers and calling .abort() on each one.

Answer 3

You can use this script:

// $.xhrPool and $.ajaxSetup are the solution
$.xhrPool = [];
$.xhrPool.abortAll = function() {
    $(this).each(function(idx, jqXHR) {
        jqXHR.abort();
    });
    $.xhrPool = [];
};

$.ajaxSetup({
    beforeSend: function(jqXHR) {
        $.xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = $.xhrPool.indexOf(jqXHR);
        if (index > -1) {
            $.xhrPool.splice(index, 1);
        }
    }
});

Check the result at http://jsfiddle.net/s4pbn/3/ .

Answer 4

This answer to a related question is what worked for me:

https://stackoverflow.com/a/10701856/5114

Note the first line where the @grr says: "Using ajaxSetup is not correct"

You can adapt his answer to add your own function to window if you want to call it yourself rather than use window.onbeforeunload as they do.

// Most of this is copied from @grr verbatim:
(function($) {
  var xhrPool = [];
  $(document).ajaxSend(function(e, jqXHR, options){
    xhrPool.push(jqXHR);
  });
  $(document).ajaxComplete(function(e, jqXHR, options) {
    xhrPool = $.grep(xhrPool, function(x){return x!=jqXHR});
  });
  // I changed the name of the abort function here:
  window.abortAllMyAjaxRequests = function() {
    $.each(xhrPool, function(idx, jqXHR) {
      jqXHR.abort();
    });
  };
})(jQuery);

Then you can call window.abortAllMyAjaxRequests(); to abort them all. Make sure you add a .fail(jqXHRFailCallback) to your ajax requests. The callback will get 'abort' as textStatus so you know what happened:

function jqXHRFailCallback(jqXHR, textStatus){
  // textStatus === 'abort'
}