具有超时条件的 XMLHTTPRequest答案

【问题标题】：XMLHTTPRequest with a time-out condition具有超时条件的 XMLHTTPRequest
【发布时间】：2011-10-31 17:03:00
【问题描述】：

在XMLHTTPRequest 中，如何使用超时条件，如果服务器在固定时间（例如 5 秒）内没有响应，那么它应该显示错误消息？

换句话说，请求应该等待 5 秒，如果服务器没有响应，那么它应该显示一条消息“超时。请稍后再试”。如果代码可以同时用于同步和异步，那就更好了。

我使用的以下代码没有超时条件。

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();     
}

【问题讨论】：

看stackoverflow.com/questions/1018705/…
我怀疑同步请求是否可行，因为 JavaScript 是单线程的。

标签： php javascript ajax xmlhttprequest

【解决方案1】：

如果您能够为您的项目使用外部库，您可能会考虑：jQuery's ajax module 允许您为请求指定超时。在大多数浏览器（显然，IE8+ 除外）中，没有使用 XMLHTTPRequest 对象处理超时的内置方法，因此您需要使用 set a timeout 来在一段时间后检查请求的状态。 This answer to a similar question 更彻底地探索了该特定解决方案，但如果可以，我仍然建议使用 jQuery。

【讨论】：

【解决方案2】：

这是我为 ajax 轮询系统制作的 XHR 的干净超时解决方案：

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);
}

它的好处是您可以多次调用它，并且每次超时都保持独立。（例如，您可以每秒调用一次此函数，三秒后只有第一个请求会超时）。

【讨论】：