Modifica l'URL della barra degli indirizzi nell'app AJAX in modo che corrisponda allo stato corrente

Sto scrivendo un'app AJAX, ma mentre l'utente si sposta attraverso l'app, vorrei che l'URL nella barra degli indirizzi si aggiornasse nonostante la mancanza di ricariche di pagina. Fondamentalmente, vorrei che potessero aggiungere un segnalibro in qualsiasi momento e quindi tornare allo stato attuale.

In che modo le persone gestiscono il mantenimento della RESTfulness nelle app AJAX?

Il modo per farlo è manipolare location.hashquando gli aggiornamenti AJAX comportano una modifica dello stato che desideri avere un URL discreto. Ad esempio, se l'URL della tua pagina è:

http://example.com/

Se una funzione lato client ha eseguito questo codice:

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

location.hash = 'foo';

Quindi, l'URL visualizzato nel browser verrà aggiornato in:

http://example.com/#foo

Ciò consente agli utenti di contrassegnare lo stato "pippo" della pagina e utilizzare la cronologia del browser per navigare tra gli stati.

Con questo meccanismo in atto, dovrai quindi analizzare la parte hash dell'URL sul lato client utilizzando JavaScript per creare e visualizzare lo stato iniziale appropriato, poiché gli identificatori di frammento (la parte dopo il #) non vengono inviati al server.

Il plug-in di hashchange di Ben Alman rende quest'ultimo un gioco da ragazzi se stai usando jQuery.

Guarda siti come book.cakephp.org. Questo sito modifica l'URL senza utilizzare l'hash e utilizzare AJAX. Non sono sicuro di come lo faccia esattamente, ma ho cercato di capirlo. Se qualcuno lo sa, fammelo sapere.

Inoltre github.com durante la navigazione all'interno di un determinato progetto.

È improbabile che lo scrittore voglia ricaricare o reindirizzare il suo visitatore quando utilizza Ajax. Ma perché non usare HTML5 pushState/ replaceState?

Sarai in grado di modificare la barra degli indirizzi quanto vuoi. Ottieni URL dall'aspetto naturale, con AJAX.

Dai un'occhiata al codice sul mio ultimo progetto: http://iesus.se/

Questo è simile a quello che ha detto Kevin. Puoi avere il tuo stato client come qualche oggetto javascript e quando vuoi salvare lo stato, serializzi l'oggetto (usando la codifica JSON e base64). È quindi possibile impostare il frammento di href su questa stringa.

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

Il primo modo tratterà il nuovo stato come una nuova posizione (quindi il pulsante Indietro li porterà alla posizione precedente). Quest'ultimo no.

SWFAddress funziona nei progetti Flash e Javascript e ti consente di creare URL con segnalibri (usando il metodo hash sopra menzionato) oltre a offrirti il ​​supporto per il pulsante Indietro.

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

Il metodo window.location.hash è il modo preferito di fare le cose. Per una spiegazione su come farlo, Ajax Patterns - URL univoci .

YUI ha un'implementazione di questo modello come modulo, che include soluzioni specifiche di IE per far funzionare il pulsante Indietro e riscrivere l'indirizzo usando l'hash. YUI Browser History Manager .

Anche altri framework hanno implementazioni simili. Il punto importante è che se vuoi che la cronologia funzioni insieme alla riscrittura dell'indirizzo, i diversi browser hanno bisogno di modi diversi di gestirla. (Questo è dettagliato nel primo articolo di collegamento.)

IE ha bisogno di un hack basato su iframe, in cui Firefox produrrà una doppia cronologia usando lo stesso metodo.

Se OP o altri stanno ancora cercando un modo per modificare la cronologia del browser per abilitare lo stato, usare pushState e replaceState, come suggerito da IESUS, è il modo "giusto" per farlo ora. Il vantaggio principale rispetto a location.hash sembra essere che crea URL reali, non solo hash. Se la cronologia del browser che utilizza gli hash viene salvata e quindi rivisitata con javascript disabilitato, l'app non funzionerà, poiché gli hash non vengono inviati al server. Tuttavia, se è stato utilizzato pushState, l'intero percorso verrà inviato al server, che sarà quindi possibile creare per rispondere in modo appropriato ai percorsi. Ho visto un esempio in cui sono stati utilizzati gli stessi modelli di baffi sia sul lato server che sul lato client. Se il client avesse javascript abilitato, otterrebbe risposte rapide evitando il roundtrip al server, ma l'app funzionerebbe perfettamente senza il javascript. Pertanto, l'app può degradarsi con grazia in assenza di JavaScript.

Inoltre, credo che ci sia qualche framework là fuori, con un nome come history.js. Per i browser che supportano HTML5, utilizza pushState, ma se il browser non lo supporta, ricorre automaticamente all'utilizzo degli hash.

Controlla se l'utente è "nella" pagina, quando fai clic sulla barra dell'URL, JavaScript indica che sei fuori pagina. Se cambi la barra dell'URL e premi 'INVIO' con il simbolo '#' al suo interno, vai di nuovo nella pagina, senza fare clic sulla pagina manualmente con il cursore del mouse, quindi un comando di evento keyboad (document.onkeypress) da JavaScript essere in grado di verificare se è inserito e attivo il javascript per il reindirizzamento. Puoi verificare se l'utente è nella pagina con window.onfocus e verificare se è fuori con window.onblur.

Sì, è possibile.

;)