大家都知道瀏覽器有一個history對象是用來保存瀏覽歷史的，比如一個窗口訪問了兩個個頁面，那么history.length屬性等于2.

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)盧龍,十年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

history api在H5時代新增了兩個方法，pushState和replaceState

從名字就可以知道一個是新增一條記錄一個是改變當前那么記錄。

用AJAX加history做分頁的好處就是既提高了用戶體驗，支持前進后退，加快頁面加載速度又對搜索引擎十分友好

首先我們來判斷瀏覽器是否支持pushState/replaceState

if(!!(windows.history && history.pushState)){
   //支持
}else{
   //不支持
}

接著我們要給當前頁面添加一個State，添加之前先了解一下這兩個新方法

pushState和replaceState一樣有三個參數(shù)

state: 一個與指定網(wǎng)址相關(guān)的狀態(tài)對象，popstate事件觸發(fā)時，該對象會傳入回調(diào)函數(shù)。如果不需要這個對象，此處可以填null。

title：頁面的標題，但是目前所有瀏覽器都忽略這個值，因此這里可以填null/false

url：新的網(wǎng)址，為了防止惡意代碼此處必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網(wǎng)址。

replaceState與pushState不同的地方在于前是修改后者是新增。

那么現(xiàn)在就給頁面添加一個State：

history.pushState({page:"page_2.html"},"page 2","page_2.html"}

執(zhí)行這個操作后，瀏覽器URL會變成 www.website.com/page_2.html,但并不會進行跳轉(zhuǎn)，甚至不會對這個地址進行檢查是否存在。

于此同時我們通過ajax加載頁面內(nèi)容，代碼如下

$('a').on("click",function(e){
    if(!!(windows.history && history.pushState)){
        e.preventDefault()
        history.pushState({page:"page_2.html"},"page 2","page_2.html"}
        ajax(page)  //ajax代碼就省略了，無非是局部加載內(nèi)容
    }else{
        //不支持此方法
    }
})

這樣我們就完成了點擊分頁后添加state和加載頁面內(nèi)容

那當用戶點擊前進/后退，我們該怎么辦？

這時候就要用到popstate事件。

當用戶點擊前進/后退或在javascript中調(diào)用history.back/forward/go時就會觸發(fā)popstate事件

$(window).on("popstate",function(){
    ajax(page)
})

這是還要特別注意一下，在webkit瀏覽器中（最新的chrome已經(jīng)改正這個問題，大概是chrome 20版本之前會有這個問題，Safari的高版本沒測），第一次加載頁面也會觸發(fā)popstate事件，所以我們也要對第一次加載進行判斷

$(window).on("popstate",function(e){
    var first_onload = (e.originalEvent.State == null)
    if(first_onload){
        return false;
    }
    ajax(page)
})

由于我們對第一次加載添加了state等于null的判斷，所以我們必須在第一次加載改變state，否則當用戶后退到第一個頁面時state又等于null，ajax就不會執(zhí)行，頁面內(nèi)容也無法更新了

history.replaceState({{page:"page_1.html"},"page 1","page_1.html")

這樣一來，整個代碼就完成了，完整代碼如下

function Pagination(){
    $('a').on("click",function(e){
        if(!!(windows.history && history.pushState)){
            e.preventDefault()
            var page_url = $(this).attr("page_url")//獲取page信息，根據(jù)你的需要而變
            history.pushState({page: page_url},false,page_url)
            ajax(page_url)  //ajax代碼就省略了，無非是局部加載內(nèi)容
        }else{
            //不支持此方法
        }
    })
    
    $(window).on("popstate",function(e){
        var first_onload = (e.originalEvent.State == null)
        if(first_onload){
            history.replaceState({page: window.location.href},page: document.title,page: window.location.href) //給第一次加載改變state，也可以寫到函數(shù)的最后
            return false;
        }
        var page_url = $(this).attr("page_url")//獲取page信息，根據(jù)你的需要而變
        ajax(page_url)
    })
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

名稱欄目：采用AJAX+historyapi做無刷新頁面的分頁-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://aaarwkj.com/article18/codjgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、定制開發(fā)、域名注冊、網(wǎng)站設(shè)計公司、微信公眾號、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)