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

Если вы можете использовать внешнюю библиотеку для своего проекта, вы можете рассмотреть ее следующим образом: ajax-модуль jQuery позволяет указать время ожидания для запроса. В большинстве браузеров нет встроенного способа обработки таймаутов с объектом XMLHTTPRequest (кроме, по-видимому, IE8 +), поэтому вам нужно установить таймаут , который будет проверять состояние запроса после Период времени. Этот ответ на аналогичный вопрос более подробно рассматривает это конкретное решение, но я все же рекомендую использовать jQuery, если вы можете.

Answer 2

Вот чистое решение тайм-аута для XHR, которое я сделал для системы опроса ajax:

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

Хорошо, что вы можете вызывать его несколько раз, и каждый тайм-аут остается независимым.(например, вы можете вызывать эту функцию каждую секунду, и через три секунды истечет время ожидания только для первого запроса).