history解決ajax出現的問題

以下內容是關於Jquery.history解決ajax的前進後退問題，詳情請見下文。

本文的前提是基於後台的，所以這裡不會考慮seo的問題。同時，基於後台的管理系統，也不需要被收藏，所以也不會考慮刷新的這種類似直接敲網址的情況！ ！ ！

事件描述：

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。

直接貼程式碼：

         (      loadData=         pageIndex:window.history.state===?1                  init:             .getData(                       getData:              that=                  type:'post'                 url:'./data/getMovices'+pageIndex+'.json'                 dataType:'json'                 async:                 success:             renderDom:              bookHtml=                 "<table>"+                 "<tr>"+                 "<th>电影</th>>"+                 "<th>导演</th>"+                 "<th>上映时间</th>"+                 "</tr>"             ( i=0;i<movies.length;i++                 bookHtml +=                     "<tr>" +                     "   <td>" + movies[i].moviesName + "</td>" +                     "   <td><a>" + movies[i].moviesEditor + "</a></td>" +                     "   <td>" + movies[i].times + "</td>" +                     "</tr>"              bookHtml+="</table>"             bookHtml +=                 "<button>上一页</button>" +                 "<button class=&#39;nextPage&#39;>下一页</button>"             $('body'          nextPage:              that=             $(document).on("click",".nextPage",                 that.pageIndex++                  window.history.pushState({page:that.pageIndex},                          window.addEventListener("popstate",          page=0         (event.state!==             page=             console.log('page:'+          console.log('page:'+          loadData.pageIndex=   })(jQuery,window,undefined);

透過直接在html頁面呼叫js檔案就可以看到運行結果。

運行結果：

這樣就可以達到透過ajax進行互動也能實現監聽前進/後台/刷新的功能了。

 附瀏覽器相容性：

#

以上是history解決ajax出現的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！