【東網(wǎng)技術(shù)大咖】HTML5 history api搭配ajax實(shí)現前進(jìn)后退

發(fā)布時(shí)間： 2017-04-01 15:16:39  

分享到：

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng )建交互式網(wǎng)頁(yè)應用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。通過(guò)在后臺與服務(wù)器進(jìn)行少量數據交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現異步更新。這意味著(zhù)可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對網(wǎng)頁(yè)的某部分進(jìn)行更新。

在良品鋪子生命周期系統開(kāi)發(fā)中，遇到過(guò)這樣一種情況，我們使用ajax來(lái)加載不同標簽頁(yè)的數據，用戶(hù)在使用的時(shí)候想用前進(jìn)后退來(lái)切換標簽頁(yè)，發(fā)現直接退出了當前功能，于是向我們反饋了這一問(wèn)題。確實(shí)，在用戶(hù)使用中，不同標簽頁(yè)的切換對于他們來(lái)說(shuō)是意味著(zhù)不同的頁(yè)面，自然而然會(huì )想前進(jìn)后退來(lái)切換，但是實(shí)際中ajax是無(wú)法前進(jìn)后退的，便造成很糟糕的體驗，比如填好的表單后退后全部消失，查詢(xún)好的數據后退一下又需要重新查詢(xún)。

那么如何解決這一問(wèn)題呢？在實(shí)際開(kāi)發(fā)中，單純使用ajax，瀏覽器地址是不會(huì )發(fā)生變化，前進(jìn)后退是無(wú)法控制標簽切換的，這個(gè)時(shí)候我們必須借助HTML5里新的history api搭配ajax來(lái)解決這個(gè)問(wèn)題。

我們先來(lái)回顧一下現有html規范中，history對象的三個(gè)方法：

使用ajax時(shí)，由于地址未發(fā)生變化，這三個(gè)api是無(wú)法進(jìn)行頁(yè)面控制的。

新的HTML5標準為我們解決了這一難題，html5標準中history對象增加了兩個(gè)方法。

還有一個(gè)搭配使用的popstate事件，用于監聽(tīng)url的變化。

pushState能改變當前url(添加新的歷史記錄點(diǎn))，popstate監聽(tīng)url的變化，瀏覽器的前進(jìn)后退改變url(在歷史記錄點(diǎn)之間切換)，三者結合便能解決ajax中前進(jìn)后退的問(wèn)題。

讓我們先來(lái)看下pushState,replaceState,popstate這個(gè)三個(gè)新的api的詳細介紹。

存儲的方式類(lèi)似于數組的入棧（Array.push()），在window.history里新增一個(gè)歷史記錄點(diǎn)，例如：

// 當前的url為：http://www.example.com/demo.html

var json={time:new Date().getTime()};

//@狀態(tài)對象：記錄歷史記錄點(diǎn)的額外對象，可以為空

//@頁(yè)面標題：目前所有瀏覽器都不支持

//@可選的url：瀏覽器不會(huì )檢查url是否存在，只改變url，url必須同域，不能跨域

window.history.pushState(json,"","http://www.example.com/demo.html#test");

var state = {title: title,

        url: options.url,

        otherkey: othervalue

};

window.history.pushState(state, document.title, url);

執行了pushState方法后，頁(yè)面的url地址為：

http://www.example.com/demo.html#test

window.history.replaceState和window.history.pushState類(lèi)似，不同之處在于replaceState不會(huì )在window.history里新增歷史記錄點(diǎn)，其效果類(lèi)似于window.location.replace(url)，都是不會(huì )在歷史記錄點(diǎn)里新增一個(gè)記錄點(diǎn)的。當你為了響應用戶(hù)的某些操作，而要更新當前歷史記錄條目的狀態(tài)對象或URL時(shí)，使用replaceState()方法會(huì )特別合適。

監聽(tīng)歷史記錄點(diǎn)，直觀(guān)的可認為是監聽(tīng)URL的變化，但會(huì )忽略URL的hash部分，可以通過(guò)window.onpopstate來(lái)監聽(tīng)url的變化，并且可以獲取存儲在該歷史記錄點(diǎn)的狀態(tài)對象，也就是上文說(shuō)到的json對象。

值得注意的是：window.history.pushState和window.history.replaceState不會(huì )觸發(fā)onpopstate事件。

了解了這三個(gè)新的api，再讓我們看看如何實(shí)際開(kāi)發(fā)中來(lái)進(jìn)行應用。

一個(gè)分頁(yè)的例子，點(diǎn)擊不同頁(yè)面使用ajax加載不同的地市編號和地市名稱(chēng)，默認加載第一頁(yè)，如果帶有頁(yè)碼n會(huì )加載第n頁(yè)的數據，前進(jìn)后退能夠在不同頁(yè)面進(jìn)行切換

頁(yè)面部分:

Js代碼：

效果截圖:

可以看到，瀏覽器里面的鏈接變?yōu)閡rl+#+頁(yè)碼，這個(gè)時(shí)候可以通過(guò)前進(jìn)后退來(lái)觸發(fā)onpopstate 來(lái)實(shí)現ajax加載不同頁(yè)面的數據，監聽(tīng)事件觸發(fā)后可以根據json對象和鏈接里的參數來(lái)進(jìn)行不同的處理，以達到切換標簽的效果，用戶(hù)體驗時(shí)的感覺(jué)和前進(jìn)后退是沒(méi)有任何差異的，由于沒(méi)有刷新頁(yè)面，體驗甚至會(huì )更好。

至此，問(wèn)題得到圓滿(mǎn)解決。