Use Ajax and History.pushstate No refresh change page URL sample _ajax related

Performance

If you use Chrome or Firefox and other browsers to visit this blog, github.com, plus.google.com and other sites, careful you will find that the page between the clicks are asynchronous request through Ajax, and the page URL has changed. and can support the browser forward and backward.

What has such a powerful function?

HTML5 quotes the new api,history.pushstate and History.replacestate, is through this interface to do without refreshing change the page URL.

The difference from the traditional Ajax

Traditional Ajax has the following problems:

1, can change the content of the page without refreshing, but cannot change the page URL

2, in order to better accessibility, the content has changed, usually change the URL of the hash

3, the hash of the way can not be very good deal with the browser forward, backward and so on!

4, and then the browser introduced the Onhashchange interface, not supported by the browser can only be timed to determine whether the hash changes

5, but this way is not friendly to search engines

6, Twitter and Google agreed to use the #!xxx (that is, hash the first character for!), search engine support.

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

You can manipulate browser history through the Pushstate and Replacestate interfaces, and change the URL of the current page.

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

How to use

Copy Code code as follows:

<strong style= "border-color:initial; border-width:0px; padding:0px; margin:0px; " >var state = {
Title:title,
Url:options.url,
Otherkey:othervalue
};
Window.history.pushState (state, Document.title, URL);</strong>

In addition to the title and URL, the state object can add other data, such as: also want to save some of the configuration to send Ajax.

Replacestate and pushstate are similar, there is no more introduction.
How to respond to the browser's forward and backward operations

The Onpopstate event is provided on the Window object, and the state object passed above becomes the child object of the event, so that the title and URL of the store is available.

Copy Code code as follows:

Window.addeventlistener (' Popstate ', 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 no refresh browsing.
Some restrictions

1, the URL must be passed under the same domain, can not cross the domain

2. While the state object can store many custom properties, it cannot be stored for objects that are not serializable, such as: DOM objects.
Some processing of the corresponding back end

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

1, to use pushstate Ajax to send a special header, such as: setRequestHeader (' Pjax ', ' true ').

2, the back-end to get the header with Pjax=true, the page will not be common parts of the output. For example: PHP can be judged by the following

Copy Code code as follows:

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

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

A jquery-based plugin has been written for this, and the next article will detail how to use Pjax (ajax+pushstate) to navigate without refreshing changes to URLs.