AJAX paso a paso: Información de imágenes

AJAX tiene muchas utilidades, y aunque a veces se abusa de ello, siempre nos puede dar agilidad a la hora de cargar la página, vamos a mostrar un caso de cómo cargar datos nuevos en la página una vez se haya finalizado la carga de la página en sí. Para ello, un ejemplo que nos viene perfecto es una galería de imágenes y cargar los datos de cada imágen de forma asíncrona, que puede ser costoso si se carga la página con los datos de las imágenes y que el usuario tenga que esperar a esta información, cuando es posible que no le interese. A parte, explicaremos otro tipo de método de recibir datos, esta vez mediante el método POST y un XML.

El método para instanciar el objeto XMLHttpRequest va a ser el mismo que la vez anterior, y que el resto de las veces. Lo que si varía esta vez es el método de enviar los datos y el modo de recibirlos.

function carga(id) {
var ajax = ajaxobj();
ajax.open("POST", "carga.php", true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
var datos = ajax.responseXML;
var coment = document.getElementById("coment"+(id+1));
var txt = "<p>";
txt += datos.getElementsByTagName('ciudad').item(0).firstChild.data+"<br />";
txt += datos.getElementsByTagName('url').item(0).firstChild.data+"<br />";
txt += datos.getElementsByTagName('pais').item(0).firstChild.data+"<br />";
txt += datos.getElementsByTagName('poblacion').item(0).firstChild.data;
txt += "</p>";
coment.innerHTML = txt;
}
}
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send("&id="+id);
}

En este caso los datos se reciben mediante la propiedad responseXML, que nos devuelve un XML, que luego podremos tratar mediante el DOM, usando getElementsByTagName facilitaremos esta labor. Los datos los enviamos mediante POST, y es necesario mandar los parámetros usando la función send.

Una vez cargada la página, obtendremos la información de la imágen una a una mediante AJAX, también se podría hacer solo si se pone encima de la imagen el ratón.

function cargaDatos() {
for (var i=0; i<3; i++) {
carga(i);
}
}

Y ya por último nos falta el script PHP que devuelve los datos, hemos simulado una obtención de datos, para no complicar el script y que lo importante de esta entrada no se pierda bajo la dificultad de seguir el script. Tenemos un array con datos, los datos los obtenemos según sea el parámetro id, y nos creamos un XML que lo delvolveremos con su correspondiente Content-type.

<?php
$id = $_POST["id"];
// Simulación de obtención de datos
$datos = array();
$datos[0][0] =  'MADRID';
$datos[0][1] =  'http://es.wikipedia.org/wiki/Madrid';
$datos[0][2] =  'País: España';
$datos[0][3] =  'Población: 3.155.359 hab (2005)';
$datos[1][0] =  'LA HABANA';
$datos[1][1] =  'http://es.wikipedia.org/wiki/La_Habana';
$datos[1][2] =  'País: Cuba';
$datos[1][3] =  'Población: 2.163.824 habitantes.';
$datos[2][0] =  'PARÍS';
$datos[2][1] =  'http://es.wikipedia.org/wiki/Par%C3%ADs';
$datos[2][2] =  'País: Francia';
$datos[2][3] =  'Población: 2.125.246 hab (1999)';
$xml  = '<?xml version="1.0" standalone="yes"?>';
$xml .= '<datos>';
$xml .= '<ciudad>'.$datos[$id][0].'</ciudad>';
$xml .= '<url>'.$datos[$id][1].'</url>';
$xml .= '<pais>'.$datos[$id][2].'</pais>';
$xml .= '<poblacion>'.$datos[$id][3].'</poblacion>';
$xml .= '</datos>';
header('Content-type: text/xml');
echo $xml;
?>

Podéis descargaros el ejemplo aquí