pushState+Ajax realizes page switching without refreshing

This time I will bring you pushState+Ajax to achieve page switching without refreshing, and pushState+Ajax to achieve page switching without refreshing. What are the things to note?The following is a practical case, let's take a look.

Preface

Such requirements are very common: click on the page number to partially update the page (not refresh as a whole), and generate historical management. Partial refresh is easy to implement. Ajax can meet our needs, but this does not produce historical management. Fortunately, HTML5 provides us with several useful APIs to solve this problem, see below.

Text

1. API

1. pushState

pushState () takes three parameters: a state object, a title (now ignored), and an optional URL address.
state: State information corresponding to the URL to be jumped to.
title: Empty String (may be useful in the future).
url: URL address to jump to, cannot cross domain.

Function: Add the current URL and history.state to history, and replace the current one with the new state and URL. It will not cause the page to refresh.

2. replaceState

The history.replaceState() operation is similar to history.pushState(), except that the replaceState() method will modify the current history entry instead of creating a new entry.

3, window.onpopstate

history.go and history.back (including the user pressing the browser history forward and back buttons) are triggered, and the page is not refreshed (due to the use of pushState to modify the history ) will trigger the popstate event. When the event occurs, the browser will take out the URL and the corresponding state object from the history to replace the current URL and history.state. History.state can also be obtained through event.state.

2. It is very simple to realize the

scenario. Different pictures and titles will appear in the p below the button. Use ajax to refresh and generate history management.

<p class="page">
  <a href="javascript:;">[ <span>1</span> ]</a>
  <a href="javascript:;">[ <span>2</span> ]</a>
  <a href="javascript:;">[ <span>3</span> ]</a>
  <a href="javascript:;">[ <span>4</span> ]</a>
</p>
<p>
  <img />
  <p class="title"></p>
</p>

Core code

  function setUrl(page){
    var url = location.pathname + '?page=' + page;
    history.pushState({
      url : url
    },'',url);
  }
//每次点击按钮的时候就往历史记录里面增加一个条目

Note that when loading for the first time, you need to load and replace the history record

  (function(){
    //默认显示第一页
    var url = location.pathname + '?page=1';
    //修改当前的历史记录
    history.replaceState({
      url : url
    },'',url); 
  })()

Listen to the popstage event of the window and get the current history when the event occurs Corresponding page number, and then execute ajax

  window.addEventListener('popstate',function(){
    var page = getPage();
    xhr(page);
  })

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to implement AJAX request array

How to clear the cache in Ajax

The above is the detailed content of pushState+Ajax realizes page switching without refreshing. For more information, please follow other related articles on the PHP Chinese website!