Abort Ajax requests using jQuery
Using jQuery, how can I cancel/abort an Ajax request that I have not yet received the response from?
Ajax
Javascript
jQuery
- asked 9 years ago
- B Butts
2Answer
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).
- answered 8 years ago
- Sandy Hook
We just had to work around this problem and tested three different solution approaches.
- does cancel the request as suggested by @meouw
- execute all request but only processes the result of the last submit
- 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 8 years ago
- Sunny Solu
Your Answer