Utilisation de JavaScript et XHTML: open/send de XMLHttpRequest ne fonctionne pas si avant onreadystatechange

Question

Je ne sais pas si cela "fonctionne" ou pas, mais je conclus parce que le code affiché ici, fonctionne (sauf pour ce qui est dans le boucle (stupide DOM), mais ce n'est pas le but) seulement après deux clics. Je suppose que c'est parce qu'il n'obtient pas le document XML jusqu'à ce qu'il soit créé, ce qui est à la fin du premier clic.

Cependant, si je devais mettre les méthodes XMLhttpRequest.open et XMLHttpRequest.send AVANT la fonction onreadystatechange, le code ne s'exécuterait pas dans l'instruction if imbriquée (celle qui vérifie readystate/status). J'ai testé ceci avec alert ou document.write.

Des idées sur ce qui ne va pas?

if (window.XMLHttpRequest) 
{ 
    var xmlhttp = new XMLHttpRequest(); 
} 

function lessonList() 
{ 
    var xmldoc = xmlhttp.responseXML; 

    xmlhttp.onreadystatechange = function() 
    { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
     { 
      var getTitle = xmldoc.getElementsByTagName('title'); 
      var lessonList = document.getElementById('lesson-list'); 

      for (i = 0; i < getTitle.length; i++) 
      { 
       var lessonTitle = document.createElement('li'); 
       lessonTitle.nodeValue = getTitle[i].childNodes[0].nodeValue; 

       lessonList.appendChild(lessonTitle); 
      } 
     } 
    }; 

    xmlhttp.open("GET", 'file.xml', true); 
    xmlhttp.send(null); 
} 

Answer 1

La réponse de 1 idealmachine. Pour clarifier, il n'y a pas une seule instance Document associée à un seul XMLHttpRequest, où le chargement de XML à partir de la réponse met à jour le contenu du document. Ce n'est pas comme appeler Document.load().

Au lieu de cela, lorsque la demande est envoyée, l'objet XMLHttpRequest laisse tomber le vieux Document qui a été désigné par son responseXML, et lorsque la réponse est reçue, elle crée une nouvelle instance avec Document la réponse. Si vous avez conservé une référence à l'ancienne valeur de responseXML, celle-ci est toujours Document valide, mais c'est l'ancien document XML de la réponse précédente, pas le nouveau.

En outre, n'oubliez pas votre var i dans la boucle pour éviter un accident global. Et définir le nodeValue n'a aucun sens sur un nœud Element; vous auriez besoin de document.createTextNode(string) et l'ajouter à la place.

Vous utiliserez généralement une fonction d'assistance pour obtenir/définir le contenu textuel d'un élément, car traditionnel-DOM lui fait tellement mal. La propriété element.textContent de DOM Level 3 Core est la solution la plus simple, mais elle n'existe pas dans IE ou certains anciens navigateurs.

Answer 2

Ce qui se passe est que la deuxième fois que vous cliquez sur le bouton, il « réussit », car il utilise la réponse du premier clic. Cela ne fonctionne pas la première fois car le code essaie d'obtenir la référence au document XML avant qu'il ne charge, donc xmldoc est en fait null plutôt que la réponse du serveur que vous voulez. Vous devez déplacer la ligne var xmldoc = xmlhttp.responseXML; dans la fonction interne.