Seguramente han visto en Facebook que se carga contenido AJAX y al hacerlo se agrega una ruta en el browser(navegador) de tal forma que si apretamos el botón atrás se carga el contenido anterior a la llamada AJAX, pues existe una solución muy simple para hacer esto mismo usando Jquery allí es donde estra a jugar sammy.js
Lo primero es invocar a jquery y a sammy, algo como:
[cc lang=»html»]
[/cc]
Luego en el body vamos a insertar un pequeño menu y el contenedor que nos va a servir para el ejemplo:
[cc lang=»html»]
[/cc]
Antes de complicar las cosas veamos como luce la versión más simple:
[cc lang=»javascript»]
var ratPack = $.sammy(function() {
this.element_selector = ‘#content’;
// todas nuestras rutas irían aquí
});
[/cc]
En nuestro menu hay 3 rutas: #/inicio, #/formulario, #/label/drafts
Eso significa que por cada ruta debemos insertar un código similar a este:
[cc lang=»javascript»]
this.get(‘#/inicio’, function(context) {
context.app.swap(»);
context.$element().append(‘
inbox
‘);
});
[/cc]
Lo único que hago allí es que al ingresar la ruta misitio.com#/inicio se va cargar en el div content un titulo H1
Pueden ver un ejemplo más complicado incluyendo envío de formularios AQUI
Para el envío de formularios usando el método POST el código sería algo así:
[cc lang=»javascript»]
this.post(‘#/formulario’, function(context) {
context.app.swap(»);
var to = this.params[‘to’];
context.$element().append(‘
hola ‘ + to + ‘
‘);
});
[/cc]
Igualmente para los que hablan inglés pueden ver el tutorial que tomé como modelo AQUI