主頁(yè) > 知識(shí)庫(kù) > pushState實(shí)現(xiàn)Ajax無(wú)刷新頁(yè)面切換

pushState實(shí)現(xiàn)Ajax無(wú)刷新頁(yè)面切換

熱門標(biāo)簽:上海企業(yè)外呼系統(tǒng)價(jià)錢 電銷機(jī)器人 長(zhǎng)春 立陶宛地圖標(biāo)注 大眾點(diǎn)評(píng)400電話怎么申請(qǐng) 河間市地圖標(biāo)注app 東平縣地圖標(biāo)注app 地圖標(biāo)注推銷坑人 怎樣在地圖標(biāo)注文字 中國(guó)地圖標(biāo)注不明確情況介紹表

前言

這樣的需求很常見:點(diǎn)擊頁(yè)碼局部更新頁(yè)面(非整體刷新),并且產(chǎn)生歷史管理。局部刷新很容易實(shí)現(xiàn),ajax可以滿足我們的需要,但是這并不會(huì)產(chǎn)生歷史管理,好在html5給我們提供了幾個(gè)好用的api方便解決這個(gè)問題,見下文。

正文

一、API

1、pushState

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

作用:將當(dāng)前URL和history.state加入到history中,并用新的state和URL替換當(dāng)前。不會(huì)造成頁(yè)面刷新。

2、replaceState

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

3、window.onpopstate

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

二、實(shí)現(xiàn)

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

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);
  }
//每次點(diǎn)擊按鈕的時(shí)候就往歷史記錄里面增加一個(gè)條目

注意首次載入的時(shí)候需要首次載入替換一下歷史記錄

  (function(){
    //默認(rèn)顯示第一頁(yè)
    var url = location.pathname + '?page=1';
    //修改當(dāng)前的歷史記錄
    history.replaceState({
      url : url
    },'',url); 
  })()

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

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

大體的骨架就是這樣。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:
  • pushState、replaceState、onpopstate 實(shí)現(xiàn)Ajax頁(yè)面的前進(jìn)后退刷新
  • 使用Yii整合的pjax(pushstate+ajax)實(shí)現(xiàn)無(wú)刷新加載頁(yè)面
  • 使用ajax和history.pushState無(wú)刷新改變頁(yè)面URL示例
  • 使用ajax實(shí)現(xiàn)無(wú)刷新改變頁(yè)面內(nèi)容和地址欄URL
  • 基于iframe實(shí)現(xiàn)類似于ajax的頁(yè)面無(wú)刷新
  • ajax頁(yè)面無(wú)刷新 IE下遭遇Ajax緩存導(dǎo)致數(shù)據(jù)不更新的問題
  • Ajax無(wú)刷新Url提交頁(yè)面
  • JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn)
  • PHP Ajax實(shí)現(xiàn)頁(yè)面無(wú)刷新發(fā)表評(píng)論
  • PHP Ajax實(shí)現(xiàn)頁(yè)面無(wú)刷新發(fā)表評(píng)論

標(biāo)簽:益陽(yáng) 銅川 遼寧 營(yíng)口 內(nèi)江 本溪 四川 玉樹

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《pushState實(shí)現(xiàn)Ajax無(wú)刷新頁(yè)面切換》,本文關(guān)鍵詞  pushState,實(shí)現(xiàn),Ajax,無(wú),刷新,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《pushState實(shí)現(xiàn)Ajax無(wú)刷新頁(yè)面切換》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于pushState實(shí)現(xiàn)Ajax無(wú)刷新頁(yè)面切換的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章