Avec les sélecteurs jQuery, sélectionner un élément HTML n’a jamais été aussi facile. Mais ce que l’on oublie souvent c’est que le moteur des sélecteurs de jQuery fonctionne sur les DOM et donc on peut utiliser toutes les méthodes de jQuery avec du XML !

Le but étant de récupérer un fichier XML avec de l’AJAX pour ensuite afficher ce que nous retourne le XML. Dans un premier temps, nous allons écrire la requête AJAX pour récupérer le XML:

$('.getCourses').click(function(){
	$.ajax({
		type: "GET",
		url: "courses.xml",
		dataType: "xml",
		complete : function(data, status) {
			var products = data.responseXML;
	}});
});

Voici le fichier XML :

< ?xml version="1.0" encoding="UTF-8"?>


		Eau
10€
	

		Pain
0.70€
	

		Gateaux
5€

Maintenant il faut voir pour le parsing et l’affichage des données du fichier XML. Comme dis précédemment, nous allons pouvoir utiliser les méthodes .attr() , .find() etc de jQuery. Et vous allez voir, ça simplifie la vie .
Plaçons nous dans la méthode de réponse complete de l’AJAX et ajoutons :

var appendHtml = "";
$(products).find('product').each(function(){
	var id = $(this).attr('id');
	var name = $(this).find('name').text();
	var price = $(this).find('price').text();
	appendHtml += "<li>#"+id+" - <strong>"+name+"</strong> : "+price+"</li>";
});
$("#coursesList").append(appendHtml);

Il suffit ensuite d’ajouter une balise HTML et un bouton dans votre page pour afficher le rendu :

<button class="getCourses">Récupérer la liste des courses.</button>
<ul id="coursesList" />

Je vous met à disposition la démonstration de ce tutoriel.

Plus j’utilise jQuery en tant que librairie par défaut plus je me rends compte que charger 19ko à chaque fois sur mes pages ne me dérange absolument pas. Et vous ? Qu’en pensez-vous ?