Ajax post getting cancelled
we were making the ajax request from a link, and not preventing the link from being followed. So if you are doing this in an onclick attribute, make sure to return false; as well
function loadAd(date) {
var ajax_url = '<?=URL?>components/ajax/grab_ads.php';
$.ajax({
type: 'POST',
url: ajax_url,
dataType: 'html',
data: ({
date : date
}),
cache: false,
success: function(data) {
if(data > 0) {
$('.advert').fadeIn("fast");
}
},
error: function(xhr, textStatus, errorThrown) {
//alert('Nastala chyba. ' + errorThrown);
}
});
return false;
}
ajax call is sometimes cancelled by chrome
All browsers apply limitation on concurrent calls to the same origin, there is already a well discussion on it: Max parallel http connections in a browser?
The thing is that you're implementing the auto refresh in a wrong way,
what you are using is being called: Polling
, you basically call the server periodically but sometimes could happen that you already have others call in progress and this will cause the cancellation.
Polling is a very old way to do this, you should have a look on WebSocket
s or Server Side Events
which are definitely the best ways to handle server-side changes and reflect them into the UI.
If you can't implement them, then, you may need for the Long Polling Strategy
which is an old but still valuable way.
here are other info: What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet?
function auto_refresh(onSuccess, onError, onEnd, rate, times) { onSuccess = onSuccess || $.noop; onError = onError || $.noop; onEnd = onEnd || $.noop; rate = Number(rate) || 9000; times = Number(times) || Infinity function iteration() { return $ .post('lib/nav.php', 'c=autchk') .then(onSuccess) .fail(onError) .always(function() { if(Number.isFinite(times)) { times -= 1;
if(times <= 0) { return onEnd(); } }
return auto_refresh(onSuccess, onError, onEnd, rate, times); }) ; } return window.setTimeout(iteration, rate);}
auto_refresh(function(result) { return $('#test-div').html(result).promise();});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
jQuery ajax request cancelled slows the current request
Remember too that opening an AJAX request to the server, and then canceling the request will not cancel the request from processing on the server, it simply stops the browser from listening for a response. The server will continue to process any disconnected ajax requests until they finish running, at which point it tries to send a response to the client and finding no one listening, dies.
AJAX request cancelled sometimes when api called several times
It looks like your web server is returning a redirect to a non secure URL
HTTP_TRANSACTION_READ_RESPONSE_HEADERS
--> HTTP/1.1 302
status: 302
date: Tue, 30 Apr 2019 22:20:45 GMT
content-type: text/html; charset=UTF-8
content-length: 0
location: http://example.com/api/v1/track/login?time=1556662845627
Chrome is refusing to redirect to that URL because it's already on HTTPS. I guess with the meta tag in place, Chrome is transforming that HTTP into HTTPS automatically and everything works.
So first place to look would be why the server is sending a redirect to a HTTP URL when it is already receiving a HTTPS request.
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.
Related Topics
Angularjs - How to Get an Ngrepeat Filtered Result Reference
How to Add a Class to a Dom Element in JavaScript
Js Strings "+" VS Concat Method
Difference Between "Process.Stdout.Write" and "Console.Log" in Node.Js
Window.Onload VS. Body.Onload VS. Document.Onready
Detect When a Window Is Resized Using JavaScript
How JavaScript Closures Are Garbage Collected
Jquery: How to Get the Event Object in an Event Handler Function Without Passing It as an Argument
How to Skip Over an Element in .Map()
How to Join Two JavaScript Objects, Without Using Jquery
Settimeout/Cleartimeout Problems
How to Catch Exceptions Thrown in a JavaScript Async Callback
Jquery .Find() Doesn't Return Data in Ie But Does in Firefox and Chrome
!Function(){ }() VS (Function(){ })()
Does JavaScript Process Using an Elastic Racetrack Algorithm
Given a String Describing a JavaScript Function, Convert It to a JavaScript Function