Estoy escribiendo una aplicación AJAX, pero a medida que el usuario se mueve a través de la aplicación, me gustaría que la URL en la barra de direcciones se actualice a pesar de la falta de recargas de página. Básicamente, me gustaría que puedan marcar en cualquier momento y así volver al estado actual.
¿Cómo manejan las personas el mantenimiento de la RESTfulness en las aplicaciones AJAX?
Esto es similar a lo que dijo Kevin. Puede hacer que su estado de cliente sea como un objeto JavaScript, y cuando quiera guardar el estado, serialice el objeto (usando la codificación JSON y base64). Luego puedes establecer el fragmento del href en esta cadena.
var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;
document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history
La primera forma tratará el nuevo estado como una nueva ubicación (por lo que el botón Atrás lo llevará a la ubicación anterior). Este último no.
La forma de hacerlo es manipular location.hashcuando las actualizaciones de AJAX den como resultado un cambio de estado en el que desearía tener una URL discreta. Por ejemplo, si la URL de su página es:
Si una función del lado del cliente ejecutó este código:
// AJAX code to display the "foo" state goes here.
location.hash = 'foo';
Luego, la URL que se muestra en el navegador se actualizará a:
Esto permite a los usuarios marcar el estado "foo" de la página y usar el historial del navegador para navegar entre estados.
Con este mecanismo en su lugar, necesitará analizar la porción hash de la URL en el lado del cliente usando JavaScript para crear y mostrar el estado inicial apropiado, ya que los identificadores de fragmentos (la parte posterior al #) no se envían a la servidor.
El plugin hashchange de Ben Alman hace que este último sea muy fácil si estás usando jQuery.
SWFAddress funciona en proyectos de Flash y Javascript y le permite crear URLs que marcan favoritos (usando el método de hash mencionado anteriormente), además de brindarle soporte para los botones de retroceso.
El método window.location.hash es la forma preferida de hacer las cosas. Para obtener una explicación de cómo hacerlo, Patrones de Ajax: URL únicas .
YUI tiene una implementación de este patrón como un módulo, que incluye soluciones de trabajo específicas de IE para que funcione el botón Atrás junto con la reescritura de la dirección usando el hash. YUI Browser History Manager .
Otros marcos tienen implementaciones similares también. El punto importante es que si desea que el historial funcione junto con la reescritura de la dirección, los diferentes navegadores necesitan diferentes formas de manejarlo. (Esto se detalla en el primer artículo del enlace).
IE necesita un hack basado en iframe, donde Firefox producirá doble historial utilizando el mismo método.
Compruebe si el usuario es 'en' la página, al hacer clic en la barra de URL, javascript dice que está fuera de la página. Si cambia la barra de URL y pulse 'ENTER' con el símbolo '#' dentro de ella, entonces ir a la página de nuevo, sin que haga clic en la página de forma manual con el cursor del ratón, a continuación, un comando evento keyboad (document.onkeypress) a partir de JavaScript ser capaz de verificar si se introduce y activa el Javascript para la redirección. Puede comprobar si el usuario se encuentra en la página con los window.onfocus y comprobar si está fuera con window.onblur.
Sí, es posible.
;)
Mira sitios como book.cakephp.org. Este sitio cambia la URL sin usar el hash y el uso de AJAX. No estoy seguro de cómo lo hace exactamente, pero he estado tratando de averiguarlo. Si alguien sabe, que me haga saber.
También GitHub.com al mirar una navegación dentro de un determinado proyecto.
Es poco probable que el escritor quiere volver a cargar o redirigir su visitante cuando se utiliza Ajax. Pero por qué no utilizar HTML5 pushState/ replaceState?
Podrás modificar el addressbar tanto como te gusta. Obtener direcciones URL de aspecto natural, con AJAX.
Mira el código en mi último proyecto: http://iesus.se/
Si OP o que otros todavía están buscando una manera de hacerlo modifique el historial del navegador para permitir estado, utilizando pushState y replaceState, según lo sugerido por IESUS, es la manera 'correcta' de hacerlo ahora. Su principal ventaja sobre location.hash parece ser que crea URLs reales, no sólo hashes. Si el historial del navegador usando hashes se guarda, y luego volvió a visitar sin Java, la aplicación no funcionará, ya que los valores hash no se envían al servidor. Sin embargo, si pushState se ha utilizado, toda la ruta se envía al servidor, que luego se puede construir para responder adecuadamente a las rutas. Vi un ejemplo donde se utilizaron las mismas plantillas bigote en el servidor y en el lado del cliente. Si el cliente había permitido Javascript, que obtendría respuestas ágil, evitando la ida y vuelta al servidor, pero la aplicación funcionaría perfectamente bien sin el javascript. Por lo tanto, la aplicación puede funcionar fácilmente a en ausencia de JavaScript.
Además, creo que hay algún tipo de marco por ahí, con un nombre como history.js. Para los navegadores que soportan HTML5, utiliza pushState, pero si el navegador no soporta que, cae automáticamente volver a utilizar los hashes.