Recarga de página Controlada con JavaScript

Muchas páginas web usan una recarga automática para que los usuarios dispongan de la última actualización de la misma. Un ejemplo son las portadas de los periódicos digitales o las retransmisiones en vivo. Sin embargo, en muchas ocasiones la recarga no ofrece una página nueva al usuario. Este artículo intenta ofrecer una manera que permita recargar la página sólo si ésta ha cambiado. Asumo conocimientos elevados de Javascript y básicos sobre el funcionamiento de los servidores web y la arquitectura cliente/servidor.

Requisitos

Para lograr este objetivo utilizaremos la cabecera Last-Modified que el servidor envía a los navegadores junto con el contenido de las páginas. Hay que indicar que esto no lo hace siempre: las páginas dinámicas no suelen llevar esta cabecera ni tampoco muchos servidores que admiten el mecanismo SSI (Server Side Includes) de Apache, que permite incluir ficheros del servidor como parte de las páginas. Si ese es nuestro caso, tendremos que utilizar alguna de las siguientes opciones:

• Proporcionar desde el lenguaje de servidor que estemos utilizando para las páginas dinámicas la cabecera Last-Modified .
• Emplear SSI con la directiva XBitHack puesta a Full .
• Si no es posible hacer nada de esto, tendremos que hacer alguna chapuza, como generar un fichero de texto con la fecha del servidor y emplear las técnicas que veremos a continuación

Para estar seguros de si disponemos de esa cabecera, podemos crear un fichero HTML que contenga el siguiente script:

<script language="Javascript"><!-- alert(document.lastModified); // --></script>

Si la ventana que nos aparece contiene una fecha, es que vamos bien. Otra manera de hacerlo es utilizar Firefox con la extensión WebDeveloper . Esta extensión muestra las cabeceras a través del menú Information > View Response Headers . Todo desarrollador que se precie debería instalarse esa extensión, no sólo por eso. Es casi la opción menos útil de todos los documentos.

El usuario deberá tener un navegador que soporte el uso del objeto XMLHttpRequest que permita llamadas de tipo HEAD. Explorer 5 y superiores, Mozilla/Firefox, y las versiones preliminares de Opera 7.6 disponen de esa característica. En los demás navegadores, simplemente no se producirá recarga alguna.

Creación del objeto XMLHttpRequest

El objeto XMLHttpRequest permite pedir páginas web y otro tipo de informaciones al servidor desde el navegador. Las posibilidades que abre su uso son tremendas y el mejor ejemplo del que disponemos a la hora de escribir este artículo es Gmail , el correo web ofrecido por Google. Esta aplicación lee al arrancar un interfaz escrito enteramente en Javascript y luego lee del servidor tan sólo los datos que necesita en cada momento. El pequeño truco que estamos estudiando es tan sólo un atisbo de su potencial.

Microsoft lo introdujo como un control ActiveX y Mozilla, consciente de su utilidad, lo copió (no existe estándar del W3C al respecto) para procurar facilitar un uso compatible entre ambos. Sin embargo, dado que excepto Internet Explorer ningún navegador apoya la tecnología ActiveX, fuente de agujeros de seguridad sin fin y anclada a la plataforma Windows, la forma de crear el objeto es distinta. En Explorer es tal que así:

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

No obstante, el nombre del objeto ActiveX ha cambiado según la versión de Explorer. De modo que tendremos que comprobar uno a uno cual de ellos es el más adecuado.

var ids = ["Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0", "Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; for(var i=0; !xmlhttp && i<ids.length; i++) { try { xmlhttp = new ActiveXObject(ids[i]); } catch(ex) { xmlhttp = false; } }

Usuarios que han visto este tema también han visto...

- Clase Date en Javascript
- Texto sirena en Javascript
- Logueando los errores nuestros usuarios con Javascript
- Detectar el final de una descarga
- El for en JavaScript

- Versión imprimible de este documento
- Enviar por e-mail este documento