Usando jQuery para Obtener Datos de un Archivo XML

Hace un tiempo en el trabajo, queríamos mostrar el feed de publicaciones de un blog que hace parte de la estrategia de la aplicación que tenemos. En primera medida encontré este tip que les voy a compartir, sin embargo, terminamos usando otro mecanismo. Si bien no lo usamos, me parece un recurso que vale la pena compartir, y aunque es un poco rígido en su aplicación, puede que te pueda servir en algún proyecto o por lo menos para aprender de jQuery un poco más.

La idea es usar el shorthand $.get() de la función ajax de jQuery. Aclaro, de acuerdo a la documentación de la API de jQuery, $.get() y $.ajax() son lo mismo, a diferencia que el primero es una forma corta para el último. En este proyectico usaremos $.get() para cargar un recurso que está en el servidor, o sea, nuestro archivo XML. El recurso lo encontré en un sitio muy bueno, y útil, para encontrar código, y desde el mismo sitio comparten una demo en vivo.

Cuando decía que es muy cerrado este script jQuery, es más por el lado del XML. Tienes dos opciones, o adaptas tus futuros archivos XML a la estructura de este que vas a ver o, si cuentas con mucho conocimiento en jQuery, adaptar el código a tu archivo de datos. Obviamente, la segunda opción es la más fácil y óptima.

El archivo XML tiene la estructura que muestra la imagen.

archivo xmlAsí luce el código jQuery que hace la magia.

codigo jqueryAhora la explicación

Todo inicia una vez que ha cargado el documento web, esta es una premisa de jQuery. Lo que sigue es el uso de la función $.get() junto a una función anónima o Callback con un parámetro d. A $.get() se le pasa el archivo XML que queremos tratar y luego el callback hace el resto.

Importante es lo que sucede desde la línea que tiene el código

$(d).find(‘book’).each(function(){

En este punto inicia el recorrido por la estructura del archivo XML. La búsqueda comienza por la etiqueta denominada “book“, a lo que siguen las líneas

var title = $book.attr(“title”);

Esta línea lo que hace es asignar a la variable title el valor del atributo title de la etiqueta book actual. Luego sigue…

var description = $book.find(‘description’).text();

Acá, es muy similar a lo anterior. Se asigna a la variable description el valor de esta etiqueta dentro de book, finalmente…

var imageurl = $book.attr(‘imageurl’);

Esta porción de código, funciona exactamente igual que la primera mencionada. En lugar del título, toma el enlace de la imagen contenido dentro del atributo imageurl.

Finalmente

A lo último, lo que se hace es asignar todas las variables al documento HTML para darle estructura y que se visualicen correctamente.

Es así, como con este código pueden cargar un archivo XML que tenga datos estructurados. Pueden basarse en este código para futuras implementaciones o aprender más de la librería de JavaScript, jQuery.

Y como todo lo que aquí comparto, que quede para la posteridad.

PD: Para descargar los fuentes, ve al sitio original.

Autor: cesc1989

Ingeniero de Sistemas que le gusta escribir y compartir sobre recursos que considera útiles, además que le gusta leer manga y ver anime.

4 comentarios en “Usando jQuery para Obtener Datos de un Archivo XML”

  1. public function actionCreate()
    {
    $model = new Zonas;
    if (isset($_POST)) {
    try{
    $model->attributes=$_POST;

    }catch (Exception $e) {
    echo ‘error’;
    }
    if ($model->save()) {

    echo “1”;
    }else{
    exit();
    echo “0”;
    }
    }
    }

    public function actionConsultz()
    {

    $model=Zonas::model()->findByPk($_POST[‘id_zona’]);
    if(count($model) > 0){
    $arreglo = array();

    $arreglo[] = array(
    ‘id_zona’=>$model->id_zona,
    ‘zona’=>$model->zona,
    ‘descripcion’=>$model->descripcion
    );
    echo json_encode($arreglo);

    }else{
    echo “0”;
    }
    }

    public function actionUpdatez()
    {
    $model=Zonas::model()->findByPk($_POST[‘id’]);
    $model->zona=$_POST[‘zona’];
    $model->descripcion=$_POST[‘descripcion’];
    $model->save();
    if(count($model) > 0){
    echo “1”;
    }else{
    echo “0”;
    }
    }

    public function actionDeletez()
    {

    $model=Zonas::model()->findByPk($_POST[‘id_zona’]);
    if($model->delete()){
    echo “1”;
    }else{
    echo “0”;
    }

    }

    —————————————————————————————–
    var Crudzonas={
    guardar : function(){
    jQuery.ajax({
    data:{
    ‘zona’:$(‘#txtZona’).val(),
    ‘descripcion’:$(‘#txtDesZona’).val()
    },
    type:’POST’,
    datatype:’json’,
    url:’Create’
    }).done(function (data){
    if(data != 0){
    mensaje;
    }else{
    mensaje;
    }
    });
    }
    }

  2. Gracias por compartir,
    Es justamente lo que estaba buscando para una aplicación local y usar el XML como un pequeñita base de datos que corre en un RaspBerry Pi

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s