AJAX和浏览器的后退按钮

Question

我在 www.darknovagames.com 经营一个基于浏览器的游戏。最近，我一直在使用 CSS 重新格式化网站，试图让所有页面都符合 HTML 标准。

我一直在考虑这个想法，即让左侧的导航菜单 AJAX 页面（而不是每次将用户带到一个单独的页面，需要重新加载标题和导航栏，这几乎从不改变），我知道如果这样做，我可能会破坏浏览器的前进/后退按钮。我的问题是，我应该继续使用 AJAX 网站，因此需要用户使用网站导航来玩游戏，还是应该保留当前的网站状态，并使用标准的超链接和其他导航？

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

我也愿意听取建议。有没有一种标准的（最好不含传统框架）方法可以使网站只重新加载正文区域，同时更改 URL，以便用户可以书签、前进/后退等？这也可能解决我的问题。我只是在寻求最佳解决方案，而不是回答特定问题。 ^ _ ^

谢谢

- Nicholas Flynt

Answer 1

使用ajax更新页面中需要更新的部分，而不是整个页面。对于这种情况，应该使用模板。

当您想保留页面上各种状态更改的后退按钮时，结合使用#锚点来更改URL（而不强制浏览器发出另一个GET请求）。

例如，Gmail的URL如下：

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

#后面的所有内容都是通过ajax进行的页面状态更改。如果我按“后退”按钮，我将再次回到收件箱（同样不会发出另一个浏览器GET请求）。

- Ben Scheirman

Answer 2

如果您要启用AJAX，请不要以牺牲网站上每个重要页面的可访问性为代价。这是构建可导航网站的基础，人们可以使用它。

当您将所有功能都塞入AJAX调用和回调中时，您基本上强迫用户走一条路径来访问他们想要的功能和内容，这完全违反了Web的工作方式。人们依赖地址栏和后退按钮。如果您覆盖所有链接，使您的网站本质上成为仅通过AJAX更新的单个页面，则限制了用户浏览您的网站并找到所需内容的能力。这还阻止了用户分享所发现的内容（这部分其实是重点之一，对吧？）。

想象一下用户对您的网站的心理地图。如果他们知道他们是从主页进入的，然后搜索某些东西，然后着陆在游戏页面上，然后开始玩特定的游戏，那么这是用户采取的四个不同的动作单位。他们可能在每个页面上执行了一些其他更小的，不太重要的操作-但这些是主要的单位。当他们点击“返回”按钮时，他们应该期望按照他们进入的路径返回。如果您通过AJAX调用加载所有这些页面，则提供的网站功能与用户预期相反。

将您的网站分解为每个重要功能（即搜索，主页，简介，游戏-它将根据您的网站内容而定）。无论您在何处链接到这些页面，请通过常规链接和静态URL进行。AJAX没问题。但它的艺术在于知道何时使用它以及何时不使用它。如果遵循我上面勾勒的模式，您的用户将会感激不尽。

- bigmattyh

---

不要使用AJAX将整个网站变成Flash网站。这是最典型的第二系统综合症。 - Soviut

@Soviut，您是否也会将其他 AJAX（半）应用程序，如 Gmail 或 Google 地图视为第二系统？ - Mansiemans

@Mansiemans，不会，因为它们尊重URL系统，所以您可以将应用程序的各个部分加入书签并使用后退按钮。 - Soviut

我不同意。显然，人们对这个主题有不同的看法，但我仍然认为在构建网站（或“应用程序”）时应该尊重Web的基本架构。 对我来说，这是一个好的工程实践问题，足够具有说服力的理由。此外，如果您做得正确，就没有理由不能享受AJAX的所有好处，同时还要尊重URL的结构。 - Matt Howell

具有可导航页面和明确定义的URL的网站往往具有更好的SOA（如果这对您的网站很重要）。 - seand

这已经非常过时了，因为基于新的ajax接口的界面在速度方面完全超越了http重载，并且在私人网络空间中，SEO是无关紧要的。 - Tim Hallman

Answer 3

请查看reallysimplehistory。虽然该wiki已经10个月没有更新了，但我刚参加了2008年的Ajax Experience，并听到Brian Dillard在演讲中提到它。他说0.8版本的代码存储在他的硬盘上，希望不久后就可以下载。

- Kevin Hakanson

Answer 4

另一种解决方案： AJAX分页和返回按钮似乎是目前最好的解决方案，可与JQuery和Mootools配合使用。

- JP Illanes

Answer 5

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

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

不过，你能发现这个问题已经很不错了，有很多网站只是继续使用AJAX，甚至没有考虑这个问题！

- Rory

---

该网站目前已经在使用AJAX。这是一个浏览器游戏，每个人的统计数据都会在服务器上每15分钟更新一次，因此根据他们所在的页面，我会通过AJAX获取新信息，以便页面已经准确无误。 - Blank

所以你已经在绝对有意义的地方使用它了，我认为以这种方式扩展它也没有意义。 - roryf

Answer 6

尝试使用这个简单轻巧的PathJS库。它允许直接绑定监听器到锚点。

例子：

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

- Nikita Koksharov

Answer 7

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

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

- Sal

Answer 8

我建议使用简单的超链接。您的页面元素不应占用HTML的大部分，因此从页面请求中排除它并没有太大的优势。使每个资源可寻址（即为用户可能感兴趣的每个内容位提供一个URL）是Web的关键设计特征。这意味着缓存可以工作，并且意味着用户可以共享书签。它使Google以及社交书签网站正常工作。

在我看来，删减几个HTML字节并不能带来多大的好处。

- Paul D. Waite