更新 AJAX 调用的 URL？答案

【问题标题】：Update URL on AJAX call?更新 AJAX 调用的 URL？
【发布时间】：2010-11-11 04:20:36
【问题描述】：

现在我在使用 AJAX 时遇到的最大问题是，如果我在一个页面上使用 AJAX，转到另一个页面，然后使用浏览器的后退按钮返回任何使用 AJAX 更改的内容都消失了。

我曾考虑使用jQuery Addresss 插件来解决这个问题，但我不喜欢它只用“#whatever.html”修改网址而不是完全改变它。

理想情况下，当我进行相关的 AJAX 调用时，我希望 URL 从“www.example.com/p:2/”变为“www.example.com/p:3/”。

这可能吗？

【问题讨论】：

【解决方案1】：

不，这是不可能的。 更新：现在可以通过 HTML5 History API - 请参阅 razbakov's answer。

我希望你意识到你正在尝试解决一个极其困难的问题。

假设您的网址看起来像

http://example.com/mypage/

如果您以编程方式将窗口位置更改为

http://example/mypage/1/

浏览器将接管并尝试导航到该页面，那里有你花哨的 ajax 代码！

那么有什么选择呢？您使用 URL 片段。

假设你有一个这样的 URL，

http://example.com/anotherpage/#section

浏览器将首先加载http://example.com/anotherpage/ 并尝试找到一个名为“section”的锚点并滚动到该位置。这种行为被“地址”插件利用。这类似于那些“滚动到顶部”链接的工作方式。

所以如果你在页面上

http://example.com/mypage/

并将网址更改为

http://example.com/mypage/#1

浏览器不会加载新页面，而是尝试找到名为“1”的锚点并滚动到该锚点。

即使您已设法将片段添加到 URL，也并不意味着工作已完成。如果用户按下后退按钮，DOM 将被重置，您将不得不解析这些片段并重新创建 DOM。这绝对不是微不足道的。

【讨论】：

【解决方案2】：

在进行 AJAX 调用后，我们可以使用 history.pushState 更新客户端 URL。请查找以下语法和示例

语法：history.pushState(obj, obj.Title, obj.Url);

例子：

var url = "http://example.com/mypage/" + "newParameter=newValue"
history.pushState(undefined, '', url);

【讨论】：

【解决方案3】：

这个问题可以使用 history.js 解决。 https://github.com/browserstate/history.js

【讨论】：

【解决方案4】：

pjax 在现代浏览器中优雅地处理了这个问题。

【讨论】：

【解决方案5】：

HTML5 可以。您可以作为示例 GitHub 或 Vkontakte 站点进行测试。

它说您可以将 history.pushState 函数用于这些目的。但此解决方案仅适用于兼容 HTML5 的浏览器。否则你需要使用哈希方法。

【讨论】：