AJAX 和浏览器后退按钮答案

【问题标题】：AJAX and the Browser Back ButtonAJAX 和浏览器后退按钮
【发布时间】：2010-09-14 21:13:39
【问题描述】：

我在 www.darknovagames.com 上运行基于浏览器的游戏。最近，我一直在努力用 CSS 重新格式化网站，试图让它的所有页面都根据 HTML 标准进行验证。

我一直在玩弄这样的想法，即在左侧 AJAX 页面中使用导航菜单（而不是每次将用户带到单独的页面，需要重新加载标题和导航栏，这几乎永远不会改变) 而且我知道如果这样做，我可能会破坏浏览器中的前进/后退按钮。我想我的问题是，我应该继续对网站进行 AJAX，从而要求用户使用网站导航来玩游戏，还是应该离开网站目前的状态，并使用标准超链接和其他东西进行导航？

我想我问的原因是我在网站中构建了一个论坛系统，很多时候我想链接到论坛中的特定主题。

我也愿意接受建议。是否有一种标准（最好没有传统框架）方法来仅重新加载站点的主体区域，同时仍更改 URL 以便用户可以添加书签和前进/后退等？这也可能解决我的问题。我只是在这里寻求最佳解决方案，而不是特定问题的答案。 ^_^

谢谢

【问题讨论】：

标签： javascript html ajax navigation

【解决方案1】：

将 ajax 用于需要更新的页面部分，而不是整个页面。为此，您应该使用模板。

如果您仍想为页面上的各种状态更改保留后退按钮，请将它们与 #achors 组合以更改 url（不强制浏览器发出另一个 GET）。

例如，gmail 是这样的：

mail.google.com/#inbox/message-1234

# 之后的所有内容都是通过 ajax 发生的页面状态更改。如果我按返回，我将再次进入收件箱（再次，无需其他浏览器 GET）

【讨论】：

【解决方案2】：

有很多方法可以使用时髦的 Javascript 技术解决这个问题，通常涉及 iframe，但我认为在这种情况下，您需要质疑为什么要使用 AJAX。它真的会让网站更容易为用户使用吗？在我看来，您使用它是因为您认为它很酷（这本身并不总是一件坏事），而不是因为它实际上会为您的访问者增加任何价值。在任何普通网站上，普通的超链接文档几乎总是适合主导航。这是人们所期望的，我不建议您基于一些花哨的技术来打破这些期望。

AJAX 很棒，可以让你做很多很棒的事情，改变网站导航不是其中之一。

很好地解决了这个问题，有很多网站只是使用 AJAX，甚至没有考虑这个问题！

【讨论】：

该网站目前已经在使用 AJAX。它是一个网页游戏，每个人的统计数据每 15 分钟在服务器上更新一次，所以根据他们所在的页面，我在新信息中 AJAX，因此页面已经准确。
所以你已经在绝对有意义的地方使用它了，我不认为以这种方式扩展它也有意义。

【解决方案3】：

正如您所描述的那样，AJAX 并不是导航的最佳解决方案。与破坏浏览器导航 UI 的麻烦相比，重新加载标题和导航栏的影响很小。

更合适的 AJAX 示例是允许用户在主窗口中玩游戏，同时他们可以在导航窗格中浏览其他内容列表。您可以通过 AJAX 在导航窗格中加载其他项目，而不会影响游戏。

【讨论】：

【解决方案4】：

我会坚持使用简单的超链接。您的页面家具不应占 HTML 的很大一部分，因此将其排除在页面请求之外并不是什么大问题。使每个资源可寻址（即用户可能感兴趣的每一位内容的 URL）是 Web 的一个关键设计特征。这意味着缓存可以工作，并且意味着用户可以共享书签。它使 Google 以及社交书签网站发挥作用。

在我看来，从后续页面更改中减少几个 HTML 字节是不值得的。

【讨论】：

【解决方案5】：

如果您要启用 AJAX，请不要以您网站上每个重要页面的可访问 URL 为代价。这是人们可以使用的可导航网站的支柱。

当您将所有功能集中到 AJAX 调用和回调中时，您基本上是在迫使您的用户使用单一路径来访问他们想要的功能和内容——这完全违背了 Web 的功能。人们依赖地址栏和返回按钮。如果您覆盖所有链接，使您的网站本质上是一个仅通过 AJAX 更新的单一页面，那么您将限制用户浏览您的网站并找到他们需要的内容的能力。它还会阻止您的用户分享他们发现的内容（这是重点的一部分，对吧？）。

想想用户对您网站的心理地图。如果他们知道他们是通过主页进入的，那么他们就会去搜索一些东西，然后他们登陆一个游戏页面，然后他们开始玩一个特定的游戏，这是用户采取的四个不同的行动单元。他们可能在这些页面中的每一个上都做了一些其他更小、更无关紧要的操作——但这些是主要单元。当他们单击“返回”按钮时，他们应该期望通过他们进入的路径返回。如果您通过 AJAX 调用加载所有这些页面，那么您提供的网站的功能与用户的期望相反。

将您的网站分解为每个重要功能（即搜索、主页、个人资料、游戏——这将取决于您网站的全部内容）。在您链接到这些页面的任何地方，都可以通过常规链接和静态 URL 进行链接。

AJAX 很好。但它的艺术在于知道何时使用它，何时不使用它。如果你坚持我上面勾勒的模型，你的用户会很感激的。

【讨论】：

+1 不要使用 AJAX 将您的整个网站变成 Flash 网站。处于最佳状态的第二系统综合症。
@Soviut 您是否也会考虑其他 AJAX（半）应用程序，例如 Gmail 或 Google MAps 第二系统？
@Mansiemans，不，因为他们尊重 URL 系统，因此您可以为应用程序的各个部分添加书签并使用后退按钮。
我不同意。显然，人们对这个问题有不同的看法，但我仍然认为在构建网站（或“应用程序”）时应该尊重网络的基本架构。对我来说，这是一个良好的工程实践问题，这是足够令人信服的理由。此外，如果你做对了，你没有理由不能充分利用 AJAX 的所有好处，但仍然尊重 URL 的结构。
具有明确定义的 URL 的可导航页面的站点往往具有更好的 SOA（如果这对您的站点很重要）

【解决方案6】：

查看reallysimplehistory。 wiki 已经有 10 个月没有更新了，但我刚刚参加了 2008 年的 Ajax Experience，看到了 Brian Dillard 的 presentation。他说 0.8 代码在他的硬盘上。希望它很快就可以下载了。

【讨论】：

【解决方案7】：

另一种解决方案：

AJAX Pagination & Back Button

这似乎是最好的，与 JQuery 和 Mootools 一起使用。

【讨论】：

【解决方案8】：

试试这个简单轻量级的PathJS lib。它允许将侦听器直接绑定到锚点。

例子：

Path.map("#/page").to(function(){
    alert('page!');
});

【讨论】：