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.

oriol

oriol wrote 1166 posts

Post navigation

  • Pingback: meneame.net()

  • Molt bona Oriol, amb prototype ho havia intentat i vaig desistir per la incompatibilitat entre browsers.

    Finalment, per un RSS Ticker que he montat, m’ha estat més fàcil carregar l’XML en un div ocult i posteriorment parsejar-lo com si fos un arbre DOM normal amb les utilitats de jQuery (que soporta un XPath limitat).

    Amb aquesta sol.lució no calia fer cap codi especial per diferents navegadors.

    Properament, explicació detallada… al friky blog

  • Jo justament volia posar-me a “estudiar” alguna llibreria AJAX (JQuery, prototype, …). Recomanes JQuery? I la que comentes a l’últim post, què tal?

  • Per cert, estàs “meneado” 😉

  • Oriol Morell i Jané

    Dimas: després de mirar-m’ho una mica, crec que amb JQuery pots fer la majoria d’accions amb AJAX, transicions suaus, etc. i és força senzilla d’emprar 😉

    Però a banda de la llibreria que empris, el que et recomano per estudiar bé les interioritats de les crides, és l’extensió de Firefox ‘firebug’, que et permet aturar les crides on vols, etc. per estudiar els continguts dels objectes, etc. en aquell precís moment.

    Apons: espero llegir l’explicació 😉

  • Pingback: oriolmorell.cat » JQuery 1.0.1()

  • Mireia

    Oriol,

    m’ha agradat molt trobar aquesta entrada teva, perquè justament m’he quedat travada en un codi molt semblant. Pots dir-me, com ho faries per llegir un atribut en un dels elements?

    Per cert, fa uns dies que llegeixo el teu bloc via RSS i està molt i molt bé i, a més… en català! 🙂

    Gràcies per tot!

  • Oriol Morell i Jané

    Salut Mireia, celebro que t’agradi el bloc!!

    Per tal de llegir un atribut el que fariem és:

    this.childNodes[0].getAttribute('nom_atribut');

    Si a l’exemple del post, afegit un atribut ‘a’ al <titol> quedant:
    <titol a='hola'>
    [...]
    </titol>

    El llegiriem mitjançant un:
    this.childNodes[0].getAttribute('a');

    Fins i tot podriem protegir el codi mitjançant un:

    if (this.childNodes[0].hasAttributes()) {
    this.childNodes[0].getAttribute('a');
    }

    Espero que et serveixi d’ajuda!

    Fins ara!

  • Mireia

    Ostres, d’acord… M’estava embolicant amb això de l’atribut. És clar: amb el getAttribute!!! No hi havia caigut!

    Moltes gràcies!
    I sí que serveix l’ajuda, sí! 🙂

    Fins aviat!

  • Bàrbara

    Oriol, quina versió de jQuery utilitzares per a l’exemple que ens proporciones? Jo l’he provat amb la 1.1.2 i no em funciona per a IE…

    Gràcies!

  • Oriol Morell i Jané

    Bàrbara, no sé quina versió era, però a la info de l’arxiu JS ho trobo:

    Built Fri May 12 13:01:23 2006

    L’exemple que tinc penjat et funciona? Si és així miraré d’actualitzar-lo.

  • Bàrbara

    mmm probablement fos de les primeres, diria que per la data, la 1.0.x

    L’exemple que tens penjat no em funciona en IE6+ amb la darrera versió de jQuery (http://code.jquery.com/jquery-latest.js). Depurant una mica el codi, veig que en IE salta un error en temps d’execució, aproximadament en la línia 1000, quan es crida el mètode getElementsByTagName(). Aquí tens el tros de codi on es produeix l’error:

    jQuery.merge( r,
    m[1] != “” && ret.length != 1 ?
    jQuery.getAll( this, [], m[1], m[2], rec ) :
    this.getElementsByTagName( tag )
    );

    En el blog de Fyneworks hi ha un enllaç cap a una sèrie de tests per provar el parseig d’XML amb diferents navegadors (http://www.fyneworks.com/jquery/jQuery-XML-Problems/). Pel que sembla, és un problema generalitzat i encara no he trobat ningú que hi aporti una solució! 🙁

  • Oriol Morell i Jané

    M’ho miro a veure què