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 8 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()
- 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
- Sandy Hook
Your Answer