Migrar a ajax

[caricatos]

Siguiendo la crónica:

Cuando sabemos el tamaño del array de fotos (no sabemos nada más) llenamos un array vacío de fotos:

Código:

tamGaleria = parseInt(datoTraido.getElementsByTagName('total')[0].firstChild.data);
for (var i = 0; i < tamGaleria; i ++)
	galeria[i] = new Foto("", "", "", "", "");

Sabiendo el tamaño de cada página desde la llamada principal:

Código:

<script type="text/javascript" >
	galeriaPaginada(galeria, "0.28", 10, 3, "laGaleria", "", "popup");
</script>

El tercer parámetro es el número de filas de cada página, y el 4º el número de columnas (en este caso son 30)... y ese valor será el que se pase como rango en la siguiente petición:

Código:

var pedir = "AjaxBuscarFechas.php?rango=" + tamPagina;
// se debe mostrar la última capa
irCapa = ncapas - 1;
// la respuesta será procesada por respuestaXMLNRango() 
pedirXML(pedir, respuestaXMLFechas);

Recibimos la petición en respuestaXMLNRango() a partir de AjaxBuscarFechas.php:

Código:

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

function fechas($rango) {
	$lineas = file("fotos.js");
	$n = count($lineas);
	echo "<pepe>";
	for ($i = 0, $j = 0; $i < $n; $i ++)	{
		$resultado = explode("'", $lineas[$i]);
		if (count($resultado) > 1)	{
			if (($j % $rango) == 0)
				echo "\n<foto><lugar>$j</lugar><src>$resultado[1]</src><tam>$resultado[3]</tam><fecha>$resultado[5]</fecha><motivo>$resultado[7]</motivo><opciones>$resultado[9]</opciones></foto>";
			if (($j % $rango) == ($rango - 1) || $j == $n - 2)
				echo "\n<foto><lugar>$j</lugar><src>$resultado[1]</src><tam>$resultado[3]</tam><fecha>$resultado[5]</fecha><motivo>$resultado[7]</motivo><opciones>$resultado[9]</opciones></foto>";
			$j++;
		}
	}
	echo "</pepe>";
}

echo '<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>';

$rango = 1;
if (isset($_GET["rango"]))	{
	$rango = (int) $_GET["rango"];
}
  
fechas($rango);
?>

Aparte de la cabecera XML y la etiqueta raíz, devuelve datos de esta clase:

Código:

- <foto>
  <lugar>0</lugar> 
  <src>fotos/20040000.jpg</src> 
  <tam>360x480</tam> 
  <fecha>10/1/2004</fecha> 
  <motivo>Skateboard</motivo> 
  <opciones>ef=1,risas=1,env=1</opciones> 
  </foto>
- <foto>
  <lugar>29</lugar> 
  <src>fotos/20040029.jpg</src> 
  <tam>360x480</tam> 
  <fecha>15/5/2004</fecha> 
  <motivo>Superman</motivo> 
  <opciones>ef=1,risas=1,env=1</opciones> 
  </foto>

Que servirán para rellenar los elementos de la galería que formán parte del menú de paginación... donde pone lugar será el índice del array y el resto de etiquetas llenaran los objetos fotos que se corresponden con las fotos primera y última de cada página: (0-29, 30-59, 60-89...)

Y la función javascript que la procesa:

Código:

function respuestaXMLFechas()	{// 
	if (pedido.readyState == 4)	{
		if (pedido.status == 200)	{
			datoTraido = pedido.responseXML.documentElement;
			// averiguamos el tamaño para el bucle:
			elementos = datoTraido.getElementsByTagName('foto');
			tamTraido = elementos.length;
			//alert ("trajimos " + tamTraido + " datos");
			// asignamos los valores al array galeria...
			for (var i = 0; i < tamTraido; i++)
				with(galeria[elementos[i].getElementsByTagName("lugar")[0].firstChild.data])	{
					URL = elementos[i].getElementsByTagName("src")[0].firstChild.data;
					tam = elementos[i].getElementsByTagName("tam")[0].firstChild.data;
					fecha = elementos[i].getElementsByTagName("fecha")[0].firstChild.data;
					comentario = elementos[i].getElementsByTagName("motivo")[0].firstChild.data;
					opciones = elementos[i].getElementsByTagName("opciones")[0].firstChild.data;
				}
			// y escribimos la galería buscando la última página
			document.getElementById(capaBase).innerHTML = 
				_galeriaPaginada(galeria, miniatura, FILASxPAGINA, COLUMNASxFILA, capaBase, lasDimensiones, destino);

			// El índice menor será ncapas * tamPagina:
			var indiceMenor = (ncapas - 1) * tamPagina;

			// El índice mayor será tamGaleria - 1:
			var indiceMayor = tamGaleria - 1;
			// La petición será:

			var pedir = "AjaxBuscarFotos.php?rango=" + indiceMenor + "-" + indiceMayor;
			irCapa = ncapas - 1;
			pedirXML(pedir, respuestaXMLRango);
		}
		else	{
			alert("error\n" + pedido.statusText);
		}
	}
}

Como se puede ver, se hace la última petición del inicio con:

Código:

var pedir = "AjaxBuscarFotos.php?rango=" + indiceMenor + "-" + indiceMayor;
irCapa = ncapas - 1;
pedirXML(pedir, respuestaXMLRango);

Y la respuesta escribe la capa correspondiente:

Código:

function respuestaXMLRango()	{// 
	if (pedido.readyState == 4)	{
		if (pedido.status == 200)	{
			datoTraido = pedido.responseXML.documentElement;
			// averiguamos el tamaño para el bucle:
			elementos = datoTraido.getElementsByTagName('foto');
			tamTraido = elementos.length;
			//alert ("trajimos " + tamTraido + " datos");
			// asignamos los valores al array galeria...
			for (var i = 0; i < tamTraido; i++)
				with(galeria[elementos[i].getElementsByTagName("lugar")[0].firstChild.data])	{
					URL = elementos[i].getElementsByTagName("src")[0].firstChild.data;
					tam = elementos[i].getElementsByTagName("tam")[0].firstChild.data;
					fecha = elementos[i].getElementsByTagName("fecha")[0].firstChild.data;
					comentario = elementos[i].getElementsByTagName("motivo")[0].firstChild.data;
					opciones = elementos[i].getElementsByTagName("opciones")[0].firstChild.data;
				}
			// y escribimos la capa correspondiente
			escribirCapa(irCapa, 
				elementos[0].getElementsByTagName("lugar")[0].firstChild.data,
				elementos[tamTraido - 1].getElementsByTagName("lugar")[0].firstChild.data);
			// y actualizamos el array vistas
			vistas[irCapa] = true;
			// y mostramos la capa:
			document.getElementById(capaBase + irCapa).style.display = "block";
			
		}
		else	{
			alert("error\n" + pedido.statusText);
		}
	}
}

Las siguientes peticiones se hacen cada vez que se quiere mostrar una página que no estuviera cargada...

Saludos