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

Translate

我正在编写一个AJAX应用程序,但是当用户浏览该应用程序时,尽管没有页面重新加载,我还是希望地址栏中的URL能够更新。基本上,我希望他们能够在任何时候添加书签,从而返回到当前状态。

人们如何处理维护AJAX应用程序中的RESTful?

This question and all comments follow the "Attribution Required."

所有的回答

Translate

做到这一点的方法是操纵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在客户端解析网址的哈希部分,以创建并显示适当的初始状态,因为片段标识符(#后面的部分)不会发送到服务器。

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

来源
Translate

查看类似于book.cakephp.org的网站。该站点无需使用哈希即可更改URL并使用AJAX。我不确定它是如何做到的,但是我一直在努力解决。如果有人知道,请告诉我。

在特定项目中浏览时也请访问github.com。

来源
Translate

使用Ajax时,编写者不太可能希望重新加载或重定向其访问者。但是为什么不使用HTML5pushState/replaceState?

您将可以随意修改地址栏。使用AJAX获得自然的URL。

在我的最新项目中查看代码:http://iesus.se/

来源
Gerald Lee
Translate

这类似于凯文所说的。您可以将客户端状态作为某些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

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

来源
Arlene Lee
Translate

SWFAddress可在Flash和Javascript项目中使用,它使您可以创建可加书签的URL(使用上述哈希方法),并为您提供后退按钮支持。

http://www.asual.com/swfaddress/

来源
Jerry Lee
Translate

window.location.hash方法是首选的处理方法。有关如何操作的说明,Ajax模式-唯一URL.

YUI将这种模式实现为一个模块,其中包括IE专用的解决方法,用于使后退按钮起作用,并使用哈希值重新写入地址。YUI浏览器历史记录管理器.

其他框架也具有类似的实现。重要的一点是,如果您希望历史记录与重写地址一起使用,则不同的浏览器需要不同的处理方式。 (这在第一篇链接文章中有详细介绍。)

IE需要基于iframe的hack,而Firefox将使用相同的方法产生双重历史记录。

来源
Translate

如果OP或其他人仍在寻找一种修改浏览器历史记录以启用状态的方法,那么按照IESUS的建议,使用pushState和replaceState是现在的“正确”方法。与location.hash相比,它的主要优势是哈希可以创建实际的网址,而不仅仅是散列。如果保存了使用哈希的浏览器历史记录,然后在禁用javascript的情况下重新访问了该应用,则该应用将无法正常工作,因为哈希不会发送到服务器。但是,如果已使用pushState,则将整个路由发送到服务器,然后可以对其进行构建以对路由做出适当响应。我看到了一个示例,其中服务器和客户端都使用了相同的胡须模板。如果客户端启用了javascript,则可以避免往返服务器,从而获得快速响应,但是如果没有javascript,该应用将可以正常运行。因此,在没有javascript的情况下,该应用可以正常降级。

另外,我相信这里有一些框架,名称类似于history.js。对于支持HTML5的浏览器,它使用pushState,但是如果浏览器不支持,则它会自动转为使用哈希。

来源
Translate

检查用户是否在页面中,当您单击网址栏时,javascript表示您不在页面内。如果您更改网址栏,然后在其中按下带有“#”符号的“ ENTER”键,那么您将再次进入该页面,而无需使用鼠标光标手动单击该页面,因此来自javascript的键盘事件命令(document.onkeypress)将能够检查是否已输入并激活了JavaScript以进行重定向。您可以使用window.onfocus检查用户是否在页面中,并通过window.onblur检查用户是否不在页面中。

是的,有可能。

;)

来源