採用AJAX + history api做無重新整理頁面的分頁

標籤：ajax   history   分頁   無重新整理頁面   

大家都知道瀏覽器有一個history對象是用來儲存瀏覽曆史的，比如一個視窗訪問了兩個個頁面，那麼history.length屬性等於2.

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

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

用AJAX加history做分頁的好處就是既提高了使用者體驗，支援前進後退，加快頁面載入速度又對搜尋引擎十分友好

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

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

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

pushState和replaceState一樣有三個參數

state: 一個與指定網址相關的狀態物件，popstate事件觸發時，該對象會傳入回呼函數。如果不需要這個對象，此處可以填null。

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

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

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

那麼現在就給頁面添加一個State：

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

執行這個操作後，瀏覽器URL會變成 www.website.com/page_2.html,但並不會進行跳轉，甚至不會對這個地址進行檢查是否存在。

於此同時我們通過ajax載入頁面內容，代碼如下

$(‘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代碼就省略了，無非是局部載入內容    }else{        //不支援此方法    }})

這樣我們就完成了點擊分頁後添加state和載入頁面內容

那當使用者點擊前進/後退，我們該怎麼辦？

這時候就要用到popstate事件。

當使用者點擊前進/後退或在javascript中調用history.back/forward/go時就會觸發popstate事件

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

這是還要特別注意一下，在webkit瀏覽器中（最新的chrome已經改正這個問題，大概是chrome 20版本之前會有這個問題，Safari的高版本沒測），第一次載入頁面也會觸發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就不會執行，頁面內容也無法更新了

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資訊，根據你的需要而變            history.pushState({page: page_url},false,page_url)            ajax(page_url)  //ajax代碼就省略了，無非是局部載入內容        }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，也可以寫到函數的最後            return false;        }        var page_url = $(this).attr("page_url")//擷取page資訊，根據你的需要而變        ajax(page_url)    })}

本文出自 “黑暗森林” 部落格，請務必保留此出處http://mysens.blog.51cto.com/10014673/1750589

採用AJAX + history api做無重新整理頁面的分頁