« anterior | siguiente »

Home > 2007 > Febrero > Martes, 06 de Febrero 2007 > Laboratorio: paginación Ajax estilo Google Reader
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Mar06Feb2007

Laboratorio: paginación Ajax estilo Google Reader

16:10 H (CET)| Temas: AJAX · Desarrollo web

A parte de todas las funcionalidades de Google Reader como lector de feeds, una de las cosas que más me gusta es su paginación.

Carga inicialmente un número de entradas, y cuando el usuario ha acabado de verlas, vuelve a cargar más. ¿Comó podemos saber cuando el usuario ha visto la última entrada?, pues sencillo, cuando el scroll de la capa que contiene la lista de feeds está abajo del todo. Es en ese momento cuando tenemos que realizar una llamada Ajax para cargar los nuevos datos e incluirlos en la lista.

El proceso es sencillo, tendremos un script que ejecutaremos inicialmente (con el onload de la página), que se encargará de comprobar cada cierto tiempo (en este caso 3 segundos) si el scroll del contenedor de la lista está al final, y si es así, realizar una llamada Ajax y añadir los datos.

Para esta ocasión he usado jQuery, que para Ajax está muy bien, aunque debo reconocer que o es por malas costumbres, o prefiero usar el DOM si librerías externas.

// Objeto que trata la paginacion
var __SCROLL__ = {
"n" : 15, // posicion actual de la paginación, inicialmente es 15
"scroll" : function() {
  var div = $("#contenedor")[0]; // getElementById
  // Si el scroll está al final del todo
  if (div.scrollHeight - div.clientHeight == div.scrollTop) {
    // Llamada Ajax para obtener los datos, que son tratados por la funcion
    $.get("paginacion.php", { "pos": __SCROLL__.n }, function(datos) {
      // Incremento la posicion de la paginación          
      __SCROLL__.n += 10;
      // Por cada hijo del XML que obtengo, lo añado a la lista si es de tipo Element
      for (var i=0; i<datos.firstChild.childNodes.length; i++) {
        if (datos.firstChild.childNodes[i].nodeType == 1) { // Element node
          // Creo un nuevo elemento LI con el contenido y lo añado al UL con id="lista"
          $("<li>"+datos.firstChild.childNodes[i].firstChild.nodeValue+"</li>").appendTo("#lista");
        }        
      }
    });
  }
  // Vuelvo a comprobar dentro de otros 3 segundos
  setTimeout(function() {__SCROLL__.scroll()}, 3000);
}
}

// Carga inicial de la funcion
window.onload = function() {
  setTimeout(function() {__SCROLL__.scroll()}, 3000);
}

El contenedor deberá tener scroll, para ello hay que usar el estilo overflow para asegurarnos de que haya scroll.

El script PHP que devuelve los datos simplemente devuelve una lista con nuevos enlaces:

header('Content-type: text/xml');
echo '<?xml version="1.0" standalone="yes"?>';
$n = $_GET["pos"];
echo '<ul>';
for ($i = $n; $i < $n+10; $i++) {
  echo '<li>Enlace '.$i.'</li>';
} 
echo '</ul>';

El script es mejorable, pero como idea inicial es suficiente.

Ejemplo

Relacionados

1. joel ~ Lunes, 20 Ago 2007 | 22:06H:

Hola Amigo,
Bueno tu script, pero lo solo funciona en firefox pero no en IE7

Saludos
Joel