Reliable AJAX: Timeout and Retry XMLHttpRequest
- August 15th, 2012
- By كارما
- Write comment
A lot of AJAX seems to rely on ideal conditions: a server that is both running and in good health, a reliable high speed internet connection, a lack of packet loss etc. Unfortunately, this is not always the case – what happens when your user triggers an event and the daemon is restarting or they are hopping access points/cell towers? What happens if the server load is sky high and only half of the requests are getting through? AJAX isn’t a very robust technology but we can increase the odds of our XMLHttpRequest transactions succeeding with some rudimentary JavaScript.
Newer Msxml XMLHTTP implementations support runtime-definable connection time-outs but that covers at best half of your audience and is therefore irrelevant to our needs. We will be implementing our own cross-browser compatible time-outs with the setTimeout() function. Once the time-out expires we will kill the XHR and repeat the process again, with a slightly longer time-out. The process is repeated as many times as necessary; each time increasing the duration. This is called backoff – similar in concept to but much less complicated than the exponential backoff algorithm Ethernet uses to recover from packet collisions.
The tricky part is to set the initial time-out to a value which gives the browser as long as reasonably possible to send and receive the request under strained conditions. Depending on how long the round trip takes in ideal circumstances a safe value can range anywhere from (plus) less than one second to several seconds – this is going to be unique to your application, resources and network so test thoroughly. If the time-out is too low we will be doing more harm than good by stopping and re-sending the request before it has even had a chance to complete. It might be sensible for you to give the last attempt a huge time-out.
The other major factor to consider is whether “the user knows best” in the given situation or not. If you are giving a visual cue to the user that there is AJAX activity happening in the background or if they expect to see something on the page update once the request has completed they might notice that things are taking a little long to react and re-trigger the event (read: hammer on the button like a mindless idiot). If you don’t want them to interfere with the time-out and re-send procedure take that into account when setting up your trigger – the example we are going to use assumes the user knows best. If they hammer on the button the best case scenario is their request goes through faster than if they left it alone and the worst case scenario is once they stop hammering the time-out and re-load cycle will run its course from the top anyway.
// Initialize global variables
var attempts = 0;
var timeout = 1000; // In miliseconds
var max_attempts = 5; // Six from 0
var script_url = '' // The location of the target processing script
var junk = ''; // The variables we're POSTing, probably set in trigger()
var t = '';
// Cross-Browser XMLHttpRequest()
function createXHR()
{
try { return new XMLHttpRequest(); } catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.7.0"); } catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.5.0"); } catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.4.0"); } catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
alert("Please enable ActiveX or update your browser.");
return null;
}
// User calls this function, i.e. onclick event handler
function trigger()
{
// Re-set the time-out in case the user interrupts the cycle
clearTimeout(t);
attempts = 0;
timeout = 1000;
driver();
}
// Handle the state changes of the XHR
function callback()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// Success! Re-set the time-out for the next round.
clearTimeout(t);
attempts = 0;
timeout = 1000;
xmlhttp = '';
// Perform whatever action we need to do on success.
}
else
{
// Error handling/Request status indication
}
}
// The guts of the request
function driver()
{
xmlhttp = createXHR();
xmlhttp.open("POST",script_url,true);
t = setTimeout(function(){timedout();}, timeout);
xmlhttp.onreadystatechange=function(){callback();}
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(junk);
}
// Run this if we time out
function timedout()
{
if(typeof(xmlhttp) == 'object')
xmlhttp.abort();
if(attempts < max_attempts)
{
// We timed out. Back off the time-out a bit.
attempts++;
timeout = timeout + 200;
// We're adding 200ms to the timeout each iteration, YMMV.
// Maybe if attempts == max_attempts make the timeout really huge.
// Play it again, Sam!
driver();
}
else
{
// We failed. Set the timeout back to default for the next round.
timeout = 1000;
attempts = 0;
xmlhttp = '';
alert("Timed out while sending request to server.");
}
}
