Pushstate, replacestate, onpopustate realize the forward and backward refresh of ajax page

Time:2020-3-11

With Ajax, you can get data asynchronously and render pages more efficiently.

But there are also some problems:

Refresh the page again, and the page will become the initial state

Browser forward and backward function is invalid

Unfriendly crawling to search engine

1、

We will use the browser’s hash anchor earlier to solve this problem

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

Then monitor the change of hash anchor point through onhashchange event, and manually carry out forward and backward operations. Browser support

2、

Then there is a hashbang technology, that is to add the mark ා / mypath after the URL to solve the above problems

Define a page part through a path, which is often seen in single page applications (encapsulated in angular). But it seems that only Google really supports crawling this path

3、

The new features of HTML5 help to solve the above three problems through pushstate and replacestate, two new history methods, and the window event of onpopustate

Of course, because of the new features of HTML5, it is not well supported in the old version of browsers. It is recommended to use hashbang method for compatibility

This article mainly talks about pushstate

The text is too boring. First look at the diagram and feel it directly

The purpose of this chestnut is: the initial value is 0. Through asynchronous request self increment, you can move forward or backward and refresh. After a new URL is opened, you can also get the corresponding data


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

State is a JSON object. You can store some data by yourself. The title is the corresponding tag title of the URL (although it seems that the browser has ignored this parameter)

URL is the tag URL of a page (the operation will only change the URL of the address bar, and it will not load the URL immediately. You can simply tag? W = a, ajaxpage. HTML / w = a, & W = a, just a kind of tag. When you take a value, you can reference it.)

The difference between replacestate and pushstate is that the former directly replaces the current value, and the latter just presses a value into the stack

After the window.onpoppstate event is triggered, the first JSON object of the above method can be obtained through history.state

Implementation part

HTML

<div>
< input type = "button" value = "Ajax get" >
<p>value: <span>0</span></p>
</div>

JS

var $val = $('#ajax-test-val'),
//Get tags for the current page
m = window.location.search.match(/\?val=(\d+)/);
//Enter the new page and initialize the data through 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 related values in objects
var state = {
val: newVal,
title: 'title-' + newVal,
url: '?val=' + newVal
}
//Press related values into history stack
window.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, triggering the popstate event
window.onpopstate = function() {
var state = window.history.state;
console.log(state)
//Take the value out directly, or make 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;
?>

Here, different Ajax result pages are marked with “Val = num”

Tips:

After using pushstate, the current backward and forward triggers the popstate event to get the corresponding JSON object

The data of JSON object can be customized

You can simply store related tags and send another request, or directly save the corresponding results of the tag page

With the backward operation, the address bar URL is updated, and the asynchronous data is also updated

To refresh or open a page, you need to request data according to the tags in the URL

Keep in mind that the browser does not automatically load the asynchronous content page corresponding to the URL tag. We need to get

The above are pushstate, replacestate and onpopustate introduced by Xiaobian to you to realize the forward and backward refreshing of Ajax pages, hoping to help you. If you have any questions, please leave a message to me, and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!

Recommended Today

Build HTTP service with C + + Mongoose

Mongoose source code address:https://github.com/cesanta/mo… Mongoose user manual:https://www.cesanta.com/devel… Mngoose set up HTTP service #include <string> #include “mongoose.h” using namespace std; static const char *s_http_port = “8000”; static void ev_handler(mg_connection *nc, int ev, void *ev_data) { struct http_message *hm = (struct http_message *) ev_data; if (ev == MG_EV_HTTP_REQUEST) { std::string uri; if (hm->uri.p && hm->uri.p[0] == ‘/’) […]