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!