• support@answerspoint.com

Abort Ajax requests using jQuery

809

Using jQuery, how can I cancel/abort an Ajax request that I have not yet received the response from?

2Answer


0

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()
  • answered 3 years ago
  • Sandy Hook

0

We just had to work around this problem and tested three different solution approaches.

  1. does cancel the request as suggested by @meouw
  2. execute all request but only processes the result of the last submit
  3. prevents new requests as long as another one is still pending
<!DOCTYPE html>
<html>

<head>
    <title>AJAX Test</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
        var Ajax1 = {
            call: function () {
                if (typeof this.xhr !== 'undefined')
                    this.xhr.abort();
                this.xhr = $.ajax({
                    url: 'your/long/running/request/path',
                    type: 'GET',
                    success: function (data) {
                        //process response
                    }
                });
            }
        };
        var Ajax2 = {
            counter: 0,
            call: function () {
                var self = this,
                    seq = ++this.counter;
                $.ajax({
                    url: 'your/long/running/request/path',
                    type: 'GET',
                    success: function (data) {
                        if (seq === self.counter) {
                            //process response
                        }
                    }
                });
            }
        };
        var Ajax3 = {
            active: false,
            call: function () {
                if (this.active === false) {
                    this.active = true;
                    var self = this;
                    $.ajax({
                        url: 'your/long/running/request/path',
                        type: 'GET',
                        success: function (data) {
                            //process response
                        },
                        complete: function () {
                            self.active = false;
                        }
                    });
                }
            }
        };
        $(function () {
            $('#button').click(function (e) {
                Ajax3.call();
            });
        })
    </script>
</head>

<body>
    <input id="button" type="button" value="click" />
</body>

</html>

In our case we decided to use approach #3 as it produces less load for the server. But I am not 100% sure if jQuery guarantees the call of the .complete()-method, this could produce a deadlock situation. In our tests we could not reproduce such a situation.

  • answered 3 years ago
  • Sandy Hook

Your Answer

    Facebook Share        
       
  • asked 3 years ago
  • viewed 809 times
  • active 3 years ago

Hot Questions