Geeks With Blogs

News
Welcome to my blog.
Here's what we've got on the menu today:

Lorin Thwaits A geek says what?

This question was posted to the AZGroups list:

Has anyone come up with a solution for handling timeout issues related to
AJAX, especially with regard to allowing the user to cancel a request?  This
includes cancelling the response to the client as well as notifying
the server that the request has been cancelled, allowing the server to
possibly kill the request process.

AJAX comes in many flavors, so for this sample I'll just write the most generic callback code possible in Javascript using XMLHttpRequest.  No library necessary, this shows all the actual guts to do an asynchronous callback, with the addition of testing for timeout.  Once you understand this approach, you can then check out your AJAX library of choice to see how it uses XMLHttpRequest, and then add on this timeout code there.  The crux of the solution is to use a setTimeout() at the same time you issue the send(), and have the setTimeout() call your own custom timeout function that does an XMLHttpRequest.abort() like this:

<SCRIPT language=javascript>
// Needed for IE6 and older to replicate the standard XMLHttpRequest object
if (window.ActiveXObject && !window.XMLHttpRequest){window.XMLHttpRequest =
 function(){progIds=new Array("Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0",
 "Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP",
 "Microsoft.XMLHTTP");for(i in progIds){try{return new
 ActiveXObject(progIds[i]);}catch(ex){alert(progIds[i]);}}return null;};}

// Standard asynchonous AJAX code
var xhr = new XMLHttpRequest();
// You would normally trade out the location.href with an actual .ashx
// page.  It's like this here only for testing, thereby requesting this
// same page back from the server.
xhr.open("POST",location.href,true);

// The function that will be called asynchronously when the server sends
// back its response
xhr.onreadystatechange=function(){
   // If you're using the file system instead of a web server then xhr.status
   // will come back as 0, not 200.  And of course if the page isn't found
   // then a web server will send back a status of 404.  xhr.readyState is 4
   // when the page is done.
   if (xhr.readyState == 4 && xhr.status == 200) {
      clearTimeout(xhrTimeout);   // Looks like we didn't time out!
      // Use xhr.responseText to parse the server's response
      alert(xhr.responseText);
   }
}

// Now that we're ready to handle the response, we can make the request
xhr.send("My excellent post info");
// Timeout to abort in 5 seconds
var xhrTimeout=setTimeout("ajaxTimeout();",5000);
function ajaxTimeout(){
   xhr.abort();
   alert("Well dang, the AJAX request timed out.  Did you lose network "+
         "connectivity for some reason?");
   // Note that at this point you could try to send a notification to the
   // server that things failed, using the same xhr object.
}
</SCRIPT>

Hope that helps!  This is the same kind of thing that GMail is doing when you see the “Oops...  Unable to reach the server...” message.  It doesn't try to pester the server again with a callback if it times out, though.

Posted on Tuesday, March 7, 2006 7:27 AM ASP.NET , AJAX | Back to top


Comments on this post: Handling timeouts gracefully in AJAX using client-side code

# re: Handling timeouts gracefully in AJAX with client-side code
Requesting Gravatar...
My saving grace:

Anyone reading this and implementing should make certain they check the XmlHttpRequest object ("xhr" in this example) for null before running, since a browser might not support it. (but, who cares about them ;)
Left by Eric Swanson on Mar 07, 2006 9:14 AM

# re: Handling timeouts gracefully in AJAX using client-side code
Requesting Gravatar...
Exactly what I was looking for. Thanks!
Left by Dan on Nov 06, 2007 4:05 AM

# re: Handling timeouts gracefully in AJAX using client-side code
Requesting Gravatar...
Works great if you only have one Ajax request on the page. If you have multiple -- more than the concurrent requests setting of the browser-- then this wont work. Say you have 5 ajax calls on a page, but your browser only allows 2 concurrent connections. If you put the setTimeout on anything but readyState 2, requests 3, 4, and 5 will timeout prior to their specified time.
Left by Tim on Apr 17, 2008 10:48 AM

# re: Handling timeouts gracefully in AJAX using client-side code
Requesting Gravatar...
Works perfect. Thank you from the bottom of my heart, it was just what I was looking for.
Left by Truma on Jul 23, 2008 4:10 PM

# re: Handling timeouts gracefully in AJAX using client-side code
Requesting Gravatar...
Thank you very much buddy.Your solution really helped me a lot... :)
Left by Virajith on Jul 21, 2009 11:42 AM

# re: Handling timeouts gracefully in AJAX using client-side code
Requesting Gravatar...
Use clearTimeout(xhrTimeout) on onreadystatechange = 4 (success.) You could do an onclick=(xhr.abort()) somewhere if you wish. For multiple AJAX instances I used an array - for timeouts, objects, and update ids. Communicating this to the onreadystatechange function requires some juggling (since by default, it is stateless, I think...)

Anyway, thanks. This was very helpful!
Left by RiverC on Sep 01, 2009 8:02 AM

# re: Handling timeouts gracefully in AJAX using client-side code
Requesting Gravatar...
The above video link seems to be broken.
Left by DDos Protection on Nov 06, 2009 11:29 PM

# re: Handling timeouts gracefully in AJAX using client-side code
Requesting Gravatar...
The key was bamboo window blinds. It's better late than never. It is very possible to bamboo window blinds with my point of comparison. I'm sure I had a point in here somewhere. You may think that I'm still wet behind the ears. Thus, having a bamboo roman blind, you can achieve your objectives. Most of this you never need to know. Micro mini blinds sucks.

French door blinds began in a small organization in a rural area. White faux wood blinds is NOT the blackout blinds you would expect. Here's how to get a job working with bamboo shades.


Left by Pat on Jan 24, 2010 9:35 AM

# re: Handling timeouts gracefully in AJAX using client-side code
Requesting Gravatar...
hey webmaster, I found this website from twitter and read a few of your other web pages. They are awesome. Pleasee continue this great work!! Best regards, Michael.
Left by bid directory on Mar 06, 2010 7:13 PM

Your comment:
 (will show your gravatar)


Copyright © Lorin Thwaits | Powered by: GeeksWithBlogs.net