如何使浏览器返回按钮带您回到AJAX调用？

Question

我的页面上有很多动态生成的复选框。当用户单击这些复选框时，页面上的许多内容都会通过ajax动态更改。最终用户抱怨说，在点击提交然后点击后退按钮进行更改后，他们的选择会被吹走，他们必须重新做一遍。

我已经看到一些网站（gmail，facebook等）使用URL中的哈希符号来破解后退按钮，以便它执行AJAX调用而不是回到之前的整页请求。我想在页面提交之前修改URL，以便按下后退按钮将加载以前选择的字段。

例如：

在Gmail中，如果我正在查看我的收件箱，那么我的网址如下所示：https://mail.google.com/mail/?shva=1#inbox

然后，如果我点击“已发邮件”，则会执行AJAX调用，并且我的网址会被修改为如下所示：https://mail.google.com/mail/?shva=1#sent

我真的很喜欢这种行为并希望复制它。这是如何完成的？

1. 您的链接是否实际触发了任何javascript，还是仅使用相应的哈希符号信息链接到该网址？

2. 您如何阅读javascript中的哈希符号信息？

3. 此类导航如何影响搜索引擎？搜索引擎是否知道除了哈希之后的信息之外，两个相同的URL实际上是不同的URL并将它们编入索引？

4. 我应该考虑这项技术的其他优点和缺点是什么？

注意：我正在使用C＃与ASP.NET Web窗体和ASP.NET MVC 3.0，以防万一。

Answer 1

要操纵主题标签，请查看location.hash（javascript）。

您还会对HTML 5中的新推/弹状态内容感兴趣。https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history。

github用这个做了一些非常酷的事情。在https://github.com/blog/760-the-tree-slider的树状滑块功能上查看他们的博客条目。

http://tkyk.github.com/jquery-history-plugin/还有jQuery历史插件。 （编辑：我看到乔打败了我这个）。

Answer 2

看一下我过去使用的jquery历史插件http://tkyk.github.com/jquery-history-plugin/，它可能会做你想要的。

Answer 3

JQuery插件： http://tkyk.github.com/jquery-history-plugin/

我过去使用过的另一个jQuery库：

jQuery BBQ: Back Button & Query Library

此外，如果您不需要它的所有功能，只需为所有浏览器提供hashchange事件，就可以使用之前的缩小版本：

jQuery hashchange event

注意：正如上述图书馆的简要介绍一样。更新（支持HTML5）的浏览器本身支持hashchange事件，在这种情况下脚本将绑定到该事件。对于不支持该事件的旧浏览器，该脚本会创建一个轮询循环来模拟该事件。在任何一种情况下，您都可以绑定到事件并进行适当处理。

编辑：回答您的问题：

1. 链接不会触发javascript，链接只需使用哈希更改网址即可。 hashchange事件监视此操作，当哈希更改（记录在浏览器历史记录堆栈中）时，事件将触发。
2. location.hash用于读取哈希值，以及从该点开始需要的任何适当的解析。
3. 可能不是SEO精明足以给你一个完整的答案，但相当肯定搜索引擎不要索引哈希。
4. 此技术的优点是可用性，因为您的用户将能够正确使用他们的后退按钮。此外，任何history.back(0) javascript调用也将正常工作（我不喜欢它们，但人们使用它们）。缺点是，在您最初开发时，您可以根据代码的编写方式获得一些奇怪的错误。总而言之，我认为通过插件的使用，大部分的工作已经从流程中取出，这是一个很好的可用性方法。