dans tutoriel

eXtraire du contenu XML en JavaScript pur

En voulant extraire un fichier xml aujourd’hui en passant par jQuery (mon l’application utilise la version 1.4.2) je me suis rendu compte que la fonction parseXML n’était pas présente dans cette version du Framework JavaScript…Bon il a quand même fallut que j’aille faire un tour dans le fichier jQuery, version non-compressée bien sûr, l’autre est absolument illisible. De là un CTRL + F + « parseXML » me confirme l’absence de la fonction dans la version 1.4.2….Et là…c’est le drame…..Noooooon !! 
Ne pouvant pas décider de passer brusquement à une version supérieur (étant donné que l’application développée est basée sur cette version 1.4.2…prudence, prudence), j’ai choisi de créer une petite fonction JavaScript qui ferait ce travail aussi facilement qu’en jQuery. En voici le contenu :
Parser XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
	//Parser XML 	function parseXML(txt) { 		if (window.DOMParser) 		  { 		  parser=new DOMParser(); 		  xmlDoc=parser.parseFromString(txt,"text/xml"); 		  } 		else // Internet Explorer 		  { 		  xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 		  xmlDoc.async=false; 		  xmlDoc.loadXML(txt);  		  } 		return xmlDoc; 	}

Et l’utilisation se fait très simplement. Considérons le contenu XML suivant :
Contenu XML
1 2 3 4 5 6 
<book category="mobile">     <title lang="fr">Développer avec jQuery Mobile</title>     <author>Mobile-tuts!</author>     <year>2012</year>     <price>Free</price> </book>

Pour récupérer le titre et le nom de l’auteur, il suffit de faire :
Exemple d’utilisation
1 2 3 4 5 6 7 8 9 
xmlDoc = parseXML(response); // Le contenu est par exemple retourné en ajax titre=xmlDoc.getElementsByTagName("title"); auteur=xmlDoc.getElementsByTagName("author"); for (i=0;i<title.length;i++){       var noeudTitre = titre[i].nodeName, // contient la chaine "title"       titreContenu= titre[i].childNodes[0].nodeValue;  // contient la chaine "Développer avec..."
var noeudAuteur = auteur[i].nodeName, auteurContenu= title[i].childNodes[0].nodeValue; // contient la chaine "Mobile-tuts!"
}

Voilà, rien de bien compliqué 🙂

Laisser un commentaire