像URL方案一样的Gmail

Question

我正在制定一个票务系统，具有以下要求：
主页分为两部分：
秒-1。这里显示了一些过滤器选项。（如封闭票，开票，所有票，门票分配给我等）。您可以选择一个或多个这些过滤器 秒-2。满足以上过滤条件的门票列表将显示在此处。

现在这就是我想要的：当我更换过滤器时 - ＆GT;更改应反映在URL中，以便能够将其加入书签 - ＆GT; ajax请求将进入，并且满足所选过滤器的票证列表将在sec-2中更新。

我希望使用相同的代码以两种方式加载票证 -
（a）选择那组过滤器和
（b）使用书签重新加载页面。

我对如何做到这一点一无所知：
该URL将包含所选的过滤器。（在＃之后附加）
更改页面上的过滤器将修改URL的哈希部分并调用一个函数（例如ajaxHandler（））来解析URL以获取过滤器，然后发出ajax请求以获取要在section2中显示的票证列表。 /> 和
我将在window.onload中调用相同的函数ajaxHandler（）。
我觉得这就是Yahoo maps所做的。

实施此类网址方案的最佳方法是什么？ 我是朝着正确的方向前进的吗？

Answer 1

是的 - 你正朝着正确的方向前进，并且在所有浏览器和操作系统上都有大量的工作正确地完成了这项工作。正确使用的最难的部分之一是当您使用#urlfragment语法时，使浏览器的后退和前进按钮正常工作。

为这样的事情提供支持的库：http://developer.yahoo.com/yui/history/

Answer 2

我发现google wave应用程序的解决方案非常优雅。它基本上是你用可解析的url片段描述的。像这样：http://some.domain/some/url/#filters(filter1:key1,filter2:key2);someOtherfragment;andAnotherFragment

Answer 3

好吧，如果你使用的是jQuery，Asual有一个可爱的库：jQuery Address用于深度链接。他们有一个很好的API参考和示例。它将为您提供实施应用程序所需的所有工具。

Answer 4

这是一个简单的答案，但您想要看的是为AJAX使用隐藏的iframe方法，而不是XHR（XMLHttpRequest对象）。这将允许浏览器维护历史记录，因此您的后退按钮将继续工作。

更多：http://ajaxpatterns.org/IFrame_Call

Answer 5

Ben Alman为这个名为BBQ构建了一个功能齐全的jQuery插件。 IMO，它比Address插件要好得多。

Answer 6

使用yui库作为历史记录是sblom评论中提到的一个选项。 您可能需要考虑在页面上提供书签或链接按钮，如果您不想处理跨浏览器兼容性问题，用户可以单击该按钮以访问urk。

我们在这里http://connect.garmin.com/explore#sortField=relevance&currentPage=1 地图顶部有一个链接。

Answer 7

在Chrome，Safari和Firefox中，您可以使用HTML5 history.pushState和history.replaceState()方法

部分文档here和here。