如何在浏览器中检测AJAX(XmlHttpRequest)调用的超时？

Question

我在网上看,但文档很难得到.我们都知道使用浏览器内置XMLHttpRequest对象的基本AJAX调用(假设这里有一个现代浏览器):

var xmlHttp = new XMLHttpRequest();  // Assumes native object

xmlHttp.open("GET", "http://www.example.com", false);

xmlHttp.send("");

var statusCode = xmlHttp.status;
// Process it, and I'd love to know if the request timed out

那么,有没有办法通过检查浏览器中的XMLHttpRequest对象来检测AJAX调用是否超时？我会被建议做些什么window.setTimeout(function() { xmlHttp.abort() }, 30000);吗？

谢谢!

-麦克风

Answer 1

一些现代浏览器(2012)在不必依赖的情况下执行此操作setTimeout:它包含在XMLHttpRequest中.请参阅答案/sf/answers/347114771/:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        alert("ready state = 4");
    }
};

xhr.open("POST", "http://www.service.org/myService.svc/Method", true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.timeout = 4000;
xhr.ontimeout = function () { alert("Timed out!!!"); }
xhr.send(json);

Answer 2

更新:这是一个如何处理超时的示例:

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框架来执行此操作.jQuery是最受欢迎的.它使您的代码更高效,更易于维护和跨浏览器兼容.