pushState中怎么利用Ajax實現(xiàn)無刷新頁面切換，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專注于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計,鄢陵網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:鄢陵等地區(qū)。鄢陵做網(wǎng)站價格咨詢:18980820575

一、API

1、pushState

pushState()有三個參數(shù)：一個狀態(tài)對象、一個標題（現(xiàn)在會被忽略），一個可選的URL地址。
state：與要跳轉(zhuǎn)到的URL對應(yīng)的狀態(tài)信息。
title：空字符串（以后可能有用）。
url：要跳轉(zhuǎn)到的URL地址，不能跨域。

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

2、replaceState

history.replaceState()操作類似于history.pushState()，不同之處在于replaceState()方法會修改當前歷史記錄條目而并非創(chuàng)建新的條目。

3、window.onpopstate

history.go和history.back（包括用戶按瀏覽器歷史前進后退按鈕）觸發(fā)，并且頁面無刷的時候（由于使用pushState修改了history）會觸發(fā)popstate事件，事件發(fā)生時瀏覽器會從history中取出URL和對應(yīng)的state對象替換當前的URL和history.state。通過event.state也可以獲取history.state。

二、實現(xiàn)

場景很簡單，點擊按鈕下面的div中出現(xiàn)不同的圖片及標題，使用ajax刷新，并且產(chǎn)生歷史管理。

  [ 1 ]
  [ 2 ]
  [ 3 ]
  [ 4 ]


  
  

核心代碼

  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); 
  })()

監(jiān)聽window的popstage事件，事件發(fā)生時取到當前歷史對應(yīng)的頁碼，然后執(zhí)行ajax

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

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

網(wǎng)頁題目：pushState中怎么利用Ajax實現(xiàn)無刷新頁面切換-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://weahome.cn/article/dhjchj.html