Lo primero que hacemos es registrar la función inicializarEventos para que se ejecute
una vez terminada de cargar la página por completo:
addEvent(window,'load',inicializarEventos,false);
La función inicializarEventos llama por primera vez a la función cargarPagina con el
objetivo que aparezca la información de la página central la primera vez que pedimos la
página listado (pasamos un valor aleatorio para que el IExplorer no traiga la página de
la Cache del navegador):
function inicializarEventos()
{
var aleatorio=Math.random();
cargarPagina('columnacentral.php?ale='+aleatorio);
}
La función cargarPagina recibe la url de la página que queremos rescatar del servidor en
forma asíncrona.
Creamos un objeto XMLHttpRequest:
conexion1=crearXMLHttpRequest();
Indicamos el nombre de la función que procesará los eventos del objeto:
conexion1.onreadystatechange = procesarEventos;
Indicamos el modo de conexión y el nombre del archivo a llamar.
Enviamos la petición.
var conexion1;
function cargarPagina(url)
{
if(url=='')
{
return;
}
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open("GET", url, true);
conexion1.send(null);
}
La función procesarEventos obtiene la referencia del div donde debemos mostrar los datos de los
libros:
var detalles = document.getElementById("libros");
Cuando los datos llegaron al navegador el siguiente if se verfica verdadero y procedemos a
cargar el div con el trozo de HTML devuelto por el servidor:
if(conexion1.readyState == 4)
{
detalles.innerHTML = conexion1.responseText;
var ob1=document.getElementById('sig');
Otra cosa muy importante es obtener la referencia a los dos hipervínculos que nos permiten la
paginación de resultados, con esto cuando se presionen dichos hipervínculos procederemos a
cargar en forma asíncrona los datos en la columna central:
if (ob1!=null)
addEvent(ob1,'click',presionEnlace,false);
var ob2=document.getElementById('ant');
if (ob2!=null)
addEvent(ob2,'click',presionEnlace,false);
}
La función presionEnlace se dispara cuando presionamos alguno de los dos hipervínculos "Anterior" o
"Siguiente".
En esta función debemos identificar si trabajamos con el IExplorer u otro navegador. Según este
dato procedemos a llamar a la función cargarPagina con la url almacenada en el hipervínculo (en nuestro
caso dicha página es columnacentral.php)
function presionEnlace(e)
{
if (window.event)
{
window.event.returnValue=false;
var url=window.event.srcElement.getAttribute('href');
cargarPagina(url);
}
else
if (e)
{
e.preventDefault();
var url=e.target.getAttribute('href');
cargarPagina(url);
}
}