HTML5 modifying the browser URL without refreshing the page

Well, the cause is the uncle sunspots on the microblog of a @ information, to find the realization of this, looked at a circle of Google's Chinese information does not seem to mention this content, published.

The detailed effect is similar to the firefox4+/chrome 5+/safari 5+/opera 11.5+ login Sina Weibo to see the personal timeline, the page can be observed when the effect, the address bar URL changes, but the pages are not refreshed, Using Firebug to observe also not to refresh the entire page, only the AJAX request paging data. From the previous understanding, the URL modification must be caused (please note I am not talking about modifying the anchor point) browser reload page, but using HTML5 new history.pushstate (); and history.replacestate (); You can maintain a history list entirely by itself. The mechanism of bypassing the history completely controlled by the browser, thus achieving a more perfect than the anchor point of an in-page update experience.

The code aspect is simple, just insert a line where you need to modify the URL:

Window.history.pushState ({"HTML": response.html, "PageTitle": Response.pagetitle}, ' title ', URLPath);//three parameters, are: Status object, title (currently ignored by browser), address

You can create a new history in the history (another Replacestate method parameter is exactly the same, just replace the current state).
In the experience, it is very close to using the anchor point (window.location = "#foo"; ), but Mozilla's documentation presents the following three benefits:

• The new URL can be any URL in the same domain as the original page URL, and if you use an anchor, you can only update the part that follows #
• The URL is updated only when it is needed, and the history of the anchor point is not created at the same time (that is, if the current page anchor is set to "#foo", which will not result in a new history).
• You can record any type of data, use an anchor point to maintain a list of historical data or transcode the data into a string.

(Translation & Description is a bit awkward, laughed at, but in fact, you should be able to understand that these benefits are)

An example of my own implementation:
Http://vifix.cn/atelier/demos/html5-update-browser-url-without-reloading-page

Code:

<?phpif (!isset ($_request[' page ')) {$page = 1;} else{$page = intval ($_request[' page ');}  if (Isset ($_request[' ajaxload ')) {echo "{$page} The contents of the page";d ie;}? ><! DOCTYPE html>

Mozilla's documentation
Https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Related issues on the StackOverflow:
Http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page
Http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page

Http://vifix.cn/blog/html5-modify-browser-url-without-reloading-page.html

HTML5 modifying the browser URL without refreshing the page