Using Ajax to change the page content and address bar URL without refreshing

Time:2021-3-4

When visiting the popular Google plus, careful users may find that the clicks between pages are requested asynchronously through Ajax, and the URL of the page has changed. And can well support the browser forward and backward. I can’t help asking, what has such a powerful function?

HTML5 refers to a new API, namely history.pushState and history.replaceState Through this interface, you can change the page URL without refreshing.

Difference from traditional Ajax

Traditional Ajax has the following problems:

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

Secondly, for better accessibility, after the content changes, change the hash of the URL. But hash can’t deal with the problem of browser’s forward and backward

Some browsers introduce the interface of onhashchange, and the unsupported browsers can only judge whether the hash changes regularly

Moreover, the use of AJAX is not friendly to the search engine, often the spider crawls to the area is empty

In order to solve the problems brought by traditional Ajax, a new API is introduced in HTML5 history.pushState , history.replaceState

The browser history can be operated through pushstate and replacestate interfaces, and the URL of the current page can be changed.

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

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 the configuration of sending Ajax.

Replacestate and pushstate are similar and need no more explanation.

How to respond to browser’s forward and backward operation

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

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, Ajax and pushstate can be combined to browse without refresh perfectly.

Some restrictions

1. It’s inevitable that we can’t cross domain. Quoting a classic saying once seen on the Internet: “if JavaScript can cross domain, then it can go against the sky!”

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 to browse without refreshing, we also need to ensure that the URL can be browsed normally after direct request change, so the back-end needs to process these.

1. For Ajax with pushstate, you can send a special header, such as setrequestheader (‘pjax ‘,’true’).

2. When the back-end gets a header with pjax = true, it will not output the general part of the page. For example: PHP can be judged by the following

Copy codeThe code is as follows:
function is_pjax(){
 return array_key_exists(‘HTTP_X_PJAX’, $_SERVER) && $_SERVER[‘HTTP_X_PJAX’] === ‘true’;
}

Although there are only pushstate, replacestate and onpopstate on the interface, there are still a lot of processing to do when using them.

The above is the whole content of this article, I hope you can like it.