web-dev-qa-db-fra.com

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

Je cherche sur le Web, mais la documentation est difficile à trouver. Nous connaissons tous l'appel de base AJAX en utilisant l'objet XMLHttpRequest intégré au navigateur (supposons 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

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

Merci!

-Mike

javascriptajaxbrowser
42
Mike

MISE À JOUR: Voici n 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 gestionnaire d'événements timeout à l'objet XMLHttpRequest.

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

Je déconseille de faire des appels synchrones comme votre code l'indique et recommande également d'utiliser un framework javascript pour ce faire. jQuery est le plus populaire. Il rend votre code plus efficace, plus facile à maintenir et compatible avec tous les navigateurs.

51
Jose Basilio

Certains des navigateurs modernes (2012) le font sans avoir à s'appuyer sur setTimeout: il est inclus dans 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);
53
Julien Kronegg