Cada vez vemos más sitios que hacen uso de AJAX, permitiendo una experiencia más agradable para el usuario, ya que consiguen cargas más rápidas de contenido al cargar solamente la información necesaria, manteniendo los elementos comunes entre secciones: menús, fondos, pies de página…

El fin del hash. El principio del pushState.

Uno de los inconvenientes que teníamos al realizar una actualización del contenido por AJAX, es que la URL no cambia.

Antes se podía indicar el cambio de contenido del sitio actualizando el hash de la URL (la parte de la URL que va detrás de #). Con lo que nos encontrábamos con el problema de que los buscadores no lo indexaban. Para permitir que Google indexase estas peticiones AJAX, se le indicaba añadiendo ! tras la # (http://misitio.com#!seccion), como explica aquí.

Sin embargo, con HTML5, se puede actualizar la URL sin problemas con el uso de una función de JavaScript: history.pushState(state object, title, URL)

  • state object: Es un objeto de JavaScript, que sera recogido en el evento window.onpopstate, activado cuando se usa pushState() o replaceState(), o cuando se interactua en el historial del navegador («Ir a la página anterior», «Ir a la página siguiente»…)
  • title: Asigna un titulo a la nueva URL, aunque no cambia el titulo de la página. Es meramente una descripción para el manejo del historial.
  • URL: La nueva ruta a mostrar en el documento.

Ventajas e inconvenientes

Ahora se puede mejorar la usabilidad del sitio web, y el SEO, al permitir el manejo del historial en las aplicaciones web que usan AJAX.

También queda resuelto el problema de AJAX cuando intentamos compartir una página, o añadirla a favoritos, ya que aquí disponemos de una URL para cada página.

Por otro lado, HTML5 todavía está siendo implementado en los navegadores, por lo que puede que no todos lo soporten. Podemos comprobar que navegadores permiten el uso del objeto history para manipular el historial en la siguiente página: http://caniuse.com