Laboratorio: paginación Ajax estilo Google Reader

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