I’ve been implementing some AJAX goodness in Mayday and other FastFrame apps lately. In my reading of the various pitfalls of AJAX one that popped up repeatedly was how to handle gracefully a network outage or the webserver going down. For example, Gmail’s chat handles it nicely. When I turn off my airport connection Gmail chat lets me know that it can’t contact the server and maybe my connection is down. Much better than an endlessly spinning hour glass, or worse, not letting the user know their action was never completed.

Anyhow, after some research I found an excellent post over at the AJAX blog on a general solution to the problem of aborting an AJAX request after a specified amount of time. After a bit of munging I got it to work nicely with prototype, the javascript library of my choice (You may want to check out this Prototype reference if you don’t know how to use it). Here’s the code, commented to explain what’s going on:


callInProgress: function(xmlhttp) {
switch (xmlhttp.readyState) {
case 1: case 2: case 3:
return true;
break;
// Case 4 and 0
default:
return false;
break;
}
}
function showFailureMessage() {
alert('uh oh, it looks like the network is down. Try again shortly');
}
// Register global responders that will occur on all AJAX requests
Ajax.Responders.register({
onCreate: function(request) {
request['timeoutId'] = window.setTimeout(
function() {
// If we have hit the timeout and the AJAX request is active, abort it and let the user know
if (callInProgress(request.transport)) {
request.transport.abort();
showFailureMessage();
// Run the onFailure method if we set one up when creating the AJAX object
if (request.options['onFailure']) {
request.options['onFailure'](request.transport, request.json);
}
}
},
5000 // Five seconds
);
},
onComplete: function(request) {
// Clear the timeout, the request completed ok
window.clearTimeout(request['timeoutId']);
}
});