Pushstate, Replacestate, onpopstate implement AJAX page forward backward refresh _ajax related

Using AJAX, you can get data asynchronously and render the page more efficiently.

But there are also these problems:

Refresh the page, the page will become the initial state

The browser's forward back function is invalid

Crawler crawling on search engines unfriendly

1,

The hash anchor point of the browser is used to solve the problem earlier

Different hash marks the different parts of the page, can fix the problem of incorrect page refresh data

Then through the Onhashchange event to monitor the change of the hash anchor point, manual forward back operation, browser support degree

2,

Then there is a hashbang technique that addresses the above problems by adding a tag #!/mypath to the URL

Defines a page section through a path, which is often seen in a single page application (angular is already encapsulated). But it seems that only Google really supports crawling of that path.

3,

The new features of HTML5 have helped to solve these three problems through the pushstate, replacestate two new history methods and onpopstate this window event

Of course, because it is a new feature of the HTML5, in the old version of the browser support is not good, it is recommended to use the Hashbang method to be compatible

This article mainly talks about pushstate these new things

The text is too boring, first look at the diagram directly point to feel

The purpose of this chestnut is: The initial value is 0, the increment by asynchronous request, you can forward or backward and refresh, new open a URL can also get the corresponding data

History.pushstate (state, title, URL)
history.replacestate (state, title, URL)

Where state is a JSON object, can be customized to store some data, title is the URL corresponding to the label title (but as if the browser has ignored this parameter)

URL is a tag URL for a page (the operation will only change the URL of the address bar, and will not immediately load the URL, you can simply tag?) W=a, Ajaxpage.html/w=a, &w=a, just a mark, the value of a control to the line.

The difference between replacestate and Pushstate is that the former replaces the current value directly, and the latter is pressing a value into the stack

After the Window.onpopstate event is triggered, you can obtain the first JSON object of the above method via History.state

Implementation section

Html

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

Js

var $val = $ (' #ajax-test-val '),
//Get the current page's tag
m = Window.location.search.match (/\?val= (\d+)/)
; The new entry page initializes the data via the tag in the URL
if (m) {
increaseval (m[1]-1);
}
Request
function Increaseval (val) {
$.post (' ajax-test.php ', {
val:val
}, function (newval) {
$ Val.text (newval);
Store correlation value to object
var state = {
Val:newval,
title: ' title-' + newval,
url: '? val= ' + newval
}
/ /push the relevant values into the history stack
window.history.pushState && window.history.pushState (state, State.title, State.url);
});
}
$ (' #ajax-test-btn '). Click (function () {
increaseval (parseint ($val. Text ());
});
Browser's forward back, triggering popstate event
window.onpopstate = function () {
var state = window.history.state;
Console.log (state)
//Direct the value out, or send an AJAX request again
$val. Text (state.val);
Window.history.replaceState && window.history.replaceState (state, State.title, State.url);

Php

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

In this way, a different AJAX results page is marked by Val=num.

Tips:

After using Pushstate, the current forward backward triggers the Popstate event to get the corresponding JSON object

JSON object's data can be customized

You can simply store the relevant markup and then send a request, or directly save the corresponding result of the tag page

With the back operation, the Address bar URL is updated and the asynchronous data is updated

To refresh a page or to open a new page, request data based on the tag in the URL.

To keep in mind, the browser does not automatically load the URL this part of the tag corresponding to this asynchronous content page, we need to get

The above is a small set to introduce the Pushstate, Replacestate, onpopstate Ajax page to achieve the forward backward refresh, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!