Cuando realizamos una aplicación con Ajax algo que sucederá es que las acciones de un usuario no se salvaran cuando recargue la pagina o cuando salve un bookmark, para lograr esto necesitamos modificar la URL agregando información con un hashtag(#).
Esto sucede en aplicaciones como Google Reader, The 61 one, Twitter, GrooveShark y muchos otros sitios. Leer la información de esta manera se realiza con el objeto Location que es un elemento que se deriva de el objeto window.
Este objeto tiene varios métodos que nos permitirán realizar esto.
- location.href nos regresara la url completa para que la podamos utilizar. Aunque es útil tener toda la URL, no es suficientemente especifico y existen métodos para recabar la información de manera específica.
- location.protocol nos permitirá saber en que protocolo esta la url, con lo cual podremos checar si es http o https, entre otras cosas.
- location.host nos regresara el dominio en el cual nos entramos.
- location.pathname nos regresa el path dentro del sitio
- location.search nos regresa el get del URL
- location.hash nos regresa la información desde pues del hashtag en el URL
De esta manera podemos recibir la información de la manera que necesitemos. Lo siguiente que haremos es definir un baseURL de donde se encuentra nuestra aplicación, debido a que tal vez no este en el root de un servidor.
<script type="text/javascript">
baseUrl= '<?php echo $baseUrl;?>
</script>En mi caso la estoy pasando de la información que define php, pero se puede hardcodear o se puede sacar de cualquier server-side que tengamos.
Después procesaremos y un poco la información que estamos recibiendo, para tener un url(protocolo, host y path), un path(baseUrl – url), get y hash por separado.
url = location.protocol + "//" + location.host + location.pathname; path = url.replace(baseUrl, ''); get = location.search; hash = location.hash.replace('#','');
De esta manera al empezar la aplicación podemos decir si existe un hashtag y hacer el ajax request a otro lado, mostrando la información que el usuario tenía en la pantalla la última vez que entro a la página.
if(hash){ $.ajax({ type: 'GET', url: baseUrl + hash, data: get, success: function(answer){eval(answer);} }); }
Lo único que falta es cambiar las urls para que agreguen el # al darle click, lo cual tratare en el post de mañana en un ejemplo funcionando.
De esta manera logramos mantener la información del usuario y hacer su experiencia mucho mejor de lo que podría ser sin Ajax o con un Ajax que no permita refrescar la pagina.
Related posts: