Comment détecter le timeout sur un appel AJAX (XmlHttpRequest) dans le navigateur ?

Question

Je cherche sur le web, mais la documentation est difficile à trouver. Nous connaissons tous l'appel AJAX de base qui utilise la fonction intégrée du navigateur, à savoir XMLHttpRequest (supposez un navigateur moderne ici) :

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

Existe-t-il donc un moyen de détecter que l'appel AJAX a expiré en inspectant l'objet XMLHttpRequest dans le navigateur ? Serait-il conseillé de faire quelque chose comme window.setTimeout(function() { xmlHttp.abort() }, 30000); ?

Merci !

-Mike

Answer 1

Certains des navigateurs modernes (2012) le font sans avoir recours à setTimeout : il est inclus dans le XMLHttpRequest. Voir la réponse 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);

Answer 2

UPDATE : Voici un exemple de la façon dont vous pouvez gérer un délai d'attente :

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

Dans IE8, vous pouvez ajouter un délai d'attente au gestionnaire d'événement XMLHttpRequest objet.

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

Je vous déconseille de faire des appels synchrones comme votre code l'implique et je vous recommande également d'utiliser un framework javascript pour le faire. jQuery est le plus populaire. Elle rend votre code plus efficace, plus facile à maintenir et compatible avec les différents navigateurs.