具有超時條件的XMLHTTPRequest

Question

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

Answer 1

如果您能夠為項目使用外部庫，您可能會考慮它： jQuery的ajax模塊允許您為請求指定超時。 在大多數瀏覽器中沒有內置的方法來處理XMLHTTPRequest對象的超時（顯然，IE8 +除外），因此您需要設置一個超時 ，以便在一段時間后檢查請求的狀態。 這個類似問題的答案更徹底地探討了特定的解決方案，但我仍然建議你使用jQuery。

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

關於它的好處是你可以多次調用它，每個超時都保持獨立。 （例如，您可以每秒調用此函數，三秒后只有第一個請求會超時）。