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.

image from book
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.

image from book
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.



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net