修改 AJAX 应用程序中的地址栏 URL 以匹配当前状态

Question

我正在编写一个 AJAX 应用程序，但是当用户在应用程序中移动时，尽管没有页面重新加载，我还是希望地址栏中的 URL 更新。 基本上，我希望他们能够在任何时候添加书签，从而返回到当前状态。

人们如何在 AJAX 应用程序中维护 REST 性？

Answer 1

这样做的方法是在 AJAX 更新导致您希望拥有离散 URL 的状态更改时操作location.hash 。 例如，如果您的页面的 url 是：

http://example.com/

如果客户端函数执行此代码：

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

然后，浏览器中显示的 URL 将更新为：

http://example.com/#foo

这允许用户为页面的“foo”状态添加书签，并使用浏览器历史记录在状态之间导航。

有了这种机制，您就需要在客户端使用 JavaScript 解析出 URL 的哈希部分以创建和显示适当的初始状态，因为片段标识符（# 之后的部分）不会发送到服务器。

如果您使用 jQuery， Ben Alman 的 hashchange 插件使后者变得轻而易举。

Answer 2

看看像 book.cakephp.org 这样的网站。 该站点在不使用哈希的情况下更改 URL 并使用 AJAX。 我不确定它是如何做到的，但我一直在努力弄清楚。 如果有人知道，请告诉我。

在查看某个项目中的导航时，还有 github.com。

Answer 3

作者不太可能在使用 Ajax 时重新加载或重定向他的访问者。 但是为什么不使用 HTML5 的pushState / replaceState呢？

您可以随意修改地址栏。 使用 AJAX 获取自然的 url。

查看我最新项目的代码： http : //iesus.se/

Answer 4

这与凯文所说的相似。 您可以将您的客户端状态作为某个 javascript 对象，当您想要保存状态时，您可以序列化该对象（使用 JSON 和 base64 编码）。 然后，您可以将 href 的片段设置为此字符串。

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

第一种方法将新状态视为新位置（因此后退按钮会将它们带到以前的位置）。 后者没有。

Answer 5

SWFAddress 适用于 Flash 和 Javascript 项目，并允许您创建可添加书签的 URL（使用上面提到的哈希方法）以及为您提供后退按钮支持。

http://www.asual.com/swfaddress/

Answer 6

如果 OP 或其他人仍在寻找修改浏览器历史记录以启用状态的方法，那么按照 IESUS 的建议，使用 pushState 和 replaceState 是现在执行此操作的“正确”方法。 与 location.hash 相比，它的主要优势似乎是它创建了实际的 url，而不仅仅是哈希。 如果保存了使用哈希的浏览器历史记录，然后在禁用 javascript 的情况下重新访问，则该应用程序将无法运行，因为哈希不会发送到服务器。 但是，如果使用了 pushState，则整个路由将发送到服务器，然后您可以构建该服务器以适当地响应路由。 我看到了一个示例，其中在服务器端和客户端都使用了相同的 mustache 模板。 如果客户端启用了 javascript，他将通过避免到服务器的往返来获得快速响应，但该应用程序在没有 javascript 的情况下也能正常运行。 因此，应用程序可以在没有 javascript 的情况下优雅地降级。

此外，我相信那里有一些框架，其名称类似于 history.js。 对于支持 HTML5 的浏览器，它使用 pushState，但如果浏览器不支持，它会自动回退到使用哈希。

Answer 7

window.location.hash 方法是首选的处理方式。 有关如何执行此操作的说明，请参阅 Ajax 模式 - 唯一 URL 。

YUI 将此模式的实现作为一个模块，其中包括 IE 特定的变通方法，用于使后退按钮与使用哈希重写地址一起工作。 YUI 浏览器历史记录管理器。

其他框架也有类似的实现。 重要的一点是，如果您希望历史记录与重写地址一起工作，则不同的浏览器需要不同的处理方式。 （这在第一篇链接文章中有详细说明。）

IE 需要基于 iframe 的 hack，其中 Firefox 将使用相同的方法生成双重历史记录。

Answer 8

检查用户是否“在”页面中，当您单击 url 栏时，javascript 说您已离开页面。 如果您更改 url 栏并按其中带有符号“#”的“ENTER”，那么您将再次进入该页面，而无需使用鼠标光标手动单击该页面，然后来自 javascript 的键盘事件命令 (document.onkeypress) 将能够检查它是否进入并激活用于重定向的javascript。 您可以使用 window.onfocus 检查用户是否在页面中，并使用 window.onblur 检查他是否在页面中。

是的，这是可能的。

;)