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

je regarde sur le web, mais la documentation est difficile à trouver. Nous connaissons tous L'appel AJAX de base en utilisant l'Objet intégré du navigateur XMLHttpRequest (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

alors, y a-t-il un moyen pour que je puisse détecter que L'appel AJAX a été chronométré en inspectant L'objet XMLHttpRequest dans le navigateur? Est-ce que je devrais faire quelque chose comme window.setTimeout(function() { xmlHttp.abort() }, 30000); ?

Merci!

- Mike

41
demandé sur YakovL 2009-06-19 19:48:48

2 réponses

mise à JOUR: 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 timeout event handler à l'objet XMLHttpRequest .

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

je recommande de ne pas faire d'appels synchrones comme votre code l'implique et je recommande également d'utiliser un framework javascript pour le faire. jQuery est le plus populaire. Il rend votre code plus efficace, plus facile à entretenir et compatible avec les navigateurs croisés.

50
répondu Jose Basilio 2009-06-19 16:31:17

certains navigateurs modernes (2012) le font sans avoir à se fier à 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);
49
répondu Julien Kronegg 2017-05-23 11:54:22