Utiliser JavaScript pour analyser un fichier XML

Je suis nouveau Débordement de Pile et de codage en général. Je suis en train de prendre un fichier XML et l'afficher dans le navigateur à l'aide de JavaScript. J'ai regardé un exemple de code pour le faire et est venu avec le code suivant:

<!DOCTYPE html>
<html>
<body>

<script>
if (window.XMLHttpRequest)
  {//code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {//code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET","social.xml",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("c_id")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("facebook_id")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
  document.write("</table>");
</script>

</body>
</html>

De toute façon, quand je le lance sur mon serveur local, aucune des données que j'essaie d'afficher dans le tableau. Mon .fichier html et .fichier xml sont dans le même dossier, donc je crois que j'ai le bon fichier de la voie. Je pourrais juste faire une erreur de débutant, mais je ne peux pas pour la vie de me comprendre pourquoi un tableau listant les c_id et facebook_id valeurs n'est pas créé. J'ai regardé autour pour les réponses et n'ai pas été capable d'en trouver. Toute aide serait grandement appréciée. Merci!

source d'informationauteur Chris Clouten

  1. 13

    Vous devez ajouter un onload écouteur d'événement à l' xmlhttprequest avant l'envoi de la demande. Aussi, vous pourriez avoir besoin de parser le XML avec un DOMParser. De toute façon, cela devrait fonctionner sur les navigateurs modernes:

    <!DOCTYPE html>
<html>
    <body>

        <script>
            if (window.XMLHttpRequest)
            {//code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {//code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }



            xmlhttp.onload = function() {
                var xmlDoc = new DOMParser().parseFromString(xmlhttp.responseText,'text/xml');

                console.log(xmlDoc);

                document.write("<table border='1'>");
                var x=xmlDoc.getElementsByTagName("CD");
                for (i=0;i<x.length;i++)
                { 
                    document.write("<tr><td>");
                    document.write(x[i].getElementsByTagName("c_id")[0].childNodes[0].nodeValue);
                    document.write("</td><td>");
                    document.write(x[i].getElementsByTagName("facebook_id")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                }
                document.write("</table>");

            }


            xmlhttp.open("GET","social.xml",false);
            xmlhttp.send();
            </script>

    </body>
</html>

    Maintenant, juste un couple de choses à mentionner sur ce que vous faites:

    • xmlhttprequest objets ont beaucoup de différents paramètres que signifier une variété de choses: readystatecode d'état, les œuvres. Vous pouvez bénéficier à la recherche un peu plus sur ceux.

    • document.write devrait vraiment jamais utilisé, jamais. En fait, tous les moyens de HTML injection doivent être manipulés avec beaucoup de soin. Vous pouvez utiliser un modèle basé sur la solution courante dans de nombreux MVC-esque cadres, ou le mien si vous voulez 🙂