Hola!
Un dia estaba en Facebook y, al cambiar de pagina, me di cuenta de que el header (la barra azul de arriba) ni siquiera parpadeaba -no recargaba-, pero la url si cambiaba, me puse a buscar, y encontré la API que trae HTML5 -window.history- para que los botones de atrás y adelante funcionen bien y que además se puedan quitar los hashtags y que parezca más real...
Y como no había ningún tutorial que lo explique bien, decidí poner uno aquí, así nos vamos introduciendo en el mundo de HTML5 y todas sus novedades.
Funciones de la API:
| pushState(data, title, url); | crea una entrada en el historial del navegador. parametros: data: información que se pasa a window.onpopstate, puede servir para pasar información como el referrer (url de la que vienes)...
title: aquí va el nuevo titulo de la página
url: la nueva url a mostrar (no se puede cambiar el host por seguridad) |
| replaceState(data, title, url); | hace lo mismo que pushState(), solo que este reemplaza los datos de la entrada actual, es decir, modifica las que se han guardado al entrar (o al usar pushState()) y no crea entradas nuevas |
Ejemplo:
<a href="/perfil?nick=Phperos" onclick="go_to(this.href, this.data);return false;" data="nick=Phperos;id=2">Ir al perfil de @Phperos</a>
<script>
function go_to(url, data){
data = data.split(';'); // separar datos
var temp = {}, add; // creamos una variable en la que guardar los datos, por ejemplo temp['nick'], y otra para uso interno del for
for(var i=0;i<data.length;i++){
add = data[i].split('=');
temp[add[0]] = add[1];
} // un for para generar variables como data['nick'] o data['id']
data = temp;
delete temp;
delete add;
history.pushState({ nick: data['nick'], id: data['id'] }, 'Perfil de ' + data['nick'], url);
}
window.onpopstate = function(data){
var nick = data.nick, id = data.id;
/* tomar valores por ajax: archivo.php?id=nick&id=id */
document.getElementById('perfil').innerHTML = respuesta_ajax;
};
</script>Así, ya podemos cambiar de perfil en perfil, cambiando la url y sin recargar la página.
Si se le echa imaginación, se puede lograr lo que hizo facebook: cambiar todas las urls sin recargar ni una sola vez la página. Con eso, ya tienes varias ventajas: puedes hacer un chat, ya que como no se recarga la página, el chat no tiene que volver a cargar y, por lo tanto, no tendrá que volver a cargar y desconectar al usuario y cargarlo de nuevo y, así perfeccionar tu script.
Espero que os sirva...
...y que IE vaya agregando todo lo que sea posible de CSS3 y HTML5, ya que con HTML5 y CSS3 se consiguen crear aplicaciones web a nivel de las de escritorio... Un ejemplo es el <input type="range" /> - crea un slider muy util para los usuarios y aún más útil para los programadores, ya que es el modo más fácil de cambiar un valor sin ni siquiera tocar el teclado.
