這次為大家帶來pushState+Ajax實現無刷新的頁面切換，pushState+Ajax實現無刷新頁面切換的注意事項有哪些，下面就是實戰案例，一起來看一下。
前言
這樣的需求很常見：點選頁碼局部更新頁面（非整體刷新），並且產生歷史管理。局部刷新很容易實現，ajax可以滿足我們的需要，但是這並不會產生歷史管理，好在html5給我們提供了幾個好用的api方便解決這個問題，見下文。
正文
一、API
#1、pushState
pushState ()有三個參數：一個狀態物件、一個標題（現在會被忽略），一個可選的URL位址。
state：與要跳到的URL對應的狀態資訊。
title：空字串（以後可能有用）。
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。
二、實作
場景很簡單，點擊按鈕下面的p中出現不同的圖片及標題，使用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> <p> <img /> <p class="title"></p> </p>
核心代碼
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);
})相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是pushState+Ajax實現無刷新的頁面切換的詳細內容。更多資訊請關注PHP中文網其他相關文章！
