粉嫩萝控精品福利网站,日本毛片久久国产精品,日本亚洲欧洲无免费码在线,国产少妇高潮在线观看

【東網(wǎng)技術(shù)大咖】HTML5 history api搭配ajax實現(xià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ù)器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

頁面部分:

Js代碼：

效果截圖:

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

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