Ajax: How to prevent jQuery from calling the success event after executing xmlHttpRequest.abort();

Question

Using jQuery\'s $.ajax() function. Wherether the request has been purposely aborted, or if the server is down (not responding) it appears the same outcome happens;

Answer 1

You should set up an error handler, which will get called if the request fails. If you want to abort the request on the server, you could just return some value that you can check for in your success handler, or you could throw an exception from the server. jquery.ajax()

EDIT: You may want to look into this AJAX Queue/Cache/Abort/Block Manager v. 2.0 (link). It will allow you to run a function after a request has been aborted.

Answer 2

When is abort called. I just tested in firebug console with the following

var req = $.ajax({url:"localaddress", success:function(){alert("evil");}}); req.abort();

ie abort right after the request, success isn't triggered.

Answer 3

The best solution to have only one request is assigning the return value of your $.ajax call to a variable, e.g. currentRequest, and then, inside your success(data, responseCode, xhr) function, checking if(xhr == currentRequest) and returning early if the check failed. When aborting you simply set currentRequest to null so the check fails.

This ensures an old request is never handled which is especially important if you do e.g. long polling and restart the request as soon as it has finished (you really don't want two "pollers" running at the same time due to an aborted request starting a new one).

Answer 4

jQuery < 1.5

For jQuery < 1.5 I have come up with the following solution:

var request = $.ajax( /* ... */ );

// ...

request.onreadystatechange = function () {};
request.abort();

So, basically what I do, is to remove the success callback handler before calling abort().

This works like a charm.

jQuery >= 1.5:

Starting with jQuery 1.5 the $.ajax(), $.get(), … functions return the jXHR object (api documentation) instead of the xmlHttpRequest object. Hence you can not simply overwrite the xmlHttpRequest.onreadystatechange() handler.

This said, the jXHR.abort() takes care of not calling the success callback handler. Hence it is sufficient to call jXHR.abort().

You do necessarily not need to update your previous code, as setting an onreadystatechange to jXHR will just have no effect at all.

Long story short, startin with jQuery 1.5, this will do:

var jxhr = $.ajax( /* ... */ );

// ...

jxhr.abort();

Answer 5

I've noticed this same behavior, and request.onreadystatechange = function () {}; before calling .abort() does resolve the issue.

Answer 6

You could track aborts separately in a wrapper around xmlHttpRequest.abort.