Blog Reacción Estudio

¡Tu zona de aprendizaje!

Obteniendo los datos de un XML mediante AJAX con jQuery

Gracias a jQuery es muy sencillo obtener los datos de un XML a través de AJAX y manejarlos en nuestra aplicación web.

Vamos por partes, primero debemos tener nuestro archivo XML que devuelva los datos, si no lo tenemos, lo podemos generar con PHP de la siguiente forma.

<?php
 
    header("Content-Type: text/xml");

    if($ret === null){
        echo '  <res>'.'ERROR'.'</res>'."\n"; //variable para comprobar el resultado de la consulta
    }else{
        echo '  <res>'.'OK'.'</res>'."\n"; //variable para comprobar el resultado de la consulta

        echo '<data>'."\n";

        for($i=0;$i<count($ret);$i++){
             echo '      <direccion>';        
                echo '  <id>'.$ret[$i]['ID'].'</id>';                
                echo '  <name>'.$ret[$i]['NAME'].'</name>';                
                echo '  <phone>'.$ret[$i]['PHONE'].'</phone>';                
                echo '  <address>'.$ret[$i]['ADDRESS'].'</address>';                
                echo '  <postal_code>'.$ret[$i]['POSTAL_CODE'].'</postal_code>';                
                echo '  <province>'.$ret[$i]['PROVINCE'].'</province>';                
                echo '  <cod_direccion>'.$ret[$i]['COD_DIRECCION'].'</cod_direccion>';                
                echo '  <province>'.$ret[$i]['PROVINCe'].'</province>';                              
                echo '  <town>'.$ret[$i]['TOWN'].'</town>';                
                echo '  <via>'.$ret[$i]['VIA'].'</via>';                
                echo '  <main_address>'.$ret[$i]['MAIN_ADDRESS'].'</main_address>';                               
            echo '      </direccion>';
        }

        echo '</data>'."\n";
        exit;
    }

?>

Se supone que las variables con los datos de éste archivo PHP son los que devuelve una consulta a la base de datos.

Ahora vamos con la petición ajax por parte de jQuery.

var i = 0;
var id = new Array();
var dir = new Array();
var prov = new Array();
var cp = new Array();

$.ajax({
    url: "./getDirecciones.php",
    type: "POST",
    dataType: "xml",
    async:false,
    error: function(req, err, obj) {
        alert ("Error " + err +" - "+ req.status);
    },
    success: function (xml) {
        res = $("res",xml).text(); //comprueba el estado de la consulta del archivo XML.
          
    if(res == "OK"){
        //Guardamos en un Array los datos del XML.
        $("direccion", xml).each(function(){
             id[i] = $("id",this).text();
             dir[i] = $("address",this).text();
             prov[i] = $("province",this).text();
             cp[i] = $("postal_code",this).text();
             i++;
        });              
                                 
    }else{
        alert("ERROR");
    }
 
    return false;
    }
});

Lo que hacemos aquí es llamar al archivo XML, después obtenemos el dato «res» que devuelve el resultado de la consultar que realiza el archivo XML. Si la consulta no se ejecutó muestra una alerta con un mensaje de error, pero si se realiza correctamente guardamos los datos de cada elemento «direccion» que devuelve el XML en varios arrays que hemos creado.

Ahora podremos manejar estos datos desde Javascript y utilizarlos como queramos.