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

Question

Sto scrivendo un'app AJAX, ma mentre l'utente si sposta nell'app, vorrei che l'URL nella barra degli indirizzi si aggiornasse nonostante la mancanza di ricaricamenti della 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 del RESTfulness nelle app AJAX?

Answer 1

Il modo per farlo è manipolare location.hash quando gli aggiornamenti AJAX comportano un cambiamento di stato, desideri avere un URL discreto.Ad esempio, se l'URL della tua pagina è:

http://esempio.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://esempio.com/#foo

Ciò consente agli utenti di aggiungere ai segnalibri lo stato "foo" della pagina e utilizzare la cronologia del browser per navigare tra gli stati.

Con questo meccanismo in atto, dovrai quindi analizzare la porzione 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 plugin hashchange di Ben Alman rende quest'ultimo un gioco da ragazzi se usi jQuery.

Answer 2

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

Anche github.com quando si guarda la navigazione all'interno di un determinato progetto.

Answer 3

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

Potrai modificare la barra degli indirizzi quanto vuoi. Ottieni URL dall'aspetto naturale, con AJAX.

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

Answer 4

Questo è simile a quello che ha detto Kevin.Puoi avere lo stato del tuo client come un oggetto javascript e quando vuoi salvare lo stato, serializza 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.

Answer 5

SWFAddress funziona in progetti Flash e Javascript e ti consente di creare URL contrassegnabili (utilizzando il metodo hash menzionato sopra) oltre a fornire supporto per il pulsante Indietro.

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

Answer 6

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

YUI ha un'implementazione di questo modello come modulo, che include soluzioni specifiche per IE per far funzionare il pulsante Indietro insieme alla riscrittura dell'indirizzo utilizzando l'hash. Gestore della cronologia del browser YUI.

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

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

Answer 7

Se OP o altri sono ancora alla ricerca di un modo per modificare la cronologia del browser per abilitare lo stato, utilizzare 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 poi 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 venivano utilizzati gli stessi modelli di baffi sia sul lato server che su quello client.Se il client avesse abilitato Javascript, otterrebbe risposte rapide evitando il viaggio di andata e ritorno al server, ma l'app funzionerebbe perfettamente senza Javascript.Pertanto, l'app può degradarsi con garbo in assenza di JavaScript.

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

Answer 8

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

Sì, è possibile.

;)