Schema URL simile a Gmail

Question

Sto lavorando a un sistema di ticket, con i seguenti requisiti:
La pagina iniziale è divisa in due sezioni:
Sec-1. Alcune opzioni di filtro sono mostrate qui (come biglietti chiusi, biglietti aperti, biglietti tutti, biglietti assegnati a me ecc.). È possibile selezionare uno o più di questi filtri.
sec-2. L'elenco dei ticket che soddisfano i filtri sopra verranno visualizzati qui.

Ora questo è quello che voglio: Come cambio i filtri
-> la modifica deve essere riflessa nell'URL, in modo che uno sia in grado di aggiungerlo ai segnalibri.
-> verrà inviata una richiesta Ajax e l'elenco dei ticket che soddisfano i filtri selezionati verrà aggiornato in sec-2.

voglio lo stesso codice da utilizzare per caricare i biglietti in entrambi i modi-
(a) selezionando quella serie di filtri e
(b) utilizzando il segnalibro per ricaricare la pagina.

Ho poco idea su come farlo:
L'URL conterrà i filtri selezionati (aggiunto dopo #)
cambiando filtri nella pagina modificheranno la parte hash di URL e chiamare una funzione (diciamo. ajaxHandler()) per analizzare l'URL per ottenere i filtri e quindi effettuare una richiesta Ajax per ottenere l'elenco dei ticket da visualizzare nella sezione 2.
e
Chiamerò la stessa funzione ajaxHandler() in window.onload.
Penso che questo sia quello che fa Yahoo maps.

Qual è il modo migliore per implementare tale schema URL?
Sono diretto nella giusta direzione?

Answer 1

Sì, si sta dirigendo esattamente nella direzione giusta, e c'è un sacco di lavoro che è andato a farlo correttamente su tutti i browser e sistemi operativi. Una delle parti più difficili da ottenere è che i pulsanti back e forward del browser funzionino correttamente quando si utilizza la sintassi #urlfragment.

Una libreria che fornisce il supporto per una cosa del genere: http://developer.yahoo.com/yui/history/

Answer 2

trovo la soluzione l'onda di applicazione Google di essere abbastanza elegante. È fondamentalmente ciò che descrivi usando un frammento di url parseable. così: http://some.domain/some/url/#filters(filter1:key1,filter2:key2);someOtherfragment;andAnotherFragment

Answer 3

L'uso della libreria yui per la cronologia è un'opzione come menzionata nel commento di sblom. Si consiglia di prendere in considerazione solo la fornitura di un segnalibro o pulsante di collegamento sulla pagina che l'utente può fare clic su per ottenere l'urk se non si desidera affrontare i problemi di compatibilità del browser.

Lo facciamo qui http://connect.garmin.com/explore#sortField=relevance&currentPage=1 C'è un collegamento nella parte superiore della mappa.

Answer 4

Questa è in qualche modo una risposta semplice, ma ciò che si vuole guardare è usare un metodo iframe nascosto per AJAX, al contrario di XHR (XMLHttpRequest Object). Ciò consentirà al browser di conservare la cronologia, pertanto i pulsanti Indietro continueranno a funzionare.

Alcuni di più: http://ajaxpatterns.org/IFrame_Call

Answer 5

Beh, se si sta utilizzando jQuery si trova questa bella libreria Asual: jQuery Address per deep linking. Hanno un buon riferimento API ed esempi. Ti fornirà tutti gli strumenti necessari per implementare la tua app.

Answer 6

In Chrome, Safari e Firefox è possibile utilizzare HTML5 history.pushState e history.replaceState() metodi

Alcuni documentazione here e here.

Answer 7

Ben Alman ha creato un plug-in jQuery completo per questo chiamato BBQ. IMO, è molto meglio del plugin Address.