Modifique la URL de la barra de direcciones en la aplicación AJAX para que coincida con el estado actual

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 recarga de la página. Básicamente, me gustaría que puedan marcar en cualquier momento y, por lo tanto, volver al estado actual.

¿Cómo manejan las personas el mantenimiento de RESTfulness en las aplicaciones AJAX?

La forma de hacerlo es manipular location.hashcuando las actualizaciones de AJAX provocan un cambio de estado en el que le gustaría tener una URL discreta. Por ejemplo, si la URL de tu página es:

http://example.com/

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:

http://example.com/#foo

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, deberá analizar la parte 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 después del #) no se envían al servidor.

El complemento de cambio de hash de Ben Alman hace que este último sea muy fácil si está utilizando jQuery.

Mire sitios como book.cakephp.org. Este sitio cambia la URL sin usar el hash y usa AJAX. No estoy seguro de cómo lo hace exactamente, pero he estado tratando de resolverlo. Si alguien lo sabe, hágamelo saber.

También github.com al mirar una navegación dentro de un determinado proyecto.

Es poco probable que el escritor quiera recargar o redirigir a su visitante cuando usa Ajax. Pero, ¿por qué no usar HTML5 pushState/ replaceState?

Podrás modificar la barra de direcciones tanto como quieras. Obtenga urls de aspecto natural, con AJAX.

Mira el código de mi último proyecto: http://iesus.se/

Esto es similar a lo que dijo Kevin. Puede tener el estado de su cliente como un objeto javascript, y cuando desea guardar el estado, serializa el objeto (usando codificación JSON y base64). Luego puede establecer el fragmento de 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 los llevará a la ubicación anterior). Este último no.

SWFAddress funciona en proyectos Flash y Javascript y le permite crear URLs marcables (usando el método hash mencionado anteriormente), además de brindarle soporte para los botones de retroceso.

http://www.asual.com/swfaddress/

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 alternativas específicas de IE para que el botón Atrás funcione junto con reescribir la dirección utilizando el hash. Administrador de historial del navegador YUI .

Otros marcos también tienen implementaciones similares. 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 manejarla. (Esto se detalla en el primer artículo del enlace).

IE necesita un hack basado en iframe, donde Firefox producirá doble historial usando el mismo método.

Si OP u otros aún están buscando una forma de modificar el historial del navegador para habilitar el estado, usar pushState y replaceState, como lo sugiere IESUS, es la forma 'correcta' de hacerlo ahora. Su principal ventaja sobre location.hash parece ser que crea URL reales, no solo hashes. Si se guarda el historial del navegador con hashes y luego se vuelve a visitar con JavaScript deshabilitado, la aplicación no funcionará, ya que los hash no se envían al servidor. Sin embargo, si se ha utilizado pushState, la ruta completa se enviará al servidor, que luego puede construir para responder adecuadamente a las rutas. Vi un ejemplo en el que se usaban las mismas plantillas de bigote tanto en el servidor como en el lado del cliente. Si el cliente tuviera habilitado JavaScript, obtendría respuestas rápidas al evitar el viaje de ida y vuelta al servidor, pero la aplicación funcionaría perfectamente bien sin el Javascript. Por lo tanto, la aplicación puede degradarse con gracia en ausencia de JavaScript.

Además, creo que hay un marco por ahí, con un nombre como history.js. Para los navegadores que admiten HTML5, usa pushState, pero si el navegador no lo admite, automáticamente recurre al uso de hashes.

Compruebe si el usuario está 'en' la página, cuando hace clic en la barra de direcciones, javascript dice que está fuera de la página. Si cambia la barra de url y presiona 'ENTER' con el símbolo '#' dentro de ella, ingresa nuevamente a la página, sin hacer clic en la página manualmente con el cursor del mouse, luego aparecerá un comando de evento keyboad (document.onkeypress) de javascript poder verificar si es enter y activar el javascript para la redirección. Puede verificar si el usuario está EN la página con window.onfocus y verificar si está fuera con window.onblur.

Sí, es posible

;)