Use ajax to change page content and address bar URL without refreshing

This article mainly introduces in detail the method of using ajax and window.history.pushState to change the page content and address bar URL without refreshing. Friends who need it can refer to it

When visiting the now very popular Google Plus, Careful users may find that clicks between pages are requested asynchronously through ajax, and the URL of the page changes at the same time. And it can support the browser's forward and backward very well. People can't help but wonder, what has such a powerful function?

HTML5 references new APIs, namely history.pushState and history.replaceState. It is through this interface that the page URL can be changed without refreshing.

Differences from traditional AJAX

Traditional ajax has the following problems:

Although ajax can change the page content without refreshing, it cannot be changed Page URL

Secondly, for better accessibility, change the hash of the URL after the content changes. However, the hash method cannot handle the browser's forward and backward issues well

Some browsers have introduced the onhashchange interface, and browsers that do not support it can only periodically determine whether the hash has changed

Furthermore, the use of ajax is very unfriendly to search engines, and the areas crawled by spiders are often empty

In order to solve the problems caused by traditional ajax, a new API has been introduced in HTML5, namely: history .pushState, history.replaceState

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

pushState is to add the specified URL to the browser history, and replaceState is to replace the current URL with the specified URL.

How to call

var state = {
 title: title,
 url: options.url,
 otherkey: othervalue
};
window.history.pushState(state, document.title, url);

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

replaceState and pushState are similar and require no further explanation.

How to respond to the browser's forward and backward operations

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

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 for perfect browsing without refreshing.

Some restrictions

1. It cannot cross domain. This is inevitable. To quote a classic saying I once saw on the Internet: "If javascript can cross domain, then it can be incredible!"

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

Corresponding to some back-end processing

In this mode, in addition to currently using ajax to browse without refreshing, it is also necessary to ensure that normal browsing can also be performed after directly requesting the changed URL. , so the backend needs to handle these.

1. A special header can be sent to ajax combined with pushState, such as: setRequestHeader(‘PJAX’, ‘true’).

2. When the backend obtains the header with PJAX=true, the common parts of the page will not be output. For example: PHP can make the following judgment

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 still needs to be done when using it.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to solve the problem of ajax failure on Google Chrome browser

Based on ajax to realize click loading and more no refresh loading Go to this page

Two solutions to Ajax cross-domain problems

The above is the detailed content of Use ajax to change page content and address bar URL without refreshing. For more information, please follow other related articles on the PHP Chinese website!