Change page content and address bar URLs using AJAX and Window.history.pushState without refreshes

When visiting Google Plus, which is now hot, attentive users may find that clicks between pages are asynchronously requested by Ajax, while the URL of the page changes. and can support the browser's forward and backward very well. Can not help people want to ask, what is there such a powerful function?

HTML5 refers to the new API, that is, history.pushstate and history.replacestate, that is, through this interface to do no refresh to change the page URL.

The difference from the traditional Ajax

Traditional Ajax has the following problems:

Although Ajax can change the page content without refreshing, it cannot change the page URL

Second, for better accessibility, change the URL hash after the content has changed. But the hash of the way can not be very good to deal with the browser forward, backward and other issues

Some browsers introduced the Onhashchange interface, the unsupported browser can only be timed to determine whether the hash changes

Again, the use of Ajax is very unfriendly to search engines, often spiders crawl to the area is empty

In order to solve the problems caused by traditional Ajax, HTML5 introduced a new API, namely: History.pushstate, History.replacestate

The browser history can be manipulated via the pushstate and Replacestate interfaces, and the URL of the current page is changed.

Pushstate is to add the specified URL to the browser history, Replacestate replaces the specified URL with the current URL.

How to Invoke

var state = {    title:title,    url:options.url,    otherkey:othervalue}; Window.history.pushState (state, Document.title, URL);

The state object, in addition to the title and URL, can also add other data, such as: also want to send some AJAX configuration to save them.

Replacestate and Pushstate are similar and do not need to be explained more.

How to respond to a browser's forward and backward actions

The Onpopstate event is provided on the Window object, and the state object passed above becomes the sub-object of the event, so that the title and URL of the store can be obtained.

function (e) {  if  (history.state) {    var state = e.state;     // Do something (State.url, state.title); false);   

This can be combined with Ajax and Pushstate perfect for a no-refresh browsing.

Some restrictions

1, can not cross the domain, this is inevitable. Quoting a classic phrase that I once saw on the Internet: "If JavaScript can cross the domain, then he can reverse the heavens!" ”

2. Although the state object can store many custom properties, the value cannot be an object.

Some processing of the corresponding back end

In this mode, in addition to the current use of Ajax can not refresh the browser, but also to ensure that the direct request to change the URL can also be normal browsing, so the backend to these processing.

1, the combination of pushstate Ajax can send a special header, such as: setRequestHeader (' Pjax ', ' true ').

2. When the backend gets to the header with Pjax=true, it will not output the common parts of the page. For example: PHP can be judged by the following

function Is_pjax () {    return array_key_exists (' Http_x_pjax ', $_server) && $_server[' Http_x_pjax '] = = = ' true ';}

Although the interface only Pushstate, Replacestate, Onpopstate, but in the use of the time still have to do a lot of processing.

Actual case: http://www.school003.com/special/

Change page content and address bar URLs using AJAX and Window.history.pushState without refreshes