修改 AJAX 应用程序中的地址栏 URL 以匹配当前状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modify Address Bar URL in AJAX App to Match Current State
提问by jasonjwwilliams
I'm writing an AJAX app, but as the user moves through the app, I'd like the URL in the address bar to update despite the lack of page reloads. Basically, I'd like for them to be able to bookmark at any point and thereby return to the current state.
我正在编写一个 AJAX 应用程序，但是当用户在应用程序中移动时，尽管没有页面重新加载，我还是希望地址栏中的 URL 更新。基本上，我希望他们能够在任何时候添加书签，从而返回到当前状态。
How are people handling maintaining RESTfulness in AJAX apps?
人们如何在 AJAX 应用程序中维护 REST 性？
采纳答案by Dave Ward
The way to do this is to manipulate location.hashwhen AJAX updates result in a state change that you'd like to have a discrete URL. For example, if your page's url is:
这样做的方法是location.hash在 AJAX 更新导致状态更改时进行操作，您希望具有离散 URL。例如，如果您的页面的 url 是：
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:
然后，浏览器中显示的 URL 将更新为：
This allows users to bookmark the "foo" state of the page, and use the browser history to navigate between states.
这允许用户为页面的“foo”状态添加书签，并使用浏览器历史记录在状态之间导航。
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.
有了这种机制，您就需要在客户端使用 JavaScript 解析出 URL 的哈希部分以创建和显示适当的初始状态，因为片段标识符（# 之后的部分）不会发送到服务器。
Ben Alman's hashchange pluginmakes the latter a breeze if you're using jQuery.
如果您使用 jQuery，Ben Alman 的 hashchange 插件使后者变得轻而易举。
回答by daniel.wright
Look at sites like book.cakephp.org. This site changes the URL without using the hash and use AJAX. I'm not sure how it does it exactly but I've been trying to figure it out. If anyone knows, let me know.
看看像 book.cakephp.org 这样的网站。该站点在不使用哈希的情况下更改 URL 并使用 AJAX。我不确定它是如何做到的，但我一直在努力弄清楚。如果有人知道，请告诉我。
Also github.com when looking at a navigating within a certain project.
在查看某个项目中的导航时，还有 github.com。
回答by iesus
It is unlikely the writer wants to reload or redirect his visitor when using Ajax.
But why not use HTML5's pushState/replaceState?
作者不太可能在使用 Ajax 时重新加载或重定向他的访问者。但是为什么不使用 HTML5 的pushState/replaceState呢？
You'll be able to modify the addressbar as much as you like. Get natural looking urls, with AJAX.
您可以随意修改地址栏。使用 AJAX 获取自然的 url。
Check out the code on my latest project: http://iesus.se/
查看我最新项目的代码：http: //iesus.se/
回答by iesus
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.
这与凯文所说的相似。您可以将您的客户端状态作为某个 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
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.
第一种方法将新状态视为新位置（因此后退按钮会将它们带到以前的位置）。后者没有。
回答by Neil
If OP or others are still looking for a way to do modify browser history to enable state, using pushState and replaceState, as suggested by IESUS, is the 'right' way to do it now. It's main advantage over location.hash seems to be that it creates actual urls, not just hashes. If browser history using hashes is saved, and then revisited with javascript disabled, the app won't work, since the hashes aren't sent to the server. However, if pushState has been used, the entire route will be sent to the server, which you can then build to respond appropriately to the routes. I saw an example where the same mustache templates were used on both the server and the client side. If the client had javascript enabled, he would get snappy responses by avoiding the roundtrip to the server, but the app would work perfectly fine without the javascript. Thus, the app can gracefully degrade in the absence of javascript.
如果 OP 或其他人仍在寻找修改浏览器历史记录以启用状态的方法，那么按照 IESUS 的建议，使用 pushState 和 replaceState 是现在执行此操作的“正确”方法。与 location.hash 相比，它的主要优势似乎是它创建了实际的 url，而不仅仅是哈希。如果保存了使用哈希的浏览器历史记录，然后在禁用 javascript 的情况下重新访问，则该应用程序将无法运行，因为哈希不会发送到服务器。但是，如果使用了 pushState，则整个路由将发送到服务器，然后您可以构建该服务器以适当地响应路由。我看到了一个示例，其中在服务器端和客户端都使用了相同的 mustache 模板。如果客户端启用了 javascript，他将通过避免往返服务器来获得快速响应，但如果没有 javascript，该应用程序也能正常运行。因此，应用程序可以在没有 javascript 的情况下优雅地降级。
Also, I believe there is some framework out there, with a name like history.js. For browsers that support HTML5, it uses pushState, but if the browser doesn't support that, it automatically falls back to using hashes.
此外，我相信那里有一些框架，其名称类似于 history.js。对于支持 HTML5 的浏览器，它使用 pushState，但如果浏览器不支持，它会自动回退到使用哈希。
回答by Neil
SWFAddress works in Flash & Javascript projects and lets you create bookmarkable URLs (using the hash method mentioned above) as well as giving you back-button support.
SWFAddress 适用于 Flash 和 Javascript 项目，并允许您创建可添加书签的 URL（使用上述哈希方法）以及为您提供后退按钮支持。
回答by Neil
The window.location.hash method is the preferred way of doing things. For an explanation of how to do it, Ajax Patterns - Unique URLs.
window.location.hash 方法是首选的处理方式。有关如何执行此操作的说明，请 参阅 Ajax 模式 - 唯一 URL。
YUI has an implementation of this pattern as a module, which includes IE specific work arounds for getting the back button working along with re-writing the address using the hash. YUI Browser History Manager.
YUI 将此模式的实现作为一个模块，其中包括 IE 特定的变通方法，用于使后退按钮与使用哈希重写地址一起工作。YUI 浏览器历史记录管理器。
Other frameworks have similar implementations as well. The important point is if you want the history to work along with the re-writing the address, the different browsers need different ways of handling it. (This is detailed in the first link article.)
其他框架也有类似的实现。重要的一点是，如果您希望历史记录与重写地址一起工作，则不同的浏览器需要不同的处理方式。（这在第一篇链接文章中有详细说明。）
IE needs an iframe based hack, where Firefox will produce double history using the same method.
IE 需要基于 iframe 的 hack，其中 Firefox 将使用相同的方法生成双重历史记录。
回答by Marcelo
Check if user is 'in' the page, when you click on the url bar, javascript says you are out of page. If you change the url bar and press 'ENTER' with the symbol '#' within it then you go into the page again, without click on the page manually with mouse cursor, then a keyboad event command (document.onkeypress) from javascript will be able to check if it's enter and active the javascript for redirection. You can check if user is IN the page with window.onfocus and check if he's out with window.onblur.
检查用户是否“在”页面中，当您单击 url 栏时，javascript 说您已离开页面。如果您更改 url 栏并按其中带有符号“#”的“ENTER”，那么您将再次进入该页面，而无需使用鼠标光标手动单击该页面，然后来自 javascript 的键盘事件命令 (document.onkeypress) 将能够检查它是否进入并激活用于重定向的javascript。您可以使用 window.onfocus 检查用户是否在页面中，并使用 window.onblur 检查他是否在页面中。
Yeah, it's possible.
是的，这是可能的。
;)
;)
