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 ?
8 个解决方案
#1
116
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 discreet URL. For example, if your page's url is:
这样做的方法是操作位置。当AJAX更新时，散列将导致状态更改，您希望使用谨慎的URL。例如，如果您的页面的url是:
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:
然后将浏览器中显示的URL更新为:
http://example.com/ foo
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 plugin makes the latter a breeze if you're using jQuery.
如果你使用的是jQuery，本·阿尔曼的hashchange插件可以让后者轻松一些。
#2
18
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这样的网站。该站点不使用哈希并使用AJAX更改URL。我不知道具体是怎么做的，但我一直在想办法。如果有人知道，请告诉我。
Also github.com when looking at a navigating within a certain project.
还有github.com在一个特定项目的导航。
#3
17
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/
#4
12
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.
第一种方法将新状态视为一个新位置(因此back按钮将它们带到先前的位置)。后者不。
#5
3
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(使用上面提到的散列方法)，并提供后退按钮支持。
http://www.asual.com/swfaddress/
http://www.asual.com/swfaddress/
#6
3
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。哈希方法是首选的处理方法。要了解如何做到这一点，请参阅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将此模式的实现作为一个模块，其中包括用于获取back按钮以及使用散列重写地址的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的黑客，Firefox将使用相同的方法生成双重历史。
#7
3
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或其他人仍在寻找一种方法来修改浏览器历史以启用状态，那么使用pushState和replaceState (IESUS建议的)就是现在的“正确”方法。这是相对于地理位置的主要优势。哈希似乎是创建实际的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，但是如果浏览器不支持，它会自动返回到使用散列。
#8
2
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会说你不在页面上。如果你改变地址栏,按下“输入”中的符号“#”然后你再进入页面,无需点击页面手动鼠标光标,然后keyboad事件命令(document.onkeypress)从javascript将能够检查如果是输入和活跃的javascript重定向。您可以用窗口检查用户是否在页面中。onfocus检查他是否有windows。onblur的。
Yeah, it's possible.
是的,这是可能的。
;)
,)
#1
116
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 discreet URL. For example, if your page's url is:
这样做的方法是操作位置。当AJAX更新时，散列将导致状态更改，您希望使用谨慎的URL。例如，如果您的页面的url是:
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:
然后将浏览器中显示的URL更新为:
http://example.com/ foo
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 plugin makes the latter a breeze if you're using jQuery.
如果你使用的是jQuery，本·阿尔曼的hashchange插件可以让后者轻松一些。
#2
18
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这样的网站。该站点不使用哈希并使用AJAX更改URL。我不知道具体是怎么做的，但我一直在想办法。如果有人知道，请告诉我。
Also github.com when looking at a navigating within a certain project.
还有github.com在一个特定项目的导航。
#3
17
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/
#4
12
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.
第一种方法将新状态视为一个新位置(因此back按钮将它们带到先前的位置)。后者不。
#5
3
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(使用上面提到的散列方法)，并提供后退按钮支持。
http://www.asual.com/swfaddress/
http://www.asual.com/swfaddress/
#6
3
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。哈希方法是首选的处理方法。要了解如何做到这一点，请参阅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将此模式的实现作为一个模块，其中包括用于获取back按钮以及使用散列重写地址的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的黑客，Firefox将使用相同的方法生成双重历史。
#7
3
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或其他人仍在寻找一种方法来修改浏览器历史以启用状态，那么使用pushState和replaceState (IESUS建议的)就是现在的“正确”方法。这是相对于地理位置的主要优势。哈希似乎是创建实际的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，但是如果浏览器不支持，它会自动返回到使用散列。
#8
2
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会说你不在页面上。如果你改变地址栏,按下“输入”中的符号“#”然后你再进入页面,无需点击页面手动鼠标光标,然后keyboad事件命令(document.onkeypress)从javascript将能够检查如果是输入和活跃的javascript重定向。您可以用窗口检查用户是否在页面中。onfocus检查他是否有windows。onblur的。
Yeah, it's possible.
是的,这是可能的。
;)
,)