Contenido

Evitemos los cacheos en las peticiones Ajax

8 feb

+ 9

No sé si os habeis fijado que en la mayoría de sitios que usan Ajax en sus peticiones lo acompañan de un parametro aleatório con el fin de evitar que se cacheen las llamadas.

Internet Explorer es muy famoso por cachear el contenido de páginas web volviendo locos a los desarrolladores web intentando corregir problemas con el botón back, o con ficheros Javascript que parece que se cargan cuando y como quieren.

Por ello hemos de ser nosotros los que jugemos con ventaja adaptando nuestros scripts para evitar estos problemas. Una solución es usar un contador aleatorio (random) que pasado como parametro hace que el navegador interprete una llamada nueva.

Una buena forma de conseguir un valor aleatorio o diferente en cada petición es usar el objeto Date() para conseguir el timestamp, osea el tiempo en segundos, de esta forma nos aseguramos que al menos, cada segundo será diferente.


var date = new Date();
var timestamp = date.getTime();
createXMLHttpRequest();
//var timestamp = Math.random() // Aleatorio por Math()


xmlHttp.onreadystatechange = handleMessages;
xmlHttp.open("GET","script.php?time="+timestamp,true);
xmlHttp.send(null);

Para curarnos en salud, añadiremos unas cabeceras a los scripts del servidor en las que dejemos más que claro que estamos indicando que esta página no debe cachearse nunca. En PHP usamos la función header() para conseguirlo.


header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header( "Last-Modified: " . gmdate( “D, d M Y H:i:s" ) . " GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );
  • La primera parte de la solución la considero excesiva, mientras que la segunda es la adecuada.

    Aunque comprendo que haya casos escepcionales en las que el navegador se salte a la torera los headers y tengamos que recurrir a la primera. Da tela de coraje.

    Un saludo.

  • Perdon que moleste con otra cosa pero alguien me puede pasar el plugin WP-ContactForm en español ya que no lo encuentro por ningun aldo y la pagina que dio Nieto no funciona!!

    Muchas gracias

  • En mi ajax function yo uso este metodo anticache también:

    
        function antiCacheRand(aurl){
            var dt = new Date();
            if(aurl.indexOf("?")>=0){// já tem parametros
                return aurl + "&" + encodeURI(Math.random() + "_" + dt.getTime());
            }else{ return aurl + "?" + encodeURI(Math.random() + "_" + dt.getTime());}
        }
    
    
  • [Me parece muy bien cada aporte que se da tu pagina me sirve para instruirme mucho con las nuevas cosillas que salen y los minitutoriales fanstasticos]

    Vamos al tema pues me imagina que aun usando el framework Mootools 1.0 se tendra que añadir tambien lo de el valor aleatoria o es que dentro del script de Ajax de Mootools ya viene incluido ese valor aleatorio ??

    Gracias…

  • #2 Nicolas, aki tienes
    http://quintadimension.net/blog/wpcontactform/

    #3 Yo con MooTools lo uso así.

    
    var url = file+'?rand='+$random(0,5000);
    
    

    Siendo file la URL del sitio.

  • Hola Anieto, una solicitud, no tiene que ver con esta entrada. Hoy he estado intentando cargar la página que dabas como ejemplo para el tutorial para hacer un tema de wordpress. El problema es que el enlace debe de estar roto porque cuando hago click sobre él, me devuelve a la página principal del foro. ¿Podrías subir de nuevo el ejemplo por favor? Ya se que das el código, pero no se porque narices cuando pongo los códigos y enlazando la hoja de estilos con la página no se aplican los estilos.

    Un saludo y enhorabuena por tu blog.

  • Hola.

    Yo estoy teniendo problemas con esto. Los META TAG’s se los salta a la torera. Me parece muy buena solución, pero. ¿ Qué ocurre si el usuario da al botón del historico hacia atras ? En este caso directamente no realizará la llamada.
    ¿ Me equivoco ?

    Gracias.

  • #7 Esto es uno de los problemas que arrastramos los que usamos Ajax asiduamente.

    Hay herramientas para solucionar parcialmente el problema, pero lamentablemente la caché del navegador es dificl de borrar.

    Saludos

  • Yo utilizo Opera y apenas estoy realizando una aplicación… mi pregunta es:

    ¿Tienes una solución para que no se guarde la cache en Opera 9.5? Los headers de php funcionan correctamente en IE7 y FireFox 3, pero no con Opera 9.5.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.