Google Mail wie URL-Schema

Question

Ich arbeite an einem Ticket-System, mit der folgenden Anforderung:
Die Startseite ist in zwei Abschnitte unterteilt:
Sec-1. Einige Filteroptionen werden hier angezeigt (wie geschlossene Tickets, offene Tickets, All-Tickets, zugewiesene Tickets usw.). Sie können einen oder mehrere dieser Filter auswählen.
sek-2. Die Liste der Tickets, die die obigen Filter erfüllen, wird hier angezeigt.

Jetzt ist das, was ich will: Wie ich die Filter ändern
-> die Änderung sollte sich in der URL widerspiegeln, so dass man in der Lage ist, es zu bookmarken.
-> eine Ajax-Anfrage wird gehen und die Liste der Tickets, die die ausgewählten Filter erfüllen, wird in sec-2 aktualisiert.

Ich mag den gleiche Code verwendet werden, um die Tickets in beiden Möglichkeiten-
(a) zu laden, indem Sie diesen Satz von Filtern auswählen und
(b) durch das Lesezeichen mit der Seite neu zu laden.

Ich habe wenig Ahnung, wie es zu tun:
Die URL wird die ausgewählten Filter enthalten (nach # angehängt)
Filterwechsel auf der Seite wird der Hash-Teil der URL ändern und eine Funktion aufrufen (sagen. ajaxHandler()), um die URL zu analysieren, um die Filter zu erhalten und dann eine Ajax-Anfrage zu machen, um die Liste der Tickets zu erhalten, die in Sektion 2 angezeigt werden sollen.
und
Ich werde die gleiche Funktion ajaxHandler() in window.onload aufrufen.
Ich glaube, das ist was Yahoo maps tut.

Wie können Sie ein solches URL-Schema am besten implementieren?
Gehe ich in die richtige Richtung?

Answer 1

Ja - Sie sind in der richtigen Richtung unterwegs, und es gibt eine Menge Arbeit, die dies in allen Browsern und Betriebssystemen korrekt getan hat. Eine der schwierigsten Komponenten, die richtig funktionieren, besteht darin, dass die Vor- und Zurück-Schaltflächen des Browsers ordnungsgemäß funktionieren, wenn Sie die #urlfragment-Syntax verwenden.

Eine Bibliothek, die Unterstützung für so etwas bietet: http://developer.yahoo.com/yui/history/

Answer 2

ich die Google-Welle App Lösung finden recht elegant. Es ist im Grunde, was Sie mit einem analysierbaren URL-Fragment beschreiben. like so: http://some.domain/some/url/#filters(filter1:key1,filter2:key2);someOtherfragment;andAnotherFragment

Answer 3

Die Verwendung der Yui-Bibliothek für die Geschichte ist eine Option wie in sbloms Kommentar erwähnt. Vielleicht möchten Sie nur ein Lesezeichen oder eine Link-Schaltfläche auf Ihrer Seite bereitstellen, auf die der Benutzer klicken kann, um zum urk zu gelangen, wenn Sie nicht mit Cross-Browser-Kompatibilitätsproblemen umgehen möchten.

Wir machen es hier http://connect.garmin.com/explore#sortField=relevance&currentPage=1 Theres einen Link auf der Oberseite der Karte.

Answer 4

Dies ist eine einfache Antwort, aber was Sie sehen möchten, ist die Verwendung einer versteckten Iframe-Methode für Ihre AJAX, im Gegensatz zu XHR (XMLHttpRequest Object). Dadurch kann der Browser den Verlauf beibehalten, sodass Ihre Zurück-Schaltflächen weiterhin funktionieren.

Einige mehr: http://ajaxpatterns.org/IFrame_Call

Answer 5

Nun, wenn Sie jQuery verwenden gibt es diese schöne Bibliothek von asual: jQuery Address für Deep-Linking. Sie haben eine gute API-Referenz und Beispiele. Es gibt Ihnen alle Tools, die Sie benötigen, um Ihre App zu implementieren.

Answer 6

In Chrome, Safari und Firefox können Sie HTML5 history.pushState und history.replaceState() Methoden

Einige Dokumentation here und here verwenden.

Answer 7

Ben Alman hat ein voll funktionsfähiges jQuery-Plugin für diese namens BBQ gebaut. IMO, es ist viel besser als das Address Plugin.