通過history解決ajax不支持前進/後退/刷新

前言：

現在前後端基本都是通過ajax實現前後端介面數據的交互，但是，ajax有個小小的劣勢，即：不支持瀏覽器「後退」和「前進「鍵。

但是，現在我們可以通過H5的histroy屬性 解決ajax在交互請求的這個小bug。

H5增加了一個事件window.onpopstate，當用戶點擊那兩個按鈕就會觸 發這個事件。但是光檢測到這個事件是不夠的，還得能夠傳些參數，也就是說返回到之前那個頁面的時候得知道那個頁面的pageIndex。通過 history的pushState方法可以做到，pushState(pageIndex)將當前頁的pageIndex存起來，再返回到這個 頁面時獲取到這個pageIndex。

window.history.pushState描述：

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

state對象：是一個JavaScript對象，它關係到由pushState方法創建出來的新的history實體。用以存儲關於你所要插入到歷史 記錄的條目的相關信息。State對象可以是任何Json字元串。因為firefox會使用用戶的硬碟來存取state對象，這個對象的最大存儲空間為640k。如果大於這個數 值，則pushState方法會拋出一個異常。

title：firefox現在回忽略這個參數，雖然它可能將來會被使用上。而現在最安全的使用方式是傳一個空字元串，以防止將來的修改。

url：用來傳遞新的history實體的URL，瀏覽器將不會在調用pushState方法後載入這個URL。也許會過一會嘗試載入這個URL。比如在用戶重啟了瀏覽器後，新的url可以不是絕對路徑。如果是相對路徑，那麼它會相對於現有的url。新的url必須和現有的url同域，否則pushState將拋出異常。這個參數是選填的，如果為空，則會被置為document當前的url。

直接貼代碼：

1 /**
2 * Created: Aaron.
3 * address: http://www.cnblogs.com/aaron-pan/
4 */
5
6 //var pageIndex=window.history.state===null?0:window.history.state.page;
7
8 (function($,window,undefined){
9 var loadData={
10 pageIndex:window.history.state===null?1:window.history.state.page,
11 //pageIndex:0,
12 init:function{
13 this.getData(this.pageIndex);
14 this.nextPage;
15 },
16 getData:function(pageIndex){
17 var that=this;
18 $.ajax({
19 type:"post",
20 url:"./data/getMovices"+pageIndex+".json",
21 dataType:"json",
22 async:false,
23 success:function(data){
24 that.renderDom(data);
25 }
26 })
27 },
28 renderDom:function(movies){
29 var bookHtml=
30 "

>"+
33 "

"+
34 "

"+
35 "

";
36 for(var i=0;i" +
39 "

" +
40 "

" +
41 "

" +
42 "

";
43 }
44 bookHtml+="

";
45 bookHtml +=
46 "上一頁" +
47 "下一頁";
48 $("body").html(bookHtml);
49 },
50 nextPage:function{
51 var that=this;
52 $(document).on("click",".nextPage",function{
53 that.pageIndex++;
54 that.getData(that.pageIndex);
55 window.history.pushState({page:that.pageIndex},null,window.location.href);
56 //後退and刷新回到首頁 window.history.replaceState({page:that.pageIndex},null,window.location.href);
57 })
58 },
59 };
60 loadData.init;
61 window.addEventListener("popstate",function(event){
62 var page=0;
63 if(event.state!==null){
64 page=event.state.page;
65 console.log("page:"+page);
66 }
67 console.log("page:"+page);
68 loadData.getData(page);
69 loadData.pageIndex=page;
70 })
71
72 })(jQuery,window,undefined);

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！