Bonjour , 

je viens vers vous pour un petit problème.

Disons, que j'ai une fonction JS qui envoie plusieurs requêtes HTTP.

Le soucis est qu'une seule requête s’exécute lorsque j'en envois plusieurs en même temps, alors que si je les envois une par une, elle s'exécute correctement.

function sendQuery(url) {
    var httpRequest = false;
    httpRequest = new XMLHttpRequest();
    if (!httpRequest) {
      alert('Abandon  Impossible de créer une instance XMLHTTP');
      return false;
    }
    httpRequest.open('GET', url, true);
    //httpRequest.onreadystatechange = function () {
   //   if(httpRequest.readyState === XMLHttpRequest.DONE) {
      //  //document.getElementById("responseXML").innerHTML =  url + "\r\n" + httpRequest.responseText+"\r\n\r\n\r\n" + //document.getElementById("responseXML").innerHTML ;
     // }
   // };
    httpRequest.send();

  }

Quand j'envois plusieurs requête en même temps, puis-je les garder en attente ? C'est à dire , envoyer la 1ère requête, lorsqu'elle est finie, envoyer la 2ème, ainsi de suite ? 

Merci pour votre aide

-
Edité par OneoneS 17 novembre 2017 à 11:13:22

Salut, 

Je pense que le problème ne vient pas du code que tu as posté mais de la boucle avec laquelle tu appelle plusieurs fois la fonction sendQuery. Fais voir cette partie du code. 

Petite remarque en passant (qui n'a rien à voir avec ton problème), ce que tu fais à la ligne 2 n'a aucun sens. Tu dois écrire directement :

var httpRequest = new XMLHttpRequest();

Et je suis pas sur que les lignes 4 à 7 soient très utiles en 2017.

Salut LCaba, 

En fait, la fonction fonctionne de manière asynchrone tel que je l'ai posté.

Moi, dans mon contexte, j'avais besoin de l'utiliser de manière synchrone quitte à bloquer l'interface utilisateur.

Mon erreur était ici : 

httpRequest.open('GET', url, true);

Lorsque j'ai testé en supprimant le true, je pensais que la valeur par défaut serait false, mais non. 

avec la valeur false, ça fonctionne comme je le veux.

Sinon, merci pour les remarques que tu m'as apporté sur le code, j'ai pris note et mis à jour mon code.

Bonne continuation pour la suite, je passe en résolu

Je ne vois pas vraiment comment faire, j'aurais aimé les éviter aussi.

(En réalité, si je vois une solution, c'est de changer dans le "serveur" où j'envois ces commandes pour qu'il puisse recevoir plusieurs commandes du même type.)

Sinon, je ne vois pas :/

Ma fonction sendQuery(url) est appelé dans une boucle foreach en PHP.

Admettons que tu ne puisse pas faire autrement côté serveurs que de traiter les requetes les unes après les autres. Tu as le choix :

• Soit tu les envoies les unes après les autres, mais en mode asynchrone, en utilisant une fonction qui s'appelle elle-même :

var listerequetes = ['ur1.php', 'url2.php', 'url3.php', 'etc.php'];
var current = 0;

function sendQuery(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onreadystatechange = function() {
    if (xhr.readystate === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send();
}

function callback(text) {
  // faire quelque chose avec text, puis :
  current++;
  if (current < listerequetes.length) {
    sendQuery(listerequetes[current], callback);
  }
}

sendQuery(listerequetes[0], callback);

• Soit tu fait une seule requête dans laquelle tu regroupes toutes tes données dans un tableau, et côté serveur, tu fais une boucle pour faire comme si tu vasi plusieurs requêtes.

-
Edité par LCaba 22 novembre 2017 à 15:55:52

C'est une excellente idée !

Et ça fonctionne parfaitement.

Merci beaucoup pour ton aide

J'aurais une petite question, j'aurais aimé savoir quelle différence il  y a entre ça 

if (xhr.readystate = 4 && xhr.status = 200) {

et ça :

if (xhr.readyState == XMLHttpRequest.DONE) {

Tout d'abord, je me suis trompé, j'ai écris des = là où j'aurais du écrire des == ou mieux, des ===.

Ensuite, DONE est une propriété de l'objet XMLHttpRequest. L'usage veut qu'on nomme en majuscule les propriétés "constantes". Si tu exécutes console.log(XMLHttpRequest.DONE) tu verra que cette constante vaut 4. Utiliser cette constante rend l'écriture plus longue mais le code plus compréhensible.

J'ajoute la condition xhr.status === 200 pour vérifier que la requete s'est bien passée