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

Question

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

人们如何处理在AJAX应用程序中维护RESTful？

Answer 1

这样做的方法是location.hash在AJAX更新导致状态更改时操作,您希望拥有一个谨慎的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获取自然的网址.

查看我最新项目的代码: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

第一种方法是将新状态视为新位置(因此后退按钮会将它们带到之前的位置).后者没有.