У меня есть функция JavaScript для вызова ajax. Теперь мне нужно добавить время ожидания в этой функции, например, когда вызов службы занимал больше времени дефиле, вызов ajax должен превышать время ожидания и отображать сообщение по умолчанию. Я не хочу использовать Jquery в этом.

Вот мой код:

AJAX = function (url, callback, params) {
        var dt = new Date();
        url = (url.indexOf('?') == -1) ? url + '?_' + dt.getTime() : url + '&_' + dt.getTime();
        if (url.indexOf('callback=') == -1) {
            ajaxCallBack(url, function () {
                if (this.readyState == 4 && this.status == 200) {
                    if (callback) {
                        if (params) {
                            callback(this.responseText, params);
                        } else {
                            callback(this.responseText);
                        }
                    }
                }
            });
        } else {
            var NewScript = d.createElement("script");
            NewScript.type = "text/javascript";
            NewScript.src = url + '&_' + Math.random();
            d.getElementsByTagName('head')[0].appendChild(NewScript);
        }
    },
    ajaxCallBack = function (url, callback) {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = callback;
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    }
5
Yogendra 18 Дек 2015 в 10:55

3 ответа

Лучший ответ

Вот пример того, как вы можете справиться с таймаутом:

var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "http://www.example.com", true);

xmlHttp.onreadystatechange=function(){
   if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      clearTimeout(xmlHttpTimeout); 
      alert(xmlHttp.responseText);
   }
}
// Now that we're ready to handle the response, we can make the request
xmlHttp.send("");
// Timeout to abort in 5 seconds
var xmlHttpTimeout=setTimeout(ajaxTimeout,5000);
function ajaxTimeout(){
   xmlHttp.abort();
   alert("Request timed out");
}

В IE8 вы можете добавить обработчик события тайм-аута в объект XMLHttpRequest.

var xmlHttp = new XMLHttpRequest();
xmlHttp.ontimeout = function(){
  alert("request timed out");
}

Используйте для этого фреймворк javascript, хотя я не знаю, почему вы его не используете, вам нравится ненужная работа? :)

2
Dan Hall 18 Дек 2015 в 08:02

Если вы хотите просто добавить тайм-аут, вы можете добавить его в первую функцию в трех местах:

        setTimeout(function() {callback(this.responseText, params)}, 1000)

И ваш обратный вызов будет выполнен примерно через 1 с. Второе место - это второй вызов обратного вызова.

Третье место, которое я хотел бы предложить, это обернуть эту функцию, как указано выше:

        ajaxCallBack(url, function () {
            if (this.readyState == 4 && this.status == 200) {
                if (callback) {
                    if (params) {
                        callback(this.responseText, params);
                    } else {
                        callback(this.responseText);
                    }
                }
            }
        });

Обычно, когда я приступаю к тестированию интернет-соединения, я скорее добавляю регулировку в инструменты разработчика Chrome, например:

enter image description here

Вот ваш код с первым подходом:

        AJAX = function (url, callback, params) {
                var dt = new Date();
                url = (url.indexOf('?') == -1) ? url + '?_' + dt.getTime() : url + '&_' + dt.getTime();
                if (url.indexOf('callback=') == -1) {
                    ajaxCallBack(url, function () {
                        if (this.readyState == 4 && this.status == 200) {
                            if (callback) {
                                if (params) {
                                    console.log(new Date());
                                    setTimeout(function() {callback(this.responseText, params)}, 2000);
                                } else {
                                    console.error((new Date()).getSeconds());
                                    setTimeout(function() {callback(this.responseText)}, 2000);
                                }
                            }
                        }
                    });
                } else {
                    var NewScript = d.createElement("script");
                    NewScript.type = "text/javascript";
                    NewScript.src = url + '&_' + Math.random();
                    d.getElementsByTagName('head')[0].appendChild(NewScript);
                }
            },
        ajaxCallBack = function (url, callback) {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = callback;
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
        }

        AJAX('http://ip.jsontest.com/', function() {console.error((new Date()).getSeconds()); });
2
Piotr Łużecki 21 Дек 2015 в 13:50

Возможно, ответ на этот вопрос поможет. Тайм-аут XMLHttpRequest

Так как из того, что я понимаю, вам нужно установить время ожидания для xmlhttprequest, Вы можете использовать xmlhttp.timeout = /*some number*/

1
Community 23 Май 2017 в 12:31