09 septiembre 2008

Cargar un XML con Jquery

Hace unas semanas estaba buscando un código para poder cargar el contenido de un archivo XML en una página de manera dinámica y de modo que esta información se cargará al abrir la página. Hace tiempo usaba una función que usaba un objetoActiveX para leer el contenido de un XML, el objeto tenía el nombre de "Microsoft.XMLDOM". El resultado fue una función un tanto grande y que aunque solucionaba el problema no me tenía convencido. Entonces comence a buscar alguna solución con Jquery, pues me funcionó muy bien para cargar páginas HTML al usar funciones como ajax, load, y get. Después de un rato de investigar y agregar unas cosas por mi mismo construí este código:
function cargarXML(url,blanco,info)
{
$.ajax({
type: "GET",
url: url + Math.random(),
dataType: "xml",
success: function(xml) {
var colem = new Array(); var nact = 0; 
$(blanco).empty();
$(xml).find('actividad').each(function(){
colem[0] = $(this).find('contenido').text();
colem[1] = $(this).find('responsable').text();
colem[2] = $(this).find('url').text(); 
colem[3] = $(this).find('fecha').text();
colem[4] = $(this).find('img_std').text(); 
colem[5] = $(this).find('sistema').text();
nact = nact + 1;

$("
").html(colem[0] + colem[1] + colem[3] + colem[4] + colem[5] ).appendTo(blanco); if(nact == 5) { return false; } }); //close each( $(info).html("Total de actividades: " + $(xml).find('actividad').length); } }); //close $.ajax({...}) }
La función cargarXML recibe como parametros la url (la ubicación dentro del servidor del xml), blanco (El objeto DOM donde se cargará el texto que se extraiga del XML) e info (el blanco donde se escribirán el número de elementos del XML leidos). Lo siguiente es usar la función AJAX de jquery para cargar de manera asincrona el archivo xml, es importante ver el uso de la función random, pues con ella creo un valor dummy para evitar problemas de cache. En la función ajax se debe especificar que se va a leer un xml y una vez esto podemos tratar al xml como si fuera un objeto y usar la función find para localizar un nodo en especial en primer lugar y después el método each para leer a todos sus hijos. Para entender mejor la función consideremos la siguiente estructura que muestra únicamente los elementos principales.
function cargarXML(url,blanco,info)
{
$.ajax({
type: "GET",
url: url + Math.random(),
dataType: "xml",
success: function(xml) {

/*Aquí se hace la lectura del XML usando la función each()*/

   }); //close $.ajax({...})
}
Es prudente mencionar que esta es la versión 1.0 de mi código para lectura de XML y posteriormente aclararé más cosas del mismo, actualmente lo tengo implementado en un proyecto en el que estoy trabajando.

6 comentarios:

  1. está bueno como idea inicial.

    ResponderEliminar
  2. Se que el post es antiguo -_- 2008...

    Pero tengo una consulta:

    te ha ocurrido que en el xml tienes un campo con guion, algo asi:


    GRUPO
    DESCRIPCION


    No consigo obtener el dato:
    $(this).find('no-grupo').text();

    ResponderEliminar
  3. ^_^ no puedo poner codigo pongo entre corchetes:

    [dato]
    [nom-grupo]GRUPO[/nom-grupo]
    [descr]DESCRIPCION[/descr]
    [/dato]

    ResponderEliminar
  4. Hola Gustavo:
    Es posible que el problema sea que el "-" es considerado como meta caracter. El caso es que para "jalarlo" necesitas usar los backslashes antes del guión. Algo como esto podría ayudar:
    $(this).find('no\\-grupo').text();

    Espero te sea de utilidad esto.
    Saludos

    ResponderEliminar
  5. Como puedo cargar una url remota?
    Gracias

    ResponderEliminar