Ajax + botones de atrás y adelante

Question

estoy empezando a escribir nueva aplicación y quiere que sea el estilo ajax completa :)

estoy usando jQuery para hacer peticiones ajax. El archivo JS principal obtiene alguna variable del enlace presionado y de acuerdo con ese enlace va a algunos archivos php. Captura algunos datos y los coloca en etiquetas html preparadas previamente.

Esta es la forma en que veo esta aplicación.

Ahora he encontrado algunas soluciones para hacer que los botones & adelante empiecen a funcionar, pero en esas soluciones su script va a páginas predefinidas y lee algunos datos de acuerdo con alguna identificación constante. Así que no me gusta.

Lo que quiero es ...

1. necesito algo de código que evitará navegador desde la página de recarga si el usuario está presionando hacia atrás, botón de avance
2. Recordar la posición del navegador, por lo que si estamos en estado " Se presionó C 'y atrás, esto le da a JS una variable con el valor' B ', luego JS va a php y dice' B 'para que php comprenda qué contenido preparar. devuelve el contenido a JS, JS actualiza la página, todos contentos.

¿Hay alguna solución que funcione de esta manera?

Answer 1

He usado jQuery BBQ: Back Button & Query Library en el pasado solo para este propósito.

Específicamente, el ejemplo basic AJAX parece ser lo que buscas. El resto de examples también son excelentes.

Answer 2

Creo que debería echar un vistazo a backbone.js http://documentcloud.github.com/backbone/. Tiene una estructura de aplicación basada en enrutador, donde cada ruta es en realidad una URL diferente/# 'ed.

Si tiene una lista de artículos, puede mostrarla en la ruta/# ítems, y la página de detalles de cada artículo podría estar en/# elementos/ID. Toda la navegación se maneja por usted, todo lo que tiene que hacer es llamar a algunas funciones o pegar el código que desea que se ejecute cuando llegue a esa url. (Ejemplo adaptado http://documentcloud.github.com/backbone/#Router)

var Workspace = Backbone.Router.extend({ 

    routes: { 
    "help":     "help", // #help 
    "item/:id":  "item", // #item/myItemId 
    "itemList": "list" // #itemList 
    }, 

    help: function() { 
    ... show help 
    }, 

    item: function(id) { 
    ... show single item with jQuery, Ajax, jQuery UI etc 
    }, 

    itemList: function(){ 
    ... show item list with jQuery, jQuery UI etc. 
    } 

}); 

www.myapp.com/#help -> código ayuda

www.myapp.com/#item/32 -> artículo con ID 32, que es capturado en el función del elemento (id) y se realiza una solicitud para recuperar los datos a través de Ajax

www.myapp.com/#itemList -> la lista de todos los artículos, donde puede generar enlaces con # elemento/id para cada elemento.