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

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

人们是如何在 AJAX 应用程序中维护 RESTful 的？

74194 次浏览
小开

这和凯文说的很像。您可以将您的客户机状态作为某个 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

第一种方法将把新状态视为一个新位置(因此后退按钮将把它们带到前一个位置)。后者则不然。

小开
最佳答案

这样做的方法是，当 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 的 hash 部分来创建和显示适当的初始状态，因为片段标识符(# 后面的部分)不会发送到服务器。

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

小开

SWFAddress 可以在 Flash & Javascript 项目中使用，它允许您创建书签 URL (使用上面提到的散列方法) ，并且提供后退按钮支持。

Http://www.asual.com/swfaddress/

小开

Hash 方法是做事情的首选方法, Ajax 模式-唯一的 URL 。

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

其他框架也有类似的实现。重要的一点是，如果您希望历史记录与重写地址一起工作，不同的浏览器需要不同的方式来处理它。(详情请参阅第一个连结的文章。)

IE 需要一种基于 iframe 的黑客技术，Firefox 可以使用同样的方法生成双历史记录。

小开

检查用户是否在页面中，当你点击 URL 栏时，JavaScript 会说你离开了页面。 如果你改变了网址栏，并在其中按下“ ENTER”和符号“ #”，然后你再次进入页面，不用用鼠标手动点击页面，然后一个来自 JavaScript 的键盘事件命令(document.onkeypress)将能够检查它是否输入并激活 JavaScript 进行重定向。 您可以检查 user 是否在带有 window.onfocus 的页面中，并检查用户是否在带有 window.onzzy 的页面中。

有可能。

;)

小开

看看像 book.cakephp.org 这样的网站。此站点更改 URL 而不使用散列并使用 AJAX。我不知道具体是怎么做到的，但我一直在想办法。如果有人知道，告诉我。

当查看某个项目中的导航时，也可以访问 github.com。

小开

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

您可以随心所欲地修改地址栏

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

小开

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

此外，我相信还有一些框架，比如 history. js。对于支持 HTML5的浏览器，它使用 pushState，但是如果浏览器不支持，它就会自动退回到使用散列。


提交答案