国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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.

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請求相關(guān)參數(shù)", title, "xxx.html?state=標(biāo)識(shí)符");

3) When the browser moves forward and backward, the popstate event will be automatically triggered. At this time, we manually take out popstate 事件會(huì)自動(dòng)觸發(fā), 此時(shí)我們手動(dòng)取出 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請求參數(shù)并重新發(fā)送ajax請求, 從而回到歷史頁面
      //TODO 或者從state中拿到關(guān)鍵值直接還原歷史頁面
});

popstate 事件觸發(fā)時(shí), 默認(rèn)會(huì)傳入 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