11521 sujets

JavaScript, DOM et API Web HTML5

Parse .xml en javascript

Bonjour à tous,

Je reviens vers vous concernant un script que j'utilise maintenant depuis un petit moment et que j'aurai aimé modifié.

Le script sert a parser un fichier .xml sur un serveur distant
Cependant j'aimerais parser 2 fichiers .xml différent.

Voici le code utilisé:


function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "http://MonIP1/status.xml", true);
  xmlhttp.send();
}

function myFunction(xml) {
  var x, i, xmlDoc, txt;
  xmlDoc = xml.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName("led7");
  for (i = 0; i< x.length; i++) {
    txt += x[i].childNodes[0].nodeValue;
  }
  document.getElementById("demo").innerHTML = txt;

}


J'ai essayé quelque chose comme cela mais sans succès


function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "http://MonIP1/status.xml", true);
  xmlhttp.send();
}

function myFunction(xml) {
  var x, i, xmlDoc, txt;
  xmlDoc = xml.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName("led7");
  for (i = 0; i< x.length; i++) {
    txt += x[i].childNodes[0].nodeValue;
  }
  document.getElementById("demo1").innerHTML = txt;

}

function loadXMLDoc2() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "http://MonIP2/status.xml", true);
  xmlhttp.send();
}

function myFunction(xml) {
  var x, i, xmlDoc, txt;
  xmlDoc = xml.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName("led1");
  for (i = 0; i< x.length; i++) {
    txt += x[i].childNodes[0].nodeValue;
  }
  document.getElementById("demo2").innerHTML = txt;

}


Je pense que le problème vient de xmlhttp.send qui envoie 2fois un xml (un qui en écrase un autre.. mais je ne n'arrive pas a différencier les Xmlsend ainsi que les xmlDoc ...

Si quelqu'un pouvais m'aider

Merci d'avance
Modifié par none61 (27 Jun 2017 - 12:34)
Modérateur
Bonjour,

tu as deux fois la fonction myFunction définie, la seconde écrase la première. Il faut factoriser ton code pour qu'il utilise les mêmes fonctions.

en gros définir une structure pour tes appels:


var documentsXml = {
  doc1: {
     url: 'http://MonIP1/status.xml',
     tagName: 'led7',
     demoId: 'demo1'
  },
  doc2: {
     url: 'http://MonIP2/status.xml',
     tagName: 'led1',
     demoId: 'demo2'
  }
};


ensuite adapter tes fonctions:


function loadXMLDoc(documentXml) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this, documentXml);
    }
  };
  xmlhttp.open("GET", documentXml.url, true);
  xmlhttp.send();
}

function myFunction(xml, documentXml) {
  var x, i, xmlDoc, txt;
  xmlDoc = xml.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName(documentXml.tagName);
  for (i = 0; i< x.length; i++) {
    txt += x[i].childNodes[0].nodeValue;
  }
  document.getElementById(documentXml.demoId).innerHTML = txt;
}


ensuite l'appel:


loadXMLDoc(documentsXml.doc1);


La structure est optionnelle tu peux directement appeler ainsi:


loadXMLDoc({
     url: 'http://MonIP1/status.xml',
     tagName: 'led7',
     demoId: 'demo1'
});


ou en utilisant des variables différentes, mais une structure sera souvent plus propre.
Modifié par kustolovic (27 Jun 2017 - 13:43)
Bonjour,

Déjà quand tu as ce genre de problèmatique : "j'ai un code qui fonctionne pour une chose, je veux qu'il fonctionne pareil mais pour une autre", il faut tout de suite penser à fonction/factorisation.
Alors tes fonctions ici, elles existent déjà "loadXMLDoc" et "myFunction" (et c'est là ton soucis dans le code que tu as fait, tu as deux fonctions avec le même nom), mais je veux surtout te faire réfléchir à une autre approche.
Il te faut donc rendre tes fonctions plus génériques, pour se faire, tu recherches les variables dans tes fonctions.
Prenons pour exemple la première (loadXMLDoc), ta variable, c'est le chemin vers ton XML, donc tu le passes en paramètre de ta fonction, ce qui donne :
function loadXMLDoc(monCheminVersMonXML) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", monCheminVersMonXML, true);
  xmlhttp.send();
}

Et voilà, ta fonction est devenue plus générique, grâce aux appels différents, tu peux l'appeler x fois, sans devoir répéter la définition de ta fonction à chaque fois :
loadXMLDoc("http://MonIP1/status.xml")
loadXMLDoc("http://MonIP2/status.xml")
loadXMLDoc("http://MonIP42/status.xml")


Si tu as compris le principe, je te laisse faire pour la deuxième. Smiley biggrin

EDIT : kustolovic m'a pris de cours, mais ce même principe est magistralement appliqué !
Modifié par SolidSnake (27 Jun 2017 - 13:56)
Merci pour vos réponse, c'est sympa s'avoir un coup de pouce. Smiley cligne

- Kustolovic, J'ai essayé de décrypter ton script (avec mon faible niveau ^^)

De ce que j'en déduis, tu attribut les ip des différents .xml grâce à 
documentXml.url


Du coup, mes deux fichiers sont chargés et il ne me reste plus qu'a parser les tagname?
Je pense que ça va poser problème du fait que mes .xml ont une ossature identique?

- SolidSnake, si j'ai bien compris la logique(ça c'est moin sûre ^^)

La fonction 
LoadXMLDoc
va passer une a une les URL renseignée et les attribuer automatiquement dans 
xmlhttp.open("GET", monCheminVersMonXML, true);


Du coup les X fichiers sont parsés mais pour la lecture , comment "viser" un fichier en particulier?

Car dans le cas de la deuxième fonction c'est 
xml.responseXML
la variable?
Sujet clos
Aller à