Let’s say you’re writing a LOLcats app and you want to be all user-friendly and show an adorable little kitty-cat error message whenever an AJAX call fails. So you write an error handler using your favorite cross-browser library (mine is jQuery), something like this:
$.ajax( { url: "someUrl", success: function() {
// do something impressive with the results
}, error: function() {
showError("Ohs noes. Tell me when you fix your AJAX.");
} } );
But you start using your app and you notice that your error message also appears when you navigate away from the page before an AJAX call has finished, or when you hit Escape to cancel the AJAX call. That kind of sucks—it looks ugly to have the error message appear when there really was no error.
I did a little looking around and found what looks like a cross-browser-friendly way to tell if an error really occurred or if something else happened, like the user navigating away or hitting Escape.
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.
Here’s a function that takes an XMLHttpRequest and tells you if the user aborted it.
/**
* Returns true if the user hit Esc or navigated away from the
* current page before an AJAX call was done. (The response
* headers will be null or empty, depending on the browser.)
*
* NOTE: this function is only meaningful when called from
* inside an AJAX "error" callback!
*
* The 'xhr' param is an XMLHttpRequest instance.
*/
function userAborted(xhr) {
return !xhr.getAllResponseHeaders();
}
And here is the updated application code to call this new function. You can easily adapt this to another JavaScript library than jQuery:
$.ajax( { url: "someUrl", success: function() {
// do something impressive with the results
}, error: function(xhr, textStatus, errorThrown) {
if (!userAborted(xhr)) {
showError("Ohs noes. Tell me when you fix your AJAX.");
}
} } );
Oh, did that “textStatus” and “errorThrown” catch your eye? I already looked at those. You can’t use them to tell if the user aborted. They return the same values whether the user aborted or the server returned with an error. (I only tested a 500 error.)
December 1, 2009 at 7:55 am |
d00d! That is dope, gotsta have…
July 22, 2010 at 12:17 pm |
Very nice this is exactly what I was looking for and solves the issue nicely.
May 4, 2012 at 7:08 am |
Thank youuuu!!!!
June 1, 2012 at 11:25 am |
Excellent, thank you so much for sharing this.
June 30, 2012 at 7:23 pm |
AWESOME!!!
August 28, 2012 at 2:49 am |
Brian,
What if the request fails due to connectivity issues?
let’s say the user losses internet access or the server crashes. The response headers will still be empty, and the code will consider the request as aborted by user, wouldn’t it?
August 28, 2012 at 5:43 am |
The way I found to get over this is checking the status text of the xhr object.
If the request was aborted the text will be *abort*, while if the request failed it will be *error*
so this code does the trick:
xhr.statusText == “abort”;
August 28, 2012 at 6:26 am |
@mohoch, Interesting. Did you test the xhr.statusText == “abort” method across all browsers? The jQuery documentation says the same is true of the second callback parameter, “textStatus.” But as I mentioned at the end of the post, when I ran tests (using whatever version of jQuery was current in 2009) I found that textStatus has the same value, regardless of whether the request was aborted by the user or due to an error.
August 28, 2012 at 7:01 am
Well I checked Firefox, Chrome and IE8 and above.
jQuery version is the latest.
It is very likely that things ave changed over the years.
And there is no documentation on jQuery’s site and I could hardly find anything on the web. Your post was the only one I could find addressing the problem at all.
Thanks.
September 17, 2012 at 3:41 pm |
Shared on Twitter and Facebook, the world must know that this trick works perfectly ! :D
October 30, 2012 at 1:26 pm |
In the refresh case I am getting xhr.statsText == “error” and cannot distinguish between a network disconnect and the refresh interuption. I tried chrome 22.0.1229.94 and firefox 16.02. In the chrome debugger they have a status text column and they show (cancelled) for the refresh and (failed) for a network error but I can’t seem to find a way to access these values from the $.ajax error or complete functions
February 13, 2013 at 7:47 am |
You can detect a forced abort by refresh or navigating away using window.beforeunload. Use this in combination with status and you can perfectly differentiate between a connection problem and a “forced” connection problem (refresh, navigating away).
February 13, 2013 at 7:47 am |
Should be onbeforeunload.
August 7, 2013 at 5:36 am |
On Chromium Version 28.0.1500.71 Ubuntu 12.04 (28.0.1500.71-0ubuntu1.12.04.1) both (xhr.statusText == “error” && ! xhr.getAllResponseHeaders()) regardless if user navigates away, or whether I restart the web server during the AJAX call. So these two test are not reliable tests for whether the error is due to user actions.
August 7, 2013 at 6:55 pm |
Thanks for the report, Peter. Please post here again if you find a workaround.
August 11, 2013 at 2:24 am |
See my stack overflow answer to this (http://stackoverflow.com/a/18170879/345716). And a working jsfiddle (http://jsfiddle.net/pmorch/SyUun/).
November 14, 2013 at 10:22 am |
Thanks, pmorch — of all the things I tried, your solution is the only one I could get working.