PushState, replaceState, and onpopstate are used to refresh the Ajax page forward and backward. history. replacestate

PushState, replaceState, and onpopstate are used to refresh the Ajax page forward and backward. history. replacestate

Ajax can be used to obtain data asynchronously and render pages more efficiently.

However, these problems also exist:

Refresh the page and the page will become the initial state.

The browser's forward and backward functions are invalid.

Unfriendly to crawling by search engines

1,

Previously, we will use the hash anchor of the browser to solve the problem.

Different hashes mark different parts of the page, which can correct incorrect page refresh data

Then, you can use the onhashchange event to monitor the changes of the hash anchor and manually perform the forward and backward operations. browser support

2,

Then a hashbang technology emerged, that is, adding a mark after the url #! /MyPath to solve the above problem

Defining a page part through a path can be common in a single page application (Angular has been encapsulated ). However, it seems that only google actually supports crawling the path.

3,

The new HTML5 features help solve the above three problems through the pushState and replaceState two new history methods and the onpopstate window event.

Of course, because it is a new feature of HTML5, it does not support the old version of the browser. We recommend that you use the hashbang Method for compatibility.

This article focuses on pushState.

The text is too boring. First, let's look at the illustration and try it.

The purpose of this example is: the initial value is 0. The value-added by asynchronous requests can be pushed forward, backward, and refreshed, and the corresponding data can be obtained after a new url is opened.

history.pushState(state, title, url)history.replaceState(state, title, url)

The state object is a json object and can be customized to store some data. The title is the tag title corresponding to the url (though it seems that the parameter is ignored by the browser)

The url is the markup url of a page (the operation will only change the url in the address bar and will not immediately load this url. Can I simply mark it? W=a、ajaxPage.html/w = a, & w = a, which is just a mark. When the value is set, it will be OK)

The difference between replaceState and pushState is that the former directly replaces the current value, and the latter is to insert a value to the stack.

After the window. onpopstate event is triggered, you can use history. state to obtain the first json object of the preceding method.

Implementation

HTML

<Div class = "push-state-test"> <input type = "button" id = "ajax-test-btn" value = "Ajax get"> <p> value: <span id = "ajax-test-val"> 0 </span> </p> </div>

JS

Var $ val = $ ('# ajax-test-val'), // obtain the tag m = window. location. search. match (/\? Val = (\ d +)/); // enter the page, and use the tag in the url to initialize the data if (m) {increaseVal (m [1]-1 );} // request function increaseVal (val) {$. post ('ajax-test. php', {val: val}, function (newVal) {$ val. text (newVal); // store the relevant values to the object var state = {val: newVal, title: 'title-'+ newVal, url :'? Val = '+ newVal} // press the value into the window in the history stack. history. pushState & window. history. pushState (state, state. title, state. url) ;};}$ ('# ajax-test-btn '). click (function () {increaseVal (parseInt ($ val. text (), 10);}); // the browser moves forward and backward to trigger the popstate event window. onpopstate = function () {var state = window. history. state; console. log (state) // retrieve the value directly, or send another ajax request $ val. text (state. val); window. history. replaceState & window. history. replaceState (state, state. title, state. url );};

PHP

<?php$val = $_REQUEST['val'];echo $val + 1;?>

Passed here? Val = num, marking different ajax result pages

Tips:

After pushState is used, the popstate event is triggered after the forward and backward events, and the corresponding json object is obtained.

Json object data can be customized

You can simply store the relevant tag and send a request, or directly store the results corresponding to the tag page.

The url in the address bar is updated along with the back operation, and asynchronous data is also updated.

To refresh a page or open a page, you must request data based on the tag in the url.

Remember that the browser does not automatically load the url part to mark the corresponding asynchronous content page. We need to obtain

The above is the introduction of pushState, replaceState, and onpopstate, which enables the Ajax page to be refreshed forward and backward. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!