Use ajax to make the page content and address bar URL unrefresh, ajaxurl

Use ajax to make the page content and address bar URL unrefresh, ajaxurl

When visiting the currently popular google plus, careful users may find that the clicks between pages are requested asynchronously through ajax, and the page URL changes. In addition, it can well support the browser's forward and backward. What is so powerful?

The new API is referenced in HTML5, that is, history. pushState and history. replaceState. Through this interface, the page URL is not changed.

Differences from traditional AJAX

Traditional ajax has the following problems:

Although ajax can not change the page content, it cannot change the page URL

Second, for better accessibility, the URL hash is changed after the content changes. However, the hash method cannot properly handle browser forward and backward issues.

Some browsers introduce the onhashchange interface. browsers that are not supported can only regularly determine whether the hash is changed.

In addition, ajax is not very friendly to search engines, and the area that crawlers usually climb to is empty.

To solve the problems brought about by traditional ajax, HTML5 introduces a new API, namely: history. pushState, history. replaceState

You can use the pushState and replaceState interfaces to operate the browser history and change the URL of the current page.

PushState adds the specified URL to the browser history. replaceState replaces the current URL with the specified URL.

How to call

Copy codeThe Code is as follows:
Var state = {
Title: title,
Url: options. url,
Otherkey: othervalue
};
Window. history. pushState (state, document. title, url );

In addition to the title and url, the state object can also add other data. For example, you also want to save some ajax sending configurations.

ReplaceState and pushState are similar and do not need to be explained.

How to respond to browser forward and backward operations

The onpopstate event is provided on the window object. The state object passed above will become the sub-object of the event, so that the stored title and URL can be obtained.

Copy codeThe Code is as follows:
Window. addEventListener ('popstate', function (e ){
If (history. state ){
Var state = e. state;
// Do something (state. url, state. title );
}
}, False );

In this way, you can combine ajax and pushState to perform a refreshing browsing.

Restrictions

1. Cross-origin is not allowed. This is inevitable. Quote a classic saying that I once saw on the Internet: "If javascript can be cross-origin, it can be reversed !"

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

Corresponding back-end Processing

In this mode, in addition to the current use of ajax, you must ensure that the URL that is directly requested to change can also be browsed normally. Therefore, the backend must process the changes.

1. You can send a special header to ajax combined with pushState, for example, setRequestHeader ('pja', 'true ').

2. When the backend obtains a header with PJAX = true, it does not output all the common parts on the page. For example, PHP can use the following judgment:

Copy codeThe Code is as follows:
Function is_pjax (){
Return array_key_exists ('HTTP _ X_PJAX ', $ _ SERVER) & $ _ SERVER ['HTTP _ X_PJAX'] = 'true ';
}

Although the interface only has pushState, replaceState, and onpopstate, a lot of processing is required during use.

The above is all the content of this article. I hope you will like it.