Làm thế nào để phát hiện thời gian chờ trên một cuộc gọi AJAX (XmlHttpRequest) trong trình duyệt?

Question

Tôi đang tìm kiếm trên web nhưng tài liệu khó có thể thực hiện được. Chúng ta đều biết các cuộc gọi AJAX cơ bản sử dụng trình duyệt được xây dựng-in XMLHttpRequest đối tượng (giả định một trình duyệt hiện đại ở đây):

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 

Vì vậy, có cách nào mà tôi có thể phát hiện rằng cuộc gọi AJAX timed out bằng cách kiểm tra các XMLHttpRequest đối tượng trong trình duyệt? Tôi có nên được khuyên nên làm điều gì đó như window.setTimeout(function() { xmlHttp.abort() }, 30000);?

Cảm ơn!

-Mike

Answer 1

UPDATE: Dưới đây là an example về cách bạn có thể xử lý một thời gian chờ:

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

Trong IE8, Bạn có thể thêm một handler timeout sự kiện để các đối tượng XMLHttpRequest.

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

Tôi khuyên bạn nên thực hiện các cuộc gọi đồng bộ như mã của bạn ngụ ý và cũng khuyên bạn nên sử dụng khung javascript để thực hiện việc này. jQuery là hình ảnh phổ biến nhất. Nó làm cho mã của bạn hiệu quả hơn, dễ bảo trì hơn và tương thích với trình duyệt chéo.

Answer 2

Một số trình duyệt hiện đại (2012) thực hiện việc này mà không phải dựa vào setTimeout: được bao gồm trong XMLHttpRequest. Xem câu trả lời 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);