Use ajax and history. pushState to change the page URL and history. pushstate

Use ajax and history. pushState to change the page URL and history. pushstate
Performance

If you use chrome or firefox to access this blog, github.com, plus.google.com, and other websites, you will find that the clicks between pages are requested asynchronously through ajax, at the same time, the page URL has changed. In addition, the browser can be well supported to move forward and backward.

What is so powerful?

The new APIs, history. pushState and history. replaceState, are referenced in HTML5. This interface allows you to do nothing to change the page URL.

 

Differences from traditional AJAX

Traditional ajax has the following problems:

1. You can refresh the page content, but cannot change the page URL.

2. For better accessibility, after the content changes, the URL hash is usually changed.

3. the hash method cannot well handle browser forward and backward issues. We have carefully developed a UI front-end framework for five years!

4. the browser then introduces the onhashchange interface. Unsupported browsers can only regularly determine whether the hash is changed.

5. However, this method is unfriendly to search engines.

6. twitter and google agreed to use it #! Xxx (that is, the first character of hash is !), Search engine support.

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 Use

. Code

1. <Strong style = "border-color: initial; border-width: 0px; padding: 0px; margin: 0px;"> var state = {
2. Title: title,
3. Url: options. url,
4. Otherkey: othervalue
5. };
6. Window. history. pushState (state, document. title, url); </strong>

 

 

 

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

ReplaceState and pushState are similar.

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.

. Code

1. Window. addEventListener ('popstate', function (e ){
2. If (history. state ){
3. Var state = e. state;
4. // Do something (state. url, state. title );
5. }
6. }, False );

 

 

 

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

Restrictions

1. The passed URL must be in the same domain. You cannot develop a UI front-end framework for five years across domains!

2. Although the state object can store many custom attributes, it cannot store non-serialized objects, such as DOM objects.

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. Send a special header to ajax using pushState, such as 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:

. Code

1. Function is_pjax (){
2. Return array_key_exists ('HTTP _ X_PJAX ', $ _ SERVER) & $ _ SERVER ['HTTP _ X_PJAX'] = 'true ';
3. }

 

 

 

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

A jquery-based plug-in has been written for this. The following article will detail how to use pjax (ajax + pushState) for URL browsing without any changes.

How to Implement jquery ajax without refreshing the url of a new page

The browser points to the URL. As long as your URL changes, your content page will be refreshed once. Therefore, ajax can only be used for content without refreshing the content. The URL for the browser cannot, unless you divide a part into a part of the page

How does javascript change url parameters without refreshing a new page ??

You can use window. history. pushState. This method is not supported before IE9.