Mayo 1, 2012 Uncategorized

Scroll infinito con Javascript y Grails

Estoy actualizando www.dondeviajamos.com. Uno de los cambios que quiero hacer es relativo a la navegación, donde voy a reemplazar el clásico sistema de paginación por un sistema de scroll infinito, estilo Twitter. El scroll infinito se basa en que cuando un usuario visualiza la página y llega al final de la misma, ésta realiza automáticamente una petición AJAX al servidor para que éste le proporcione más registros. Estos registros serán procesados mediante Javascript para presentarlos en un formato de visualización determinado.

He estado intentando utilizar algún plugin que ya existiera, pero ninguno se ha adaptado fácilmente a mis necesidades, por lo que finalmente he decidio desarrollar el scroll infinito de forma manual. Es realmente sencillo, así que voy a explicar rápidamente cómo podemos implementar este sistema.

Codificación de la parte del servidor

El primer punto que necesitamos es que el servidor nos proporcione los nuevos registros en formato JSON. Esto es realmente sencillo con Grails:

En el código anterior vemos que si el navegador solicita un documento HTML entonces simplemente retorna el listado de registros, y si el navegador solicita JSON entonces renderiza un objeto JSON a partir del mismo listado de registros. ¿Cómo sabe el controlador si tiene que devolver HTML o JSON? Si la solicitud es del siguiente tipo /destino/list entonces el servidor devuelve HTML. Si la solicitud es del siguiente tipo /destino/list.json entonces el servidor devuelve JSON.

Codificación de la parte del cliente

En primer lugar, tenemos que saber si el usuario ha hecho scroll y ha alcanzado el final de la página. Esto podemos saberlo mediante el siguiente código Javascript:

El siguiente paso es que cuando el usuario alcance el final de página entonces se realice una petición AJAX al servidor para que éste proporcione más registros. Para hacer la petición AJAX utilizaremos JQuery:

Al método GET sólo hay que pasarle tres parámetros: la URL del servidor, los parámetros que queremos enviar al servidor, y una función callback que se ejecutará una vez el servidor ha devuelto la información. El código Javascript completo de dondeviajamos quedaría del siguiente modo:

Como vemos, es realmente sencillo implementar con Javascript un sistema de navegación basado en scroll infinito, sin necesidad de la utilización de plugins de terceros. Si alguien quiere que aclare algún punto que no ha quedado lo suficientemente claro, no tiene más que dejar un comentario.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Back to top