首頁 >web前端 >js教程 >pushState+Ajax實現無刷新的頁面切換

pushState+Ajax實現無刷新的頁面切換

php中世界最好的语言
php中世界最好的语言原創
2018-04-03 10:08:152014瀏覽

這次為大家帶來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中文網其它相關文章!

推薦閱讀:

AJAX請求陣列應該如何實作

在Ajax中怎麼清除快取

以上是pushState+Ajax實現無刷新的頁面切換的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn