GRACIAS CIERREN TEMA O DEJNLO NECESITO AYUDA PARA TERMINAR UN CODIGO EL EFECTO DE CAMBIO DE URL SE HACE MEDIANTE HASHES QUISIERA SABER COMO LOGRAR ESTE EFECTO AYUDA PARA EL CODIGO HTML DEL DIV
Páginas como Gmail, Facebook o Tuenti usan el modelo ‘hash’ en las URL. Por ejemplo, la siguiente URL:
Lleva a una búsqueda en Tuenti. Sin embargo, el contenido después de # en la URL no se envía al servidor, puesto que se trata de un ‘hash’ de URL. Este contenido sí que es accesible mediante JavaScript, usando la variable window.location.hash.
Tiene dos grandes ventajas al usarlo junto con AJAX: por una parte, funciona el botón de retroceso (“atrás”) aunque la aplicación esté basada en AJAX (esto depende la implementación, claro). Por otra parte, se puede ‘compartir’ el enlace, de tal forma que aunque sea una consulta inicialmente lanzada por AJAX, se pueda reproducir al entrar en el mismo enlace (con el mismo hash).
He programado un pequeño ejemplo,
disponible aquí. Es muy sencillo, aunque todo está bien explicado en el propio código (sólo que en inglés). El archivo de funciones JavaScript (igual de importante que el la serie de capas que contiene la página)
está aquí.
El principio “simplificado es el siguiente”:
- El usuario accede a la página
- Se incluye la función ‘launch()’ mediante jQuery a los eventos a ejecutar una vez se haya cargado el DOM
- Esta función simplemente ‘lanza’ la carga de la primera página, según tenga o no hash.
- La función ‘load_page()’ se ejecuta y carga el contenido. Al mismo tiempo crea un ‘timeout’ con la función ‘verify_hash()’, que ‘vigila’ el hash para detectar cambios.
- La función ‘verify_hash()’ crea a su vez otro timeout que llama a la misma función. En caso de que el hash haya cambiado, lanza ‘load_page()’, de la misma forma que hace ‘launch()’.
El ejemplo dado también incluye un timer de ‘timeout’ (en caso de que se ‘cuelgue’ la petición AJAX), una serie de capas de ‘Loading’ y comprueba que el usuario tenga JavaScript activado (en el caso contrario, sólo ve un mensaje alertando de la necesidad de tener JavaScript activado, sin dejar trazas de la aplicación).
Si se carga el hash #m=1&abc=2, la consulta AJAX (siempre GET) será a ./pageloader?m=1&abc=2, incluyendo siempre como GET el contenido del hash. De la misma forma, se pueden incluir enlaces con hashes (se lanza la consulta AJAX al clickearlos) y el botón de retroceso funciona sin problemas.
Intenté poner una función que lanzase automáticamente el cambio de página sin esperar al intervalo de comprobación (al hacer click en un enlace), sin embargo generaba conflictos con los timers. De cualquier manera, la diferencia de tiempo entre el click y la petición AJAX no es muy grande.
El
ejemplo aquí y
el script aquí. No olvidarse de mirar los comentarios del código