Handling Ajax Timeouts
One issue of concern in Ajax is whether or not the server access times out. In other words, what if the server doesn’t answer back? You don’t want your Ajax application to wait forever.
You can handle timeouts using a little JavaScript. Take a look at timeout.html in Figure 8.13.
Figure 8.13: Handling timeouts
When you click the button, the application tries to download a nonexistent file, data.txt, and it times out, as you see in Figure 8.14.
Figure 8.14: The application timed out
So how do you write this application? As usual, start with a button that downloads data.txt using a function named getData, and a <div> element in which to display the downloaded data:
<body> <H1>Handling timeouts</H1> <form> <input type = "button" value = "Display Message" onclick = "getData('data.txt', 'targetDiv')"> </form> <div > <p>The fetched data will go here.</p> </div> </body> Start the getData function by creating an XMLHttpRequest object and configuring it:
function getData(dataSource, divID) { var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); . . . } Then you’ll need two variables, timeoutSet and downloadOK, both of which start off as false:
function getData(dataSource, divID) { var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); var timeoutSet = false; var downloadOK = false; . . . } When the connection is made to the server (the XMLHttpRequest object’s readyState property will hold 1), you can request that a JavaScript function be called in a specific time you request. This example uses 1000 milliseconds (one second):
function getData(dataSource, divID) { var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); var timeoutSet = false; var downloadOK = false; XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 1) { if(!timeoutSet){ window.setTimeout(function(){ . . . } }, 1000); timeoutSet = true; } } . . . } } This timeout function should check the downloadOK variable. If it’s still false, the download did not yet happen, so the timeout function should display an alert box saying the operation timed out, and abort the XMLHttpRequest object’s connection with the server:
function getData(dataSource, divID) { var XMLHttpRequestObject = false; . . . XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 1) { if(!timeoutSet){ window.setTimeout(function(){ if(!downloadOK){ alert("Sorry, timed out."); XMLHttpRequestObject.abort(); } }, 1000); timeoutSet = true; } } . . . } } If, on the other hand, the download did happen before the operation timed out, the code should set the downloadOK variable to make sure the timeout alert box isn’t shown:
function getData(dataSource, divID) { var XMLHttpRequestObject = false; . . . XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 1) { if(!timeoutSet){ window.setTimeout(function(){ if(!downloadOK){ alert("Sorry, timed out."); XMLHttpRequestObject.abort(); } }, 1000); timeoutSet = true; } } if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { downloadOK = true; obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } And that completes this example. Now you can handle the case where Ajax operations time out.
