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

Question

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

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

例如:

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

然后,如果我单击"已发送邮件",则会执行AJAX调用,并且我的URL被修改为如下所示: https://mail.google.com/mail/?shva=1#sent

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

1. 你的链接实际上是触发任何javascript还是只是链接到带有相应哈希符号信息的URL？

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

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

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

注意:我正在使用C#与ASP.NET Web窗体和ASP.NET MVC 3.0,以防万一.

Answer 1

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

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

jQuery BBQ：后退按钮和查询库

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

jQuery hashchange 事件

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

编辑：回答你的问题：

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