Desde que JQuery llegó a nuestras vidas, Javascript se ha convertido en un camino de rosas 😀 Tanto es así que en pocas líneas podemos conseguir el parseo completo de un archivo XML ¡Vamos a verlo!
En primer lugar hay que aclarar que podemos toparnos principalmente con tres formatos de XML diferentes:
- Utilizando atributos: Cada elemento guarda su información dentro de atributos. Los atributos deberían utilizarse para información predeterminada, metadatos, archivos grandes (los atributos tienden a ocupar menos bytes que los elementos).
[xml]<?xml version="1.0" encoding="utf-8" ?>
<Blogs>
<blog name="WebLog Expert – Powerful log analyzer"
description="Download and analyze Apache and IIS Web logs on your own PC."
url=" http://www.weblogexpert.com/"/>
<blog name="Professional drupal themes"
description="For professional drupal themes with a unique look and feel, visit TopNotchThemes.com."
url="http://www.topnotchthemes.com/"/>
<blog name="Paypal Developer Community"
description="The community for developping paypal payment processing scripts."
url="http://www.pdncommunity.com" />"
</Blogs>[/xml] - Utilizando nodos/elementos: Los elementos contienen a su vez otros elementos llamados nodos. Se suelen utilizar para almacenar datos.
[xml]<?xml version="1.0" encoding="utf-8" ?>
<Blogs>
<blog>
<name>WebLog Expert – Powerful log analyzer</name>
<description>Download and analyze Apache and IIS Web logs on your own PC.</description>
<url>http://www.weblogexpert.com/</url>
</blog>
<blog>
<name>Professional drupal themes</name>
<description>For professional drupal themes with a unique look and feel, visit TopNotchThemes.com.</description>
<url>http://www.topnotchthemes.com/</url>
</blog>
<blog>
<name>Paypal Developer Community</name>
<description>The community for developping paypal payment processing scripts.</description>
<url>http://www.pdncommunity.com</url>
</blog>
</Blogs>[/xml] - Mezcla de los dos anteriores.
Dependiendo del cómo esté almacenado utilizaremos un método u otro para recuperarlo.
Recuperación de atributos
[js]
//Read attributes
$.get("Attributes.xml", function (xml) {
$(xml).find("blog").each(function () {
var name = $(this).attr(‘name’);
var description = $(this).attr(‘description’);
var url = $(this).attr(‘url’);
alert(name + " " + description + " " + url);
});
});
[/js]
Recuperación de nodos/elementos
[js]
//Read nodes
$.get("Nodes.xml", function (xml) {
$(xml).find("blog").each(function () {
var name = $(this).find(‘name’).text();
var description = $(this).find(‘description’).text();
var url = $(this).find(‘url’).text();
alert(name + " " + description + " " + url);
});
});
[/js]
Lo que estamos haciendo en ambos casos es una iteración a través de each por cada elemento blog que tengamos en el archivo. Dependiendo del tipo que esperemos utilizaremos attr para recuperar los atributos y find para los elementos.
Espero que sea de utilidad 🙂
¡Saludos!
ojonudo !
¡Gracias Pepe! 😀
¡Saludos!
Saludos, he tratado de ejecutar tu codigo en mi portatil, con el navegador IE y con Firefox y nada, no funciona ni con uno ni con otro, a que puede ser debido?
Hola elcharli,
¿Te da algún error de javascript al intentar probarlo?
¡Saludos!
quisiera recorrer los atributos del elemento se puede
Muy buen post, es muy claro sencillo y facil de comprender. Muchas Gracias …. wenisimo
Muchas gracias Deimak, me alegra que te haya sido de utilidad 😀
¡Saludos!
Hola, buena info, me parece muy interesante, sólo quería avisarte que entrando a tu sitio, me saltó la siguiente advertencia:
22/06/2012 04:25:01 p.m. Filtro HTTP archivo https://www.returngis.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js?ver=3.0.83c JS/Kryptik.QD Troyano
Deberías verificar esto …
Gracias por tu comentario Alexander, ya estoy solucionando el malware y en las próximas horas desaparecerá de la lista negra de google.
Un saludo,
UNA EXPLICACION MUY MUY BUENA EN CUANTO A LEER UN ARCHIVO XML, EN ESPECIAL LA PARTE DONDE EXPLICAS LOS DISTINTOS TIPOS DE XML, EXISTEN MUCHOS TUTORIALES EN LA WEB SOBRE LEER XML PERO NINGUNO EXPLICA LOS TIPOS DE XML Y MAS IMPORTANTE AUN, NO HABLAN DE KE EL ACCESO DEPENDE DEL TIPO DE XML, GRACIAS.
Hola!! Soy novato en esto de construccion Web, pero una de las cosas que mas me llaman es la lectura de ficheros XML. Ahora me podrias decir como lo coloco en un archivo html?
Gracias por adelantado
Hola Isidro, disculpa la tardanza 🙁
¿Has creado el archivo Atributes.xml en el raíz con el XML para poder recuperarlo desde el código? ¿Referenciaste JQuery ANTES de insertar este fragmento del ejemplo? ¿Te da algún tipo de error?
¡Saludos!
Hola, muy buena explicación pero bueno cuando lo coloco en un html no corre y me intriga porque acaso debo de poner mi proyecto en un servidor apache como el xamp? por ejemplo? saludos
Hola felix,
Muchas gracias por tu comentario.
No, no sería necesario ponerlo en un servidor web. Las únicas consideraciones que hay que tener en cuenta son:
1. Referenciar la librería JQuery antes de insertar el código que presento en el post.
2. Atributes.xml con el contenido de ejemplo debe estar en la raíz para que el código JavaScript lo encuentre 🙂
¿Te da algún error en particular?
¡Saludos!
Buen artículo donde se diferencian los tipos de XML.
Pero para probar el código jQuery hace falta servidor. Sin él salta un error que dice que no encuentra el xml (y sí, lo he puesto en la raíz y he referenciado bien jQuery).
Me imagino que esto es porque ‘$.get’ al fin y al cabo es una petición Ajax…
Hola, tu código me ha servido de mucho, pero tengo una pregunta ¿cómo le hago para que el .each no se recorra todo el documento en busca del nodo blog si no que solo encontrando los primeros 5 nodos blog se rompa el recorrido? De antemano gracias y saludos
Muchas gracias por tu comentario slipkvayne 🙂
En cuanto a lo que preguntas, podrías controlar cuántos nodos se van localizando con un contador y, en el momento que consigas los que necesitas, hacer un return false; para que salga del .each.
Espero que te haya resuelto la duda.
¡Saludos!
Buen dia… gracias por el aporte muy bueno… solo tengo una duda, estoy intentando cargar el XML cuando le das click a algo, Carga diferentes NodosPadre con diferentes clicks por eso queria poner solo 1 codigo de lectura de XML y mandarle el nombre del NodoPadre por funcion y que me regrese el dato. pero no logro ponero en la funcion. pero no he podido ponerlo en funcion por que parece que ya es una funcion que se ejecuta automaticamente y cuando intento usar la informacion no me deja por que aun no esta cargada la informacion del XML… intenten darle un return a mi funcion pero aun asi no me regresa nada. te pongo mi linea por si puedes darme una orientacion gracias de antemano
$.fn.ReadXml = (function($XmlVar){
$Vn_i = 0;
$Varray_XmlFile = [];
$.get(«sucursales.xml», function (xml) {
$(xml).find($XmlVar).find(«CIUDAD»).each(function () {
$Vn_i = $Vn_i + 1;
$Varray_City[$Vn_i] = $(this).find(‘SUCURSAL’).text();
});
});return $Varray_City[];
});
$(«.MapNav»).click(function(){
$Varray_Ciudad = $(«#function»).ReadXml(«BC»)
});
Hola Gisela!
Hace dos meses tambien me ayudaste a actualizar a WP7.8
Gracias por tu post.
Lo necesitaba urgentemente y gracias a ti ya tengo lista una aplicación.
Thanks! 😉
Excelente post! Soy nueva trabajando con JQuery y un ejemplo más sencillo y claro que este, no había podido encontrar. Mil gracias!
hola Gisela, poseo problemas, estoy usando tu código y en ie y chrome me sale el siguiente error:
XMLHttpRequest cannot load file://disco%20mac/…/contenidos.xml. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.
nota en safari me funciona bien
te agradecería cualquier sugerencia
bye
Hola german,
El motivo de ese error es porque se está intentando acceder a un recurso que está en otro dominio, diferente a donde se está sirviendo la aplicación, a través de JavaScript. Lo que te indica el navegador es que no se está especificando en la cabecera de la petición el permiso necesario para acceder. Puedes leer más información al respecto en este otro artículo. Prueba a ubicar el archivo en el mismo sitio en el que se está ejecutando la aplicación (y mismo puerto). No deberías de tener poblemas.
¡Saludos!
Hola me gusta lo que has hecho, pero quisiera saber como lo implemento en el html. por favor ayúdame con ese dato.
Saludos
Hola Daniel,
No sé a qué te refieres exactamente… ¿A representarlo quizás?
Saludos
Quiero Consumirlo Dinamicamente, Quiero saber cuales nodos pertenecen a un nodo padre, pero dinamico sin tenerle que decir con el .find() cual es el padre y asi sucesivamente
Hola Gisela.
sabes si con jquery es posible leer un CFDI y retornar los valores a HTML