Question

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

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

Answer 1

执行此操作的方法是在AJAX更新导致状态更改时操纵location.hash，您希望拥有一个谨慎的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's hashchange plugin会让后者变得轻而易举。

Answer 2

查看book.cakephp.org等网站。此站点在不使用哈希值的情况下更改URL并使用AJAX。我不确定它是如何完成的，但我一直试图解决它。如果有人知道，请告诉我。

在查看某个项目中的导航时也是github.com。

Answer 3

当使用Ajax时，作者不太可能想要重新加载或重定向他的访问者。但为什么不使用HTML5的pushState / replaceState？

您可以根据需要修改地址栏。 Get natural looking urls, with 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

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

Answer 5

SWFAddress适用于Flash＆amp; Javascript项目，允许您创建可收藏的URL（使用上面提到的哈希方法），并为您提供后台按钮支持。

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

Answer 6

window.location.hash方法是首选方法。有关如何执行此操作的说明， Ajax Patterns - Unique URLs

YUI将此模式的实现作为一个模块，其中包括用于获取后退按钮的IE特定工作，以及使用散列重写地址。 YUI Browser History Manager

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

IE需要基于iframe的黑客攻击，其中Firefox将使用相同的方法生成双重历史记录。

Answer 7

如果OP或其他人仍在寻找修改浏览器历史记录以启用状态的方法，那么使用pushState和replaceState，正如IESUS所建议的那样，现在是“正确”的方法。它比location.hash的主要优势似乎是它创建了实际的网址，而不仅仅是哈希。如果保存使用哈希的浏览器历史记录，然后在禁用javascript的情况下重新访问，则应用程序将无法运行，因为哈希值不会发送到服务器。但是，如果使用了pushState，则整个路由将被发送到服务器，然后您可以构建该服务器以适当地响应路由。我看到了一个示例，其中在服务器端和客户端都使用了相同的胡子模板。如果客户端启用了javascript，他会通过避免到服务器的往返来获得快速响应，但是如果没有javascript，应用程序将完美运行。因此，在没有javascript的情况下，应用程序可以优雅地降级。

另外，我相信有一些框架，名称像history.js。对于支持HTML5的浏览器，它使用pushState，但如果浏览器不支持，则会自动回退到使用哈希值。

Answer 8

检查用户是否在页面中，当您点击网址栏时，javascript表示您不在页面中。如果您更改了网址栏并按下“确认”并在其中输入符号“＃”，那么您再次进入该页面，而不是使用鼠标光标手动单击页面，然后来自javascript的键盘事件命令（document.onkeypress）将能够检查它是否输入并激活javascript以进行重定向。您可以使用window.onfocus检查用户是否在页面中，并检查他是否已使用window.onblur。

是的，这是可能的。

）

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

8 个答案: