具有超时条件的 XMLHTTPRequest

Posted 2023-02-24

【中文标题】具有超时条件的 XMLHTTPRequest

【英文标题】：XMLHTTPRequest with a time-out condition

【发布时间】：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();     

【问题讨论】：

看***.com/questions/1018705/…

我怀疑同步请求是否可行，因为 javascript 是单线程的。

【参考方案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);

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