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.
Recorriendo un XML con JavaScript…
Ejemplo sencillo de como leer el XML resultante de una llamada AJAX mediante JQuery. Testeado con Firefox, Opera y IE 6.0. (En catalán)…
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”
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ó
[...] Si voleu veure la potència de JQuery, podeu retrobar l’exemple de recórrer un XML que vaig publicar fa uns dies. [...]
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!
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!
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!
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!
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.
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ó!
M’ho miro a veure què