如何检测浏览器中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);？

谢谢！

-Mike

Answer 1

UPDATE：这里是你如何处理超时an example：

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中，您可以添加timeout事件处理程序XMLHttpRequest对象。

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

我建议不要在您的代码隐含的情况下进行同步调用，并且还建议使用JavaScript框架来执行此操作。 jQuery是最受欢迎的一个。它使您的代码更高效，更易于维护和跨浏览器兼容。

Answer 2

一些现代浏览器（2012）无需依靠setTimeout即可完成此操作：它包含在XMLHttpRequest中。查看答案https://stackoverflow.com/a/4958782/698168：

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