[Solved-6 Solutions] Abort Ajax requests using jQuery - javascript tutorial
Problem:
How to abort Ajax requests using jQuery ?
Solution 1:
jQuery Ajax methods return an XMLHttpRequest(or the equivalent) object, so we can just use abort().
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()
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.
Solution 2:
As of jQuery 3, the ajax method returns an promise without extra methods (like abort), so this will no longer work. This is the one way to control the xhr object through the xhr property.
Here is a Simple example:
var xhr = new window.XMLHttpRequest();
var request = $.ajax({
url : url,
xhr : function(){
return xhr;
}
});
xhr.abort();
Solution 3:
- AJAX requests may not complete in the order they were started. Instead of aborting, we can choose to ignore all AJAX responses except for the most recent one:
- Create a counter
- Increment the counter when we initiate AJAX request
- Use the current value of counter to "stamp" the request
- In the success callback compare the stamp with the counter to check if it was the most recent request
Here is the sample code:
var xhrCount = 0;
function sendXHR() {
// sequence number for the current invocation of function
var seqNumber = ++xhrCount;
$.post("/echo/json/", { delay: Math.floor(Math.random() * 5) }, function() {
// this works because of the way closures work
if (seqNumber === xhrCount) {
console.log("Process the response");
} else {
console.log("Ignore the response");
}
});
}
sendXHR();
sendXHR();
sendXHR();
// AJAX requests complete in any order but only the last
// one will trigger "Process the response" message
Solution 4:
This is one of the solution:
var $request;
if ($request != null){
$request.abort();
$request = null;
}
$request = $.ajax({
type : "POST", //TODO: Must be changed to POST
url : "yourfile.php",
data : "data"
}).done(function(msg) {
alert(msg);
});
But it is better if you check an if statement to check whether the ajax request is null or not.
Read Also
Abort Ajax Request Using jQuerySolution 5:
In live search solution we need to cancel pending requests that may have take longer than the current request.
In this case, you can use something like this:
//On document ready
var ajax_inprocess = false;
$(document).ajaxStart(function() {
ajax_inprocess = true;
});
$(document).ajaxStop(function() {
ajax_inprocess = false;
});
//Snippet from live search function
if (ajax_inprocess == true)
{
request.abort();
}
//Call for new request
Solution 6:
Use ajax.abort() , this method abort any pending ajax request before sending another one request.
//check for existing ajax request
if(ajax){
ajax.abort();
}
//then we make another ajax request
$.ajax(
//our code here
);