XMLHTTPRequest with a time-out condition

Question

In a XMLHTTPRequest, how to use time-out condition such that if there is no response from the server for a fixed amount of time (say 5 seconds) then it should display an error message?

In other words, the request should wait for 5 seconds, if there is no response from the server then it should display a message saying "Time out. Please try again later". It would be better if the code can work for both Synchronous and Asynchronous.

The following code I am using without time-out condition.

function testXMLHTTP()
{
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
        else if(xmlhttp.readyState < 4)
        {
            document.getElementById("myDiv").innerHTML="Loading...";
        }
    }

    xmlhttp.open("GET","abcd.php",true);
    xmlhttp.send();     
}

Look at http://stackoverflow.com/questions/1018705/how-to-detect-timeout-on-an-ajax-xmlhttprequest-call-in-the-browser — Andrej, Aug 21 '11 at 19:09
I doubt it's possible with synchronous requests, since JavaScript is single-threaded. — JB Nizet, Aug 21 '11 at 19:17

score 3 · Answer 1 · edited May 23 '17 at 11:55

If you're able to use an external library for your project, you might consider it: jQuery's ajax module allows you to specify a timeout for a request. There's no built-in way to handle timeouts with an XMLHTTPRequest object in most browsers (except, apparently, IE8+), so you'll need to set a timeout that will check the state of the request after a period of time. This answer to a similar question explores that particular solution more thoroughly, but I still recommend using jQuery if you can.

score 1 · Answer 2 · answered Nov 17 '11 at 13:16

Here is a clean timeout solution for XHR that I made for an ajax polling system:

function doRequest() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            // Process request.
        }
    }
    xmlhttp.open("GET", "/your/script", true);
    xmlhttp.send();
    setTimeout(function() {
        if (xmlhttp.readyState < 4) {
            // Timeout !
            xmlhttp.abort();
        }
    }, 3000);
}

The good thing about it is that you can call it multiple times and each timeout stays independent. (for example you can call this function every second and after three seconds only the first request will timeout).

XMLHTTPRequest with a time-out condition

2 Answers2