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

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

分享到：

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

在良品鋪?zhàn)由芷谙到y(tǒng)開發(fā)中，遇到過這樣一種情況，我們使用ajax來加載不同標(biāo)簽頁的數(shù)據(jù)，用戶在使用的時(shí)候想用前進(jìn)后退來切換標(biāo)簽頁，發(fā)現(xiàn)直接退出了當(dāng)前功能，于是向我們反饋了這一問題。確實(shí)，在用戶使用中，不同標(biāo)簽頁的切換對(duì)于他們來說是意味著不同的頁面，自然而然會(huì)想前進(jìn)后退來切換，但是實(shí)際中ajax是無法前進(jìn)后退的，便造成很糟糕的體驗(yàn)，比如填好的表單后退后全部消失，查詢好的數(shù)據(jù)后退一下又需要重新查詢。

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

我們先來回顧一下現(xiàn)有html規(guī)范中，history對(duì)象的三個(gè)方法：

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

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

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

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

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

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

// 當(dāng)前的url為：http://www.example.com/demo.html

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

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

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

//@可選的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);

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

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

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

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

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

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

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

頁面部分:

Js代碼：

效果截圖:

可以看到，瀏覽器里面的鏈接變?yōu)閡rl+#+頁碼，這個(gè)時(shí)候可以通過前進(jìn)后退來觸發(fā)onpopstate 來實(shí)現(xiàn)ajax加載不同頁面的數(shù)據(jù)，監(jiān)聽事件觸發(fā)后可以根據(jù)json對(duì)象和鏈接里的參數(shù)來進(jìn)行不同的處理，以達(dá)到切換標(biāo)簽的效果，用戶體驗(yàn)時(shí)的感覺和前進(jìn)后退是沒有任何差異的，由于沒有刷新頁面，體驗(yàn)甚至?xí)谩?/span>

至此，問題得到圓滿解決。