Abort Ajax Requests Using Jquery

Abort Ajax requests using jQuery

Most of the jQuery Ajax methods return an XMLHttpRequest (or the equivalent) object, so you can just use abort().

See the documentation:

• abort Method (MSDN). Cancels the current HTTP request.
• abort() (MDN). If the request has been sent already, this method will abort the request.

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

UPDATE:
As of jQuery 1.5 the returned object is a wrapper for the native XMLHttpRequest object called jqXHR. This object appears to expose all of the native properties and methods so the above example still works. See The jqXHR Object (jQuery API documentation).

UPDATE 2:
As of jQuery 3, the ajax method now returns a promise with extra methods (like abort), so the above code still works, though the object being returned is not an xhr any more. See the 3.0 blog here.

UPDATE 3: xhr.abort() still works on jQuery 3.x. Don't assume the update 2 is correct. More info on jQuery Github repository.

Cancel AJAX request if new one submitted

EDITED

Ajax call can be aborted by abort method used on ajax request object, but even usage this method not give as 100% certainty that server side not handled our request. So my proposition is to block user interface, not abort ajax calls.

Some more information about abort - How to cancel/abort jQuery AJAX request?

EXAMPLE BLOCK UI:

So to block many ajax calls we need some variable to save current ajax state, and set it to true in begging ( ajax enabled ), when ajax is called set it to false, when ajax return in response set it again to true. And most important check this variable when user clicks, if variable is false, then no other ajax can be called and stop execution.

var canSendAjax=true;//our state variable

$('.button').click(function() {

    if (!canSendAjax)
    return; //ajax is sending block execution

    $('this').toggleClass('class1 class2')
    // submit ajax request

    //here ajax starts so set state to false
    canSendAjax=false;

    //extended to solution loading info
    //save button current text label in variable
    var label=$(this).text();
    //set loading on button for ui friendly
    $(this).text("Loading...");

    $.ajax({
        url: '/update_link'
    }).done(function() {

       //here after ajax
       canSendAjax=true; //we enable button click again
       $(this).text(label);//set previous button label

    });

});

EXAMPLE WITH USAGE OF ABORT:

var ajax=null; //our ajax call instance

$('.button').click(function() {

    if (ajax!=null){

        ajax.abort();

        ajax=ajax=$.ajax({
          url: '/update_link'
        });
    }

});

How to abort pending jquery ajax request when user navigates to other page?

According to the ajax documentation, you're doing it properly. The $.ajax() function returns an object that has an abort function. You should check for existence of the function because it might not exist if the request has already finished.

componentWillUnmount: function(){
  if (this.ajaxRequest && this.ajaxRequest.abort){
    this.ajaxRequest.abort()
  }
}

http://api.jquery.com/jquery.ajax/#jqXHR

How can I abort an AJAX call?

You need to assign your ajax request to variable,

var xhr = $.ajax({
***
});

then call abort()

xhr.abort();

Aborting all ajax requests

Based on Gaby aka G. Petrioli answer, the best way to actually solve this problem is to create a new array to loop over:

function abortAll() {
  // copying-an-array-of-objects-into-another-array-in-javascript
  // https://stackoverflow.com/questions/16232915
  var calls = Array.from($.xhrPool);

  $.each(calls, function(key, value) {
    value.abort();
  });
}

How to cancel/abort jQuery AJAX request?

The jquery ajax method returns a XMLHttpRequest object. You can use this object to cancel the request.

The XMLHttpRequest has a abort method, which cancels the request, but if the request has already been sent to the server then the server will process the request even if we abort the request but the client will not wait for/handle the response.

The xhr object also contains a readyState which contains the state of the request(UNSENT-0, OPENED-1, HEADERS_RECEIVED-2, LOADING-3 and DONE-4). we can use this to check whether the previous request was completed.

$(document).ready(
    var xhr;
    
    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

---

Related Topics