修改 AJAX 应用程序中的地址栏 URL 以匹配当前状态
https://stackoverflow.com/questions/1457
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我正在编写一个 AJAX 应用程序，但当用户在应用程序中移动时，我希望地址栏中的 URL 能够更新，尽管没有页面重新加载。基本上，我希望他们能够在任何时候添加书签，从而返回到当前状态。
人们如何在 AJAX 应用程序中维护 RESTful？
解决方案
做到这一点的方法是操纵 location.hash 当 AJAX 更新导致状态更改时，您希望拥有一个谨慎的 URL。例如，如果您的页面网址是：
如果客户端函数执行此代码：
// AJAX code to display the "foo" state goes here.
location.hash = 'foo';
然后，浏览器中显示的 URL 将更新为：
这允许用户为页面的“foo”状态添加书签，并使用浏览器历史记录在状态之间导航。
有了这种机制，您就需要使用 JavaScript 在客户端解析 URL 的哈希部分，以创建并显示适当的初始状态，因为片段标识符（# 后面的部分）不会发送到服务器。
Ben Alman 的 hashchange 插件 如果您使用 jQuery，则后者会变得轻而易举。
其他提示
查看 book.cakephp.org 等网站。该站点更改 URL 时不使用哈希并使用 AJAX。我不确定它到底是如何做到的，但我一直在努力弄清楚。如果有人知道，请告诉我。
当查看某个项目内的导航时，也可以访问 github.com。
在使用 Ajax 时，作者不太可能想要重新加载或重定向他的访问者。但为什么不使用 HTML5 pushState/replaceState?
您可以根据需要修改地址栏。 使用 AJAX 获得自然的 url。
查看我最新项目的代码：http://iesus.se/
这和凯文说的很相似。您可以将客户端状态作为某个 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
第一种方法会将新状态视为新位置（因此后退按钮会将它们带到之前的位置）。后者则不然。
SWFAddress 适用于 Flash 和 Javascript 项目，允许您创建可添加书签的 URL（使用上面提到的哈希方法）并为您提供后退按钮支持。
window.location.hash 方法是首选的处理方式。有关如何操作的说明，Ajax 模式 - 唯一 URL.
YUI 将此模式作为一个模块实现，其中包括 IE 特定的解决方法，用于使后退按钮与使用散列重写地址一起工作。 YUI 浏览器历史记录管理器.
其他框架也有类似的实现。重要的一点是，如果您希望历史记录与重写地址一起工作，不同的浏览器需要不同的处理方式。（这在第一篇链接文章中有详细介绍。）
IE 需要基于 iframe 的 hack，Firefox 将使用相同的方法生成双重历史记录。
如果 OP 或其他人仍在寻找修改浏览器历史记录以启用状态的方法，那么按照 IESUS 的建议，使用 PushState 和 ReplaceState 是现在的“正确”方法。它相对于 location.hash 的主要优点似乎是它创建实际的 url，而不仅仅是哈希值。如果保存使用哈希值的浏览器历史记录，然后在禁用 JavaScript 的情况下重新访问，则应用程序将无法运行，因为哈希值不会发送到服务器。但是，如果使用了 PushState，则整个路由将发送到服务器，然后您可以构建该服务器以对路由做出适当的响应。我看到一个示例，其中在服务器和客户端上都使用了相同的胡子模板。如果客户端启用了 javascript，他将通过避免与服务器的往返来获得快速响应，但应用程序在没有 javascript 的情况下也可以完美运行。因此，应用程序可以在没有 JavaScript 的情况下正常降级。
另外，我相信有一些框架，其名称如history.js。对于支持 HTML5 的浏览器，它使用 PushState，但如果浏览器不支持，它会自动回退到使用哈希。
检查用户是否“在”页面中，当您单击网址栏时，javascript 表示您已离开页面。如果您更改网址栏并按其中包含符号“#”的“ENTER”，然后再次进入该页面，而无需使用鼠标光标手动单击该页面，则来自 javascript 的键盘事件命令（document.onkeypress）将能够检查它是否已输入并激活 javascript 进行重定向。您可以使用 window.onfocus 检查用户是否在页面中，并使用 window.onblur 检查用户是否在页面外。
是的，这是可能的。
;)
