Ajax con jquery, xml y php

Portada

Tecnología

Programación

Detalles: Categoría: Programación; Última actualización el Viernes, 07 Octubre 2011 23:46; Escrito por cybnet; Visto: 4638

Un post anterior fue decidado a la construcción de una aplicación ajax con php, jquery y json. En esta ocasión realizaré el mismo ejemplo utilizando xml como lenguaje de intercambio de datos.

XML es el nombre de un leguaje de marcas que viene de sus siglas en inglés eXtensible Markup Language que fue desarrollado por W3C (World Wide Web Consortium). Su uso como estándar de intercambio de datos se ha hecho tan popular que se usa hoy en día en una gran variedad de plataformas y no sólo en internet.

Pongamos el mismo ejemplo que aparece en el post mencionado anteriormente:

1. El HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
  <head>
   <script type="text/javascript" src="/js/jquery.js"></script>
   <script type="text/javascript" src="/js/ajax.js"></script>
  </head>
  <body>
   <a href="#" id="myid">Detalles casa 2</a>
   <div class="info" style="display:hidden"></div>
  </body>
</html>

2. El código ajax con jQuery

Un ejemplo sería el siguiente que hemos incluido el archivo ajax.js llamado en el código html puesto unas líneas más arriba.

<script type="text/javascript">
function restults(xml) {
     var id_text = $(xml).find('id').text();
     var m2_text = $(xml).find('m2').text();
     var hab_text = $(xml).find('hab').text();
     var dir_text = $(xml).find('dir').text();
     $("div.info").show();
     $("div.info").append("ID: "+id_text);
     $("div.info").append("M2: "+m2_text+"");
     $("div.info").append("Habitaciones: "+hab_text);
     $("div.info").append("Lacalización: "+dir_text);
 }
$(document).ready(function(){
 $("#myid").click(function(){
  $.ajax({
    data: "id=2",
    type: "GET",
    dataType: "xml",
    url: "http://www.miweb.com/casas.php",
    success: function(xml){ 
       restults(xml); 
     }
   });
  });
});
</script>

La llamada ajax se activa al hacer clic en el elemento de id="myid". El archivo de procesamiento en el servidor es llamado casas.php y el parámetro pasado es el id de la casa, en el ejemplo 2.

En caso de éxito, se mostrarán los datos en un un div de clase "info" que inicialmente podemos tener escondido (p.e. style="display: none").

Nota que los datos xml obtenidos son id, m2, hab y direccion, accesibles de forma individual a través de data.id, data.m2, data.hab y data.direccion.

3. El archivo casas.php

El archivo casas.php recibirá los datos pasados por la llamada ajax desde jQuery, este caso la id=2. Realizará la consulta a la tabla "casas" y devolverá la información relativa a la vivienda seleccionada en formato de datos json. Un ejemplo podría ser el siguiente:

<?php
(int) $id = $_GET['id'];
if($id > 0) {
   process($id);
  }

 function process($id) {
   $db = mysql_connect('localhost', 'mysql_user', 'mysql_password'); 
   if (!$db) { 
     die('Could not connect: ' . mysql_error());
    } 
   if (!mysql_select_db('nombre_base_de_datos')) { 
     die('Could not select database: ' . mysql_error());
    }    
   $result = mysql_query("SELECT id,m2,hab,direccion FROM casas WHERE id=".$id); 
   if (!$result) { 
     die('Could not query:' . mysql_error()); 
    }

   $row = mysql_fetch_object($result);
   header('content-type: text/xml');
   $output = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
   $output .= "<data>";
   $output .= "<id>".$row->id."</id>";
   $output .= "<m2>".$row->m2."</m2>";
   $output .= "<hab>".$row->hab."</hab>";
   $output .= "<dir>".$row->direccion."</dir>";
   $output .= "</data>";

   echo $output;
   mysql_close($link);
 }
?>

+1 -1 Reportar

Comentarios (2)

RSS

cybnet

(24.02.2012 (01:15:27))

Saludos carlos, fíjate en que tu script php genere correctamente el XML, por ejemplo:
Código :

  header('content-type: text/xml');
  $output = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
  $output .= "<data>";
  $output .= "<id>".$row->id."</id>";
  $output .= "<m2>".$row->m2."</m2>";
  $output .= "<hab>".$row->hab."</hab>";
  $output .= "<dir>".$row->direccion."</dir>";
  $output .= "</data>";

Fíjate como se poner el header en content-type:text/xml y como cada uno de los tagas se cierra correctamente.

Citar