Recorrent un XML amb JavaScript

Un dels objectius d’aquestes vacances era familiaritzar-me amb l’ús de JQuery per tal de poder fer RIA de forma àgil i senzilla i sense haver de carregar macro llibreries com Prototype o Script.aculo.us quan no fos necessari.

Una de les primeres proves que he realitzat, ha estat la petició d’un arxiu XML via AJAX i al posterior lectura del mateix mitjançant l’arbre DOM, realment és força trivial.

Donat un XML com el que segueix:

<items>
	<item>
  		<titol>Element 1</titol>
		<contingut>Contingut element 1</contingut>
	</item>
	<item>
  		<titol>Element 2</titol>
		<contingut>Contingut element 2</contingut>
	</item>
</items>

Teòricament, podem llegir-lo de la següent manera:

url="arxiu.xml";
$.get(url, function(xml){
	$("item",xml).each(function(i){
		alert("Això és el titol del fill " + i + ":" + this.childNodes[0].textContent);
		alert("Això és el contingut del fill " + i + ":" + this.childNodes[1].textContent);
	})
})

Sempre hi ha peros, amb IE sembla que la solució no acaba de funcionar, ja que l’element this.childNodes[0].textContent no està definit i cal afegir un FirstChild al propi element per tal que sàpiga que vols llegir-lo. L’exemple doncs quedarà:

url="arxiu.xml";
$.get(url, function(xml){
	$("item",xml).each(function(i){
		if (this.childNodes[0].textContent == undefined){
			alert("IE - Això és el titol del fill " + i + ":" + this.childNodes[0].firstChild.text);
			alert("IE - Això és el contingut del fill " + i + ":" + this.childNodes[1].firstChild.text);
		} else {
			alert("Això és el titol del fill " + i + ":" + this.childNodes[0].textContent);
			alert("Això és el contingut del fill " + i + ":" + this.childNodes[1].textContent);
		}
	})
})

He provat l’exemple amb Firefox, Opera i IE amb el resultat esperat. Així doncs, mitjançant aquest petit codi, podem fer crides AJAX que retornin un XML i parsejar-lo al navegador.

He penjat l’HTML de l’exemple i l’arxiu XML llegit per si algú vol tafanejar.