javascript - Questions about ajax back page and history?

Question

After checking a lot of information, it seems that ajax is used to partially refresh to another page, that is, there are two html files, and the window.onpopstate and history.pushState methods are used to save the history and roll back the page. I would like to ask how to implement the browser's backend if using ajax or generating data on the current page...

PHP中文网 · Answer

ajax compatible with history

A major pain point of ajax is that it cannot support browser forward and backward operations. Therefore, early Gmail used iframe to simulate ajax forward and backward operations.

Nowadays, H5 is popular and pjax is very popular. Pajax is a technology combined with ajax+history.pushState. Using it, you can change the page content by going forward and back through the browser without refreshing.

Check the compatibility first.

	IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Chrome for Android
pushState/replaceState	10	12	4	5	6	11.5	7.1	4.3	53
history.state	10		4	18	6	11.5

It can be seen that IE8 and 9 cannot use H5 history. You need to use the shim HTML5 History API expansion for browsers not supporting pushState, replaceState.

pjax

pjax is easy to use and only requires the following three APIs:

history.pushState(obj, title, url) means adding a history entry to the end of the page history. At this time, history.length will be +1.
history.replaceState(obj, title, url) means replacing the current history item with a new history item. At this time, history.length remains unchanged.
window.onpopstate is only triggered when the browser moves forward and backward (history.go(1), history.back() and location.href="xxx" will all trigger), and can be obtained in history.state at this time The state just inserted is the obj object (other data types are also acceptable).

We noticed that when entering a page for the first time, history.length 值为1, history.state is empty. As follows:

1) In order to get history.state every time in the onpopstate event callback, you need to automatically replace the current url after the page is loaded.

history.replaceState("init", title, "xxx.html?state=0");

2) Every time an ajax request is sent, after the request is completed, the following is called to advance the browser history.

history.pushState("ajax请求相关参数", title, "xxx.html?state=标识符");

3) When the browser moves forward and backward, the popstate event will be automatically triggered. At this time, we manually take out popstate 事件会自动触发, 此时我们手动取出 history.state, build the parameters and resend the ajax request or directly use the state value to restore the page without refreshing. .

window.addEventListener("popstate", function(e) {
    var currentState = history.state;
    //TODO 拼接ajax请求参数并重新发送ajax请求, 从而回到历史页面
      //TODO 或者从state中拿到关键值直接还原历史页面
});

popstate 事件触发时, 默认会传入 PopStateEvent Event object. This object has the following properties.

If you don’t understand, please go to: Ajax and history compatibility for more detailed explanation