¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

La caché en las peticiones AJAX de jQuery

Ahhh… cache. Odiada y amada a partes iguales. Sin duda una de las dudas que más he visto con el tema de las peticiones Ajax desde siempre, es sobre cómo evitar la caché a la hora de recibir datos de una petición AJAX.

No he visto nunca gente que quiera forzar la caché pero yo, cuando estuve en el desarrollo inicial de BuSeViCi (parezco el abuelo batallitas siempre…) quise que la caché tuviera un papel muy importante ya que si la aplicación comenzaba a tener muchas peticiones, podría llegar a ser contraproducente en el servidor.

Hoy vamos a ver cómo evitar la caché en jQuery y cómo asegurarnos de que las peticiones sean cacheadas, tanto las normales como las cross-domain con JSONP. Para un próximo artículo dejo el lado del servidor con PHP.

Colega, ¿quién ha cacheado mi petición?

Para solicitar datos a nuestro servidor o a alguna parte de nuestra aplicación, lo más seguro es que hagamos uso de alguna de estas dos funciones:

$.getJSON('/ruta/hacia/mi/archivo/archivo.json', function(data) {
  // Hagamos algo maravilloso con estos nuevos datos 
});
$.ajax({
  url: '/ruta/hacia/mi/archivo/archivo.json',
  dataType: 'json',
  data: data success: function(data) {
    // Hagamos algo maravilloso con estos nuevos datos 
  }
});

El navegador cargará la información y ejecutará la función para hacer algo con ello.

Sin embargo, no todos los navegadores reaccionan de la misma forma a estas peticiones. Si volvemos a ejecutar la misma función en la página, sin recargar la página, los siguientes navegadores no pedirán más información al servidor, ni lo harán en próximas peticiones de la página:

Por otro lado, los siguientes navegadores realizarán la petición completa cada vez, ya sea solicitada por segunda vez en la misma página o en otra carga de página más tarde:

Y por último, pero no menos importante, Chrome realizará la petición de nuevo si la solicitud ocurre nuevamente en la misma página, pero tirará de caché cuando se le solicite en otras páginas o al recargar la página.

¿Cómo me aseguro de que mi petición no quede en la cache?

Si necesitas asegurarte de que la petición sea cargada de nuevo cada vez que sea necesario sin que quede en la cache, tenemos dos formas. O facilitar una URL única cada vez, o usar $.ajax con la propiedad cache en false.

Para usar $.getJSON y evitar la cache de ajax, tenemos que añadir un valor único a la consulta usando el objeto Date() de JavaScript, como se muestra a continuación. Cada vez que se ejecute la función, la URL será diferente:

$.getJSON('/ruta/hacia/mi/archivo/archivo.json?' + new Date().getTime(), function(data) {
  // Hagamos algo maravilloso con estos nuevos datos 
});

Si nos decantamos por $.ajax, hazlo de esta forma:

$.ajax({
  url: '/ruta/hacia/mi/archivo/archivo.json',
  dataType: 'json',
  data: data,
  cache: false,
  success: function(data) {
    // Hagamos algo maravilloso con estos nuevos datos 
  }
});

Si lo que quieres es desactivar la caché para todas las peticiones AJAX, en todas las cargas de tu página por defecto, asegúrate de incluir esto al inicio de tu página, después de que jQuery haya cargado:

$.ajaxSetup({ cache:false });

Ten en cuenta que esto afecta a todas las peticiones AJAX, uses la función que uses (incluso $.getJSON), hasta que no se indique lo contrario.

JSONP es harina de otro costal. Las peticiones AJAX cross-domain usan un identificador único directamente por lo que el navegador, directamente, no usa la caché en estos casos.

¿Cómo me aseguro de que mi petición quede en la caché?

La manera más fácil es hacerlo en el lado del servidor. En un próximo artículo veremos cómo hacerlo con mod_expire de Apache y también con PHP.

No obstante, si que diré que para forzar la caché con JSONP, tendremos que hacerlo de la siguiente forma:

$.ajax({
  url: 'http://otroservidor:8080/obtenerDatosImportantes',
  dataType: 'jsonp',
  cache: true,
  jsonpCallback: 'badabadum',
  data: data,
  success: function(data) {
    // Hagamos algo maravilloso con estos nuevos datos 
  }
});

En vez de badabadum, podéis poner lo que queráis, pero al convertirse en algo fijo, la petición pasará a ser cacheada.

Más adelante planeo ir incluso más allá con la caché, y mostraros cómo hacer que una página pueda verse sin conexión a internet (tras una primera carga claro), aprovechándonos de las bondades de HTML5 con ApplicationCache.

La caché es algo que, bien usado, puede darnos grandes beneficios. Una consulta que puede tardar a lo mejor unos 50 ms, pasa a tardar 0 porque el navegador ya lo tiene almacenado en la cache. Quizá penséis que 50 ms no son nada, pero si sumamos todos eso milisegundos que nos ahorramos, o pasamos a un entorno más exigente como es el desarrollo para móviles, pronto descubriremos que la cache es una gran aliada.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!