Modificar la Barra de Direcciones URL en la Aplicación AJAX para que Coincida con el Estado Actual

Question

Estoy escribiendo una aplicación AJAX, pero a medida que el usuario se mueve a través de la app, me gustaría que la dirección URL en la barra de direcciones para actualizar a pesar de la falta de recargar la página.Básicamente, me gustaría ser capaz de marcar en cualquier punto y así volver al estado actual.

Cómo son las personas que manipulan el mantenimiento de la Tregua en aplicaciones AJAX?

Answer 1

La manera de hacer esto es manipular location.hash cuando AJAX actualizaciones resultado en un cambio de estado que le gustaría tener un discreto URL.Por ejemplo, si la dirección url de la página es:

http://example.com/

Si un cliente de lado la función ejecuta este código:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

Entonces, la URL que se muestra en el navegador se actualizará para:

http://example.com/#foo

Esto permite a los usuarios marcar la "foo" estado de la página, y utilizar el historial del navegador para navegar entre los estados.

Con este mecanismo en su lugar, a continuación, tendrás que analizar los hash parte de la dirección URL en el lado del cliente usando JavaScript para crear y exhibir el estado inicial, como identificadores de fragmento (la parte después de la #) no se envían al servidor.

Ben Alman del hashchange plugin hace que el último de una brisa si estás usando jQuery.

Answer 2

Buscar en sitios como book.cakephp.org.Este sitio cambia la dirección URL sin usar el hash y el uso de AJAX.No estoy seguro de cómo se hace exactamente, pero he estado tratando de averiguar.Si alguien sabe, que me haga saber.

También github.com cuando se mira en un navegando dentro de un determinado proyecto.

Answer 3

Es poco probable que el escritor quiere volver a cargar o redirigir a sus visitantes cuando el uso de Ajax.Pero, ¿por qué no utilizar HTML5 del pushState/replaceState?

Usted será capaz de modificar el addressbar tanto como te gusta. Conseguir un aspecto natural url, con el AJAX.

Compruebe el código en mi último proyecto:http://iesus.se/

Answer 4

Esto es similar a lo que Kevin dijo.Usted puede tener su estado de cliente como javascript objeto, y cuando se desea guardar el estado, serializar el objeto (el uso de JSON y codificación de base64).A continuación, puede establecer el fragmento de el href de 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 en la que se tratará el nuevo estado como una nueva ubicación (por lo que el botón atrás les llevará a la ubicación anterior).El último no.

Answer 5

SWFAddress obras en Flash y Javascript proyectos y permite crear marcable Url (usando el hash método mencionado anteriormente), así como dándole la espalda-soporte del botón.

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

Answer 6

La ventana.ubicación.hash método es la manera preferida de hacer las cosas.Para una explicación de cómo hacerlo, Ajax Patrones De Url Únicas.

YUI tiene una implementación de este patrón como un módulo, que incluye IE específicos de ninguna manera de evitar contraer el botón volver a trabajar junto con el re-escritura de la dirección utilizando el hash. YUI Historial del Navegador Administrador.

Otros frameworks similares implementaciones.El punto importante es que si quieres la historia a trabajar junto con la re-escritura de la dirección, de los distintos navegadores necesitan diferentes maneras de manejarlo.(Esto se detalla en el primer enlace del artículo.)

Es decir las necesidades de un iframe basado hack, que Firefox va a producir el doble de la historia con el mismo método.

Answer 7

Si po o de otros todavía están buscando una manera de hacer modificar el historial del navegador para permitir que el estado, mediante pushState y replaceState, como sugiere IESUS, es la manera "correcta" de hacerlo ahora.Su principal ventaja sobre la ubicación.hash parece ser que crea las direcciones url, no sólo hashes.Si el historial del navegador el uso de hashes se guarda y, a continuación, revisitado con javascript desactivado, la aplicación no funciona, ya que el hash no se envían al servidor.Sin embargo, si pushState se ha utilizado la totalidad de la ruta será enviado al servidor, el cual se puede construir para responder apropiadamente a las rutas.Vi un ejemplo en el que el mismo bigote plantillas se utilizan en el servidor y el cliente.Si el cliente ha activado el javascript, iba a recibir más respuestas, evitando la ida y vuelta al servidor, pero la aplicación funciona perfectamente bien sin el javascript.Por lo tanto, la aplicación puede adaptan adecuadamente en la ausencia de javascript.

También, creo que hay algunos marco de ahí, con un nombre como history.js.Para los navegadores que soportan HTML5, utiliza pushState, pero si el navegador no soporta que, automáticamente vuelve a caer en el uso de hashes.

Answer 8

Comprobar si el usuario es 'en' la página, al hacer clic en la barra de url, javascript dice que usted está fuera de la página.Si cambia la barra de direcciones y presiona "ENTER" con el símbolo '#' dentro de ella, a continuación, ir a la página de nuevo, sin hacer clic en la página de forma manual con el cursor del ratón, a continuación, un keyboad comando de evento (documento.onkeypress) de javascript será capaz de comprobar si es entrar y active el javascript de la redirección.Usted puede comprobar si el usuario está EN la página de la ventana.onfocus y comprobar si está fuera de la ventana.onblur.

Sí, es posible.

;)