在AJAX调用更新网址是什么?(Update URL on AJAX call?)

2019-06-26 01:36发布

现在,我使用AJAX具有最大的问题是,如果我使用AJAX页面上,转到另一个页面,然后使用浏览器的后退按钮返回任何与AJAX已经一去不复返了改变。

我想过使用jQuery的编辑部地址插件来解决这个问题,但我不喜欢它如何只赔偿与“#whatever.html”,而不是彻底改变它的URL。

理想情况下,我想是有URL从去:“www.example.com/p:2/”到“www.example.com/p:3/”当我做出相关的AJAX调用。

这是可能吗?

Answer 1:

不,这是不可能的。 更新:现在可以通过HTML5历史API -见razbakov的答案 。

我希望你意识到你正在试图解决一个非常困难的问题。

比方说,您的网址看起来像

http://example.com/mypage/

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

http://example/mypage/1/

浏览器将接管并尝试导航到该页面时,就像你看中的Ajax代码!

那么,有什么办法呢? 您可以使用网址片段。

比方说,你有一个URL这样,

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

浏览器会首先加载http://example.com/anotherpage/ ,并试图找到一个名为“部分”和滚动到该位置的锚。 此行为是由“地址”插件开发。 这是类似于“滚动到顶部”链接是如何工作的。

所以,如果你在页面上

http://example.com/mypage/

并更改网址

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

浏览器将不会加载新的页面,而是试图寻找命名锚“1”,并滚动到该锚点。

即使你设法片段添加到URL,它并不意味着工作就完成了。 如果用户按下后退按钮,DOM将被重置,你将不得不解析那些片段并重新创建DOM。 这绝对是不平凡的。



Answer 2:

这是可能的HTML5。 您可以测试为例GitHub上的Vkontakte或网站。

最好的答案就在这里: 更改浏览器的URL,而无需加载使用JavaScript的新页

它说,你可以使用history.pushState功能为这些目的。 但是,这种解决方案只能在HTML5 compatitable浏览器。 否则,你需要使用散列法。



Answer 3:

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



Answer 4:

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



Answer 5:

使得AJAX调用之后,我们就可以使用history.pushState更新客户端的URL。 请找到下面的语法和示例

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

例:

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


文章来源: Update URL on AJAX call?