Change page in the middle of Ajax request

Question

What happens if I send some ajax request, and immediately change the page (say follow some link) before the request returns? I mean I suppose the XHR object sends a request

Answer 1

The trick is to check the response headers in the XMLHttpRequest object. If there are no response headers (null or empty string, depending on the browser), the server did not respond yet. That means the user aborted.

$.ajax({
    url: "url-to-go-here",
    success: function() {
    },
    error: function(xhr, textStatus, errorThrown) {
        if(!isUserAborted(xhr)) {
            console.log("Ajax Error")
        }
    }
});

function isUserAborted(xhr) {
  return !xhr.getAllResponseHeaders();
}

Source

Answer 2

The solution to this problem is simple, all you need to do is if the request is currently running and if the user clicks any other link, then you need to alert the user that the request is under process please wait

To achieve this you need to maintain a semaphore, set that semaphore before firing any request and reset it on completion of that request. On click of every link(which changes the page) call a method which checks the semaphore and if it is set then the method gives the above alert to the user. This way, until the request completes, the user wont be able to change the page, and your problem of request being aborted would be solved

Hope this answers the question.

Answer 3

You would be out of luck. You would have no callback to come back to. Ajax response would be lost. In this case I would put a blocker on the page. It's pretty common, in order to prevent another click. Blocker nothing more than big mask which "lays over" the entire browser. It could also have a wait icon.

Answer 4

The behavior seems to be when the user leaves a page, any outstanding ajax requests complete with 0 as their status. jQuery interprets this as an error, which is why it calls the error handler. In your error handler, you can call the same function that your success handler calls if xhr.status == 0, otherwise execute the desired error behavior.

Answer 5

I had to deal with the same issue few days ago .. seems like its not that complicated to deal with.. We should able to distinguish the weather its a ajax error of some sort or user abort the request.. of course we don't get specific event from xhr object .. that's why ajax error comes with an exception ...combination of both xhr object and exception value we can solve this.

var message = '';
$('whatever').ajaxError(function(e, xhr, settings, exception) {
  // logic
   if (!xhr.status){
      if (exception=='abort'){
         message = 'User aborted AJAX request !'; 
      }
   }
}