AJAX pose problème

Résolu
jlemonde Messages postés 23 Statut Membre -  
jlemonde Messages postés 23 Statut Membre -
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 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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
  2. Anoen Messages postés 200 Statut Membre 25
     
    Bonjour,

    Sais-tu à quel moment précis dans la fonction AJAX il te renvoie cette erreur ?
    0
  3. jlemonde Messages postés 23 Statut Membre
     
    Non, pas tellement.
    Je vais essayer de trouver...
    0
  4. jlemonde Messages postés 23 Statut Membre
     
    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.
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Anoen Messages postés 200 Statut Membre 25
     
    Où est ton responseText ?
    0
  7. jlemonde Messages postés 23 Statut Membre
     
       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;
       }
    0
  8. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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.
    0
  9. jlemonde Messages postés 23 Statut Membre
     
    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 ??
    0
    1. Anoen Messages postés 200 Statut Membre 25
       
      console.log(xhr.status);
      console.log(xhr.readyState);
      0
    2. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
       
      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);
      0
    3. jlemonde Messages postés 23 Statut Membre
       
      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...
      0
    4. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
       
      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.
      0
    5. jlemonde Messages postés 23 Statut Membre
       
      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.
      0
  10. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Pourrais-tu mettre le code en ligne ?
    0
    1. jlemonde Messages postés 23 Statut Membre
       
      Je n'ai pas de vrai serveur en ligne... Je n'ai qu'esayPHP...
      0
  11. Alain_42 Messages postés 5413 Statut Membre 904
     
    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
    0
    1. jlemonde Messages postés 23 Statut Membre
       
      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();}
      0
  12. jlemonde Messages postés 23 Statut Membre
     
    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 ??
    0