Javascript Girl
  1. Javascript Girl
  3. Utilisation de JavaScript pour analyser un fichier XML
Intereting Posts
Télécharger l'objet JSON en tant que fichier depuis le navigateur Mise à jour des changements variables dans les composants d'un service avec angular2 Afficher le fichier HTML contenu dans l'extension Comment mapper un dictionnaire dans reactJS? Protractor teste l'échec / défaut de l'application AngularJS de manière incohérente Angular 1.4.5: Erreur non saisie: ngRoute Transmettre les données de json de servlet à jsp au fichier js Comment puis-je partager du contenu à partir d'une page interne d'une page Facebook? Faites glisser avec mootools sur mobile Array avec le tri d'objet avec Underscore sortBy Existe-t-il un codeur JSDoc open source écrit en Javascript? Définir l'en-tête de demande jQuery Ajax Est-ce ainsi que vous définissez une fonction dans jQuery? Comment renvoyer la valeur de la fonction callback nodejs? Comment passer le "point d'interrogation" dans url javascript

Utilisation de JavaScript pour analyser un fichier XML

Je suis nouveau sur Stack OverFlow et codé en général. J'essaie de prendre un fichier XML et de le rendre dans le navigateur en utilisant JavaScript. J'ai regardé autour d'un exemple de code de la façon de le faire et j'ai trouvé 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>

Quoi qu'il en soit, lorsque je l'exécute sur mon serveur local, aucune des données que j'essaie d'afficher dans le tableau apparaît. Mon fichier .html et le fichier .xml sont dans le même dossier, donc je crois que j'ai la bonne voie de fichier. Je pourrais simplement faire une erreur de recrue ici, mais je ne peux pas pour la vie de moi comprendre pourquoi une table répertoriant les valeurs c_id et facebook_id n'est pas créée. J'ai cherché des réponses et je n'ai pu trouver aucune. Toute aide serait grandement appréciée. Merci!

Vous devez ajouter un auditeur d'événement onload au xmlhttprequest avant d'envoyer la demande. De plus, vous devrez analyser le XML avec un DOMParser . Quoi qu'il en soit, 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 quelques choses à mentionner sur ce que vous faites:

  • xmlhttprequest objets xmlhttprequest ont de nombreux paramètres différents qui signifient une variété de choses: readystate , code d'état, les travaux. Vous pourriez vous intéresser davantage.

  • document.write ne devrait jamais être utilisé, jamais. En fait, tout moyen d'injection HTML devrait être traité avec beaucoup de soin. Vous pouvez utiliser une solution basée sur un modèle commun dans plusieurs frameworks MVC-esque, ou le mien si vous voulez 🙂