pushState實現Ajax無重新整理頁面切換_AJAX相關

前言

這樣的需求很常見：點擊頁碼局部更新頁面（非整體重新整理），並且產生曆史管理。局部重新整理很容易實現，ajax可以滿足我們的需要，但是這並不會產生曆史管理，好在html5給我們提供了幾個好用的api方便解決這個問題，見下文。

本文

一、API

1、pushState

pushState()有三個參數：一個狀態物件、一個標題（現在會被忽略），一個可選的URL地址。
state：與要跳轉到的URL對應的狀態資訊。
title：Null 字元串（以後可能有用）。
url：要跳轉到的URL地址，不能跨域。

作用：將當前URL和history.state加入到history中，並用新的state和URL替換當前。不會造成頁面重新整理。

2、replaceState

history.replaceState()操作類似於history.pushState()，不同之處在於replaceState()方法會修改當前記錄條目而並非建立新的條目。

3、window.onpopstate

history.go和history.back（包括使用者按瀏覽器曆史前進後退按鈕）觸發，並且頁面無刷的時候（由於使用pushState修改了history）會觸發popstate事件，事件發生時瀏覽器會從history中取出URL和對應的state對象替換當前的URL和history.state。通過event.state也可以擷取history.state。

二、實現

情境很簡單，點擊按鈕下面的div中出現不同的圖片及標題，使用ajax重新整理，並且產生曆史管理。

<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><div>  <img />  <p class="title"></p></div>

核心代碼

  function setUrl(page){    var url = location.pathname + '?page=' + page;    history.pushState({      url : url    },'',url);  }//每次點擊按鈕的時候就往記錄裡面增加一個條目

注意首次載入的時候需要首次載入替換一下記錄

  (function(){    //預設顯示第一頁    var url = location.pathname + '?page=1';    //修改當前的記錄    history.replaceState({      url : url    },'',url);   })()

監聽window的popstage事件，事件發生時取到當前曆史對應的頁碼，然後執行ajax

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

大體的骨架就是這樣。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。