jQuery $.ajax calls success handler when request fails because of browser reloading

Question

I have the following code:

 $.ajax({
          type: "POST",
          url: url,
          data: sendable,
          dataType: "json",
          success: function(data) {

               if(customprocessfunc)
                   customprocessfunc(data);
         },

          error: function(XMLHttpRequest, textStatus, errorThrown){
                    // error handler here
                }
        });

I have a timer which makes AJAX requests often. If I do not receive anything in 'data', I show an error message to the user - it means, something went bad on the server.

The problem is when user reloads the page while the AJAX call is in progress. I can see in the Firebug that the AJAX call fails (URL is colored red and no HTTP status is displayed) so I expect that jQuery will stop the request or at least go to the error handler. But it goes to the success handler and passes null in the 'data' variable.

As a result, when user reloads the page, sometimes he can see my big red message about unknown error (because data is null).

Is there any way to make jQuery abort the request on complete reloading or at least not to call my success function? I have no way to know in the success handler why the data is null - did it came empty from the server or the call was aborted because of reload.

Which version of jQuery are you on? A status of `0` was considered "successful" to accommodate an Opera bug...but that was removed in jQuery 1.4.3 IIRC. — Nick Craver, Dec 29 '10 at 10:03

score 2 · Accepted Answer · answered Dec 29 '10 at 10:49

2

You can use the onbeforeunload event on your page: link it to a function that cleans all youe AJAX requests.

answered Dec 29 '10 at 10:49

Don

16,928
12
63
101

2

Beware: This does not work for [Safari on iOS](http://stackoverflow.com/questions/4127621/is-there-any-way-to-use-window-onbeforeunload-on-mobile-safari-for-ios-devices?rq=1) – Peter V. Mørch Aug 05 '13 at 18:58

score 1 · Answer 2 · answered Mar 25 '13 at 19:58

The onbeforeunlaod technique does not work for a periodically refreshing page (for example every half seconds). I have figured out that the error caused by refreshing the page can be avoided using delaying the error handling process by a small amount of time.

Example:

$.ajax(...)
.success(...)
.error(function(jqXHR) {
setTimeout(function() {
  // error showing process
}, 1000);
});

In addition to that

window.onbeforeunload = function() {//stop ajax calls}

event can be used for less frequently refreshing ajax calls.

score 1 · Answer 3 · answered Dec 29 '10 at 10:16

Stats strange that you are recievesing 'success' in case of failed call.. But you can try to override the behaviour, by listeining to complete event (here just a copy-paste a code from my test framework)

$.ajax(
    {
        url: url,
        type: type,
        processData: false,
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(data),
        dataType: 'json',
        complete: function (result) {
            if (result.status == 404) {
                ok(false, '404 error');
            } else {
                callback($.parseJSON(result.responseText));
            }
        }
    });

result is XMLHttpRequest object, so you can analyze actual status of it and decide to proceed or not proceed.

jQuery $.ajax calls success handler when request fails because of browser reloading

3 Answers3

Linked