by zhangxinxu from http://www.
本文地址：http://www./wordpress/?p=3432

一、本文就是個實例展示

三點：

1. 我就TM想找個例子，知道如何個使用，使用語法什么的滾粗
2. 跟搜索引擎搞基
3. 自己備忘

精力總是有限的，昨天一沖動，在上海浦東外環(huán)之外訂了個90米的房子，要借錢籌首付、貸款和領(lǐng)證什么的。HTML5 history相關(guān)知識點啪啦啪啦講起來也是一條又臭又長的裹腳布，精氣神實在不夠用，這里，直接一個實例。

二、ajax載入與瀏覽器歷史的前進與后退

眾所周知，Ajax可以實現(xiàn)頁面的無刷新操作——優(yōu)點；但是，也會造成另外的問題，無法前進與后退！曾幾何時，Gmail似乎借助iframe搞定，如今，HTML5讓事情變得如同過家家般簡單。

當執(zhí)行Ajax操作的時候，往瀏覽器history中塞入一個地址（使用pushState）（這是無刷新的）；于是，返回的時候，通過URL或其他傳參，我們就可以還原到Ajax之前的模樣。

本demo所展示的就是ajax的內(nèi)容載入與地址欄的前進與后退，典型應用，對于熟悉相關(guān)知識點很有幫助。

三、demo實例

您可以狠狠地點擊這里：HTML5 history API與ajax分頁實例

demo結(jié)構(gòu)大致如下：左邊導航菜單，右側(cè)詳細內(nèi)容。

如果我們想偷懶，導航直接URL地址，點擊刷新得了。但頭尾內(nèi)容都是一樣的，刷新總顯得浪費。從體驗上講，點擊導航，右側(cè)Ajax局部刷新是更優(yōu)的策略。

Ajax局部刷新小菜，稍有經(jīng)驗都能輕松應對?，F(xiàn)在如果提出如下需求：每次ajax刷新就如果頁面刷新一樣，可以后退查看之前內(nèi)容，怎么破？

我的策略如下：

• 每次手動點擊左側(cè)的菜單，我將Ajax地址的查詢內(nèi)容(?后面的)附在demo HTML頁面地址后面，使用history.pushState塞到瀏覽器歷史中。
• 瀏覽器的前進與后退，會觸發(fā)window.onpopstate事件，通過綁定popstate事件，就可以根據(jù)當前URL地址中的查詢內(nèi)容讓對應的菜單執(zhí)行Ajax載入，實現(xiàn)Ajax的前進與后退效果。
• 頁面首次載入的時候，如果沒有查詢地址、或查詢地址不匹配，則使用第一個菜單的Ajax地址的查詢內(nèi)容，并使用history.replaceState更改當前的瀏覽器歷史，然后觸發(fā)Ajax操作。

于是，你會看到：

• 頁面首次載入，雖然我們訪問的URL的后綴是光禿禿的.html，但是，實際URL最后是：
  

  因為被history.replaceState擺了一道。

• 鼠標點擊左邊的任意一個菜單，會發(fā)現(xiàn)，右側(cè)內(nèi)容雖然是Ajax載入，但是，頁面的URL地址卻變了，例如，點擊寶山區(qū)：
  

  因為歷史記錄被history.pushState插了一刀。

• 此時，我們點擊地址欄的后退按鈕，就是這個：
  

  奇跡般的，頁面無刷新的，又回到了浦東菜單：
  

  因為window.onpopstate讓菊花刀又拔了出來。

四、其它點什么

• history.pushState
  菊花插一刀之意，用法舉例：

  history.pushState({}, "頁面標題", "xxx.html");

• history.pushStatehistory.replaceState
  換把菊花刀之意，用法舉例：

  history.replaceState(null, "頁面標題", "xxx.html");

• window.onpopstate
  在菊花刀拔插的時候……，用法舉例：

  window.addEventListener("popstate", function() {
      var currentState = history.state;
      /*
       * 該干嘛干嘛
      */											
  });

瀏覽器兼容性表：

恩，就這些！

補充于2013-06-20
@滴洋在評論中提到pjax. 那pjax是什么呢？

pjax是一種基于ajax+history.pushState的新技術(shù)，該技術(shù)可以無刷新改變頁面的內(nèi)容，并且可以改變頁面的URL。pjax是ajax+pushState的封裝，同時支持本地存儲、動畫等多種功能。目前支持jquery、qwrap、kissy等多種版本。

呀！打~~??！~~騷年，還不亮出你的菊花………………………………………………………………………………………………………………………………刀！

原創(chuàng)文章，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.]
本文地址：http://www./wordpress/?p=3432

（本篇完）