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

一、本文就是個(gè)實(shí)例展示

三點(diǎn)：

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

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

二、ajax載入與瀏覽器歷史的前進(jìn)與后退

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

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

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

三、demo實(shí)例

您可以狠狠地點(diǎn)擊這里：HTML5 history API與ajax分頁實(shí)例

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

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

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

我的策略如下：

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

于是，你會(huì)看到：

• 頁面首次載入，雖然我們?cè)L問的URL的后綴是光禿禿的.html，但是，實(shí)際URL最后是：
  

  因?yàn)楸?code>history.replaceState擺了一道。

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

  因?yàn)闅v史記錄被history.pushState插了一刀。

• 此時(shí)，我們點(diǎn)擊地址欄的后退按鈕，就是這個(gè)：
  

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

  因?yàn)?code>window.onpopstate讓菊花刀又拔了出來。

四、其它點(diǎn)什么

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

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

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

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

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

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

瀏覽器兼容性表：

恩，就這些！

補(bǔ)充于2013-06-20
@滴洋在評(píng)論中提到pjax. 那pjax是什么呢？

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

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

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

（本篇完）