AJAX pose problème

Résolu
jlemonde -  
Salut,
J'ai un problème bizarre: j'ai un code qui marche prèsque correctement, mais lorsque j'appelle la fonction AJAX('file.txt'), une erreur surgit : 
Uncaught Error: INVALID_STATE_ERR: DOM Exception 11

Pourtant le fichier file.txt est correctement retourné !

Voici mon code : 
   function getXMLHttpRequest(){
      var xhr = null;
   
      if(window.XMLHttpRequest || window.ActiveXObject){
         if(window.ActiveXObject){
            try{
               xhr = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch(e){
               xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
         }
         else{
            xhr = new XMLHttpRequest();
         }
      }
      else{
         alert('Votre navigateur ne supporte pas l\'objet XMLHttpRequest...');
         return null;
      }
      return xhr;
   }
   
   var AJAXMemory;
   function AJAX(file,callBack){
      var xhr = getXMLHttpRequest();
      xhr.onreadystatechange = function() {
         if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            AJAXMemory = xhr.responseText;
            eval(callBack);
         }
         else{
            AJAXMemory = 'Erreur ' + xhr.status;
         }
      }
      xhr.open('GET', file, false);
      xhr.send(null);
      return AJAXMemory;
   }

// UTILISATION : mondiv.innerHTML = AJAX("fichier.txt","alert('callBack')")

Vous arrivez à m'expliquer pourquoi cette erreur vient me perturber, et ce qu'il me faut changer dans mon code ?

11 réponses

  1.  avion-f16
    Le problème est créé par cette ligne : 
    AJAXMemory = 'Erreur ' + xhr.status;


    Connaître le statut n'a pas vraiment d'intérêt lorsque la requête n'est pas terminée ...
    1. Anoen
      Bonjour,

      Sais-tu à quel moment précis dans la fonction AJAX il te renvoie cette erreur ?
      2. jlemonde Auteur
        J'ai l'impression que c'est les fonction open() et send() car en les supprimant, il n'y a plus d'erreur. Mais évidement la fonction retourne undefined : elle ne fonctionne pas.
        3. jlemonde Auteur 
             var AJAXMemory;
   function AJAX(file,callBack){
      var xhr = getXMLHttpRequest();
      xhr.onreadystatechange = function() {
         if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            AJAXMemory = xhr.responseText; // Il est ici...
            eval(callBack);
         }
         else{
            AJAXMemory = 'Erreur ' + xhr.status;
         }
      }
      xhr.open('GET', file, false);
      xhr.send(null);
      return AJAXMemory;
   }
          1.  avion-f16
            Salut, 

            UTILISATION : mondiv.innerHTML = AJAX("fichier.txt","alert('callBack')")

            La fonction AJAX() ne retourne rien, elle ne fait qu'exécuté le callback.

            Mais l'erreur ne provient pas de là.
            Essaie en ajoutant quelques console.log() par-ci par-là.
            Par exemple, au début du bloc « onreadystatechange » pour "loguer" les valeurs de xhr.status et xhr.readyState.
            1. jlemonde Auteur
              Mais si, la fonction AJAX() retourne le contenu du fichier très bien.
              À moins que tu n'aies pas mis la fonction « getXMLHttpRequest() »...

              Tu dis qu'il faut loguer les valeurs de xhr.status et xhr.readyState, mais comment ??
              1. Anoen
                console.log(xhr.status);
                console.log(xhr.readyState);
              2. avion-f16 
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
    AJAXMemory = xhr.responseText; // Il est ici...
    eval(callBack);
}
                Je ne vois aucun retour (return) en cas de succès.
                Tu ne peux donc pas faire « qlqchose = laFonction(); », sinon, qlqchose vaudra « undefined ».
                AJAXMemory contient bien le résultat, et est accessible par le callBack, mais c'est tout.

                Et en général, le callBack, c'est une fonction et non une chaine qu'on exécute avec eval().

                Exemple :
                function affichage(resultat) {
    alert('Résultat = ' + resultat);
    // ou
    div.innerHTML = resultat;
}

function AJAX(cible, callback) {
    // Traitement

    callback(xhr.responseText);
}

AJAX('fichier.txt', affichage);
              3. jlemonde Auteur
                oui d'accord, mais qu'est-ce qu'il faut que je regarde ??
                console.log(xhr.status) retourne 200
                console.log(xhr.readyState) retourne 4

                le return se trouve quelques lignes plus bas.
                D'abord je stocke le responseText dans une variable (AJAXMemory), et tout à la fin de la fonction AJAX(), je retourne la variable...
              4. avion-f16
                Je n'avais pas vu le « return AJAXMemory; » à la fin.
                Mais il est mal placé, le return sera exécuté bien avant la fin de la requête XHR.
              5. jlemonde Auteur
                C'est pourquoi j'ai décidé de faire fonctionner AJAX de manière syncrone :
                xhr.open('GET', file, false);
                c'est à dire que le script attend la fin de la requete avant de continuer.
            2. avion-f16
              Pourrais-tu mettre le code en ligne ?
              1. jlemonde Auteur
                Je n'ai pas de vrai serveur en ligne... Je n'ai qu'esayPHP...
            3. Alain_42
              et comme ça: 

                var AJAXMemory; 
   function AJAX(file,callBack){ 
      var xhr = getXMLHttpRequest(); 
      xhr.onreadystatechange = function() { 
         if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { 
            AJAXMemory = xhr.responseText; 
            eval(callBack); 
         } 
         else{ 
            AJAXMemory = 'Erreur ' + xhr.status; 
         } 
    
   document.getElementById('id_de_mondiv').innerHTML = AJAXMemory; // 
      } 
      xhr.open('GET', file, false); 
      xhr.send(null); 
       
   }


              et tu lances l'appel de la fonction AJAX (..

              sur un événement
              1. jlemonde Auteur
                Je veux une fonction qui me permette de retourner la contenu du fichier. Ta methode ne permet pas de faire ceci : 
                if(AJAX('file.txt') == 'exemple'){maFonction();}
            4. jlemonde Auteur
              Merci avion-f16 !!
              En modifiant AJAXMemory = 'Erreur ' + xhr.status; par AJAXMemory = 'Erreur ';, il n'y a plus d'erreur...
              Mais pourquoi demander un xhr.status revoit-t-il une erreur ??

              Discussions similaires

              probléme avec ajax svp
              marwen109

              4 réponses
              [AJAX] fonctionne pas chez moi...
              Nico

              3 réponses
              Ajax qui ne fonctionne pas
              Mephistole

              3 réponses
              Problème requête Ajax avec jquery
              pignou0

              7 réponses
              Ajax post reponse code html
              Utilisateur anonyme

              1 réponse