国产精品亚洲成在人线_又大又粗又猛免费视频_国产免费福利在线视频_美女禁区A级全片免费观看

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

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

分享到：

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

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

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

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

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

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

還有一個搭配使用的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這個三個新的api的詳細(xì)介紹。

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

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

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

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

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

//@可選的url：瀏覽器不會檢查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不會在window.history里新增歷史記錄點(diǎn)，其效果類似于window.location.replace(url)，都是不會在歷史記錄點(diǎn)里新增一個記錄點(diǎn)的。當(dāng)你為了響應(yīng)用戶的某些操作，而要更新當(dāng)前歷史記錄條目的狀態(tài)對象或URL時，使用replaceState()方法會特別合適。

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

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

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

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

頁面部分:

Js代碼：

效果截圖:

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

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