当前位置：文江博客话题详情

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

发布于 2024-07-04 15:10:41 字数 140 浏览 15 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

￡噩梦荏苒 2024-07-11 15:10:41

查看 book.cakephp.org 等网站。该站点更改 URL 时不使用哈希并使用 AJAX。我不确定它到底是如何做到的，但我一直在努力弄清楚。如果有人知道，请告诉我。

当查看某个项目内的导航时，也可以访问 github.com。

回复收藏 0 原文

与酒说心事 2024-07-11 15:10:41

检查用户是否“在”页面中，当您单击 URL 栏时，JavaScript 表示您已离开页面。
如果您更改 URL 栏并按其中包含符号“#”的“ENTER”，然后再次进入该页面，而不用鼠标光标手动单击该页面，则来自 JavaScript 的键盘事件命令（document.onkeypress）将能够检查是否已输入并激活 JavaScript 进行重定向。
您可以使用 window.onfocus 检查用户是否在页面中，并使用 window.onblur 检查用户是否在页面外。

是的，这是可能的。

;)

回复收藏 0 原文

初吻给了烟 2024-07-11 15:10:41

实现此目的的方法是，当 AJAX 更新导致状态更改（您希望拥有离散 URL）时，操作 location.hash。例如，如果您的页面网址是：

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 插件使后者变得轻而易举。

The way to do this is to manipulate location.hash when AJAX updates result in a state change that you'd like to have a discrete URL. For example, if your page's url is:

http://example.com/

If a client side function executed this code:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

Then, the URL displayed in the browser would be updated to:

http://example.com/#foo

This allows users to bookmark the "foo" state of the page, and use the browser history to navigate between states.

With this mechanism in place, you'll then need to parse out the hash portion of the URL on the client side using JavaScript to create and display the appropriate initial state, as fragment identifiers (the part after the #) are not sent to the server.

Ben Alman's hashchange plugin makes the latter a breeze if you're using jQuery.

回复收藏 0 原文

不如归去 2024-07-11 15:10:41

这和凯文说的很相似。您可以将客户端状态作为某个 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

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

This is similar to what Kevin said. You can have your client state as some javascript object, and when you want to save the state, you serialize the object (using JSON and base64 encoding). You can then set the fragment of the href to this string.

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

The first way will treat the new state as a new location (so the back button will take them to the previous location). The latter does not.

回复收藏 0 原文

浮光之海 2024-07-11 15:10:41

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

您可以根据需要修改地址栏。使用 AJAX 获取看起来自然的网址。

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

回复收藏 0 原文

碍人泪离人颜 2024-07-11 15:10:41

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

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

回复收藏 0 原文