ajax call is sometimes cancelled by chrome

Question

My ajax code is

var auto_refresh = setInterval(function () {
    $.ajax({
            type: 'post',
            url: 'lib/nav.php',
            data: 'c=autchk',
            success: function (result) {
                $('#test-div').html(result);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // I don't know how to display error message
                console.log('Error: '+jqXHR+' '+textStatus+' '+errorThrown);
            }
        });
}, 9000);

The request is sometimes cancelled before reach the timeout. In the chrome log, the status of cancelled request is stalled. Then I read the explanation that lead me to this

Queueing. The browser queues requests when:

There are higher priority requests.

There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.

Stalled. The request could be stalled for any of the reasons described in Queueing.

Is the problem because of that or something else?

EDIT :

I test the code in 3 browsers

I did not see any cancelled request in Microsoft Edge. There are more in Chrome than Firefox.

for ajax request in browser you have limitation and it's depend on browser , for example for chrome browser it is about 8 ajax request in one period time . please make your you use ajax request in write way. — Farhad Azarbarzinniaz, Jun 21 '17 at 10:54
@Farhad then how to fix my code so that chrome do not cancel my request? — Aidin, Jun 21 '17 at 10:58
why you trying to use timeout!! . please explain more about what are you going to do with that ajax — Farhad Azarbarzinniaz, Jun 21 '17 at 11:04
I removed the timeout and sometimes it fail in 9s. I used the timeout because I'm affraid if there will be multiple ajax request that will slow down the connection. Sorry if I'm wrong in this. What I'm trying to do is I want to check new input in database then do some notification about it. Am I doing wrong with that code? — Aidin, Jun 21 '17 at 11:27

Hitmands · Accepted Answer · 2017-06-22T08:49:16.557

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>

I will implement your suggestion in my next project, but for now maybe I will stick to this technique. Thanks... — Aidin, Jun 21 '17 at 11:46
Then you will end up with some cancellation, but, another thing to keep in mind is that **sometimes the server doesn't have anything to say**, but the client will keep calling and this will consume unneeded resources (bandwidth, calc time, ecc.) and will badly affect your performances. — Hitmands, Jun 21 '17 at 11:49
you can also tune your code considering my last edit (I added a snippet). — Hitmands, Jun 21 '17 at 12:14
Great thanks. I remove the **Infinite** stuff for that code to work. — Aidin, Jun 22 '17 at 01:46
it was a typo, it was supposed to be `Infinity` (always perform the request) — Hitmands, Jun 22 '17 at 08:49

ajax call is sometimes cancelled by chrome

1 Answers1