Jquery Ajax Requests Are Getting Cancelled Without Being Sent

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 WebSockets 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



Leave a reply



Submit