ajax與HTML5 history pushState/replaceState執行個體

標籤：style   blog   http   io   使用   ar   strong   div   sp   

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

一、本文就是個執行個體展示

三點：

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

精力總是有限的，昨天一衝動，在上海浦東外環之外訂了個90米的房子，要借錢籌首付、貸款和領證什麼的。HTML5 history相關知識點啪啦啪啦講起來也是一條又臭又長的裹腳布，精氣神實在不夠用，這裡，直接一個執行個體。

二、ajax載入與瀏覽器曆史的前進與後退

眾所周知，Ajax可以實現頁面的無重新整理操作——優點；但是，也會造成另外的問題，無法前進與後退！曾幾何時，Gmail似乎藉助iframe搞定，如今，HTML5讓事情變得如同過家家般簡單。

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

本demo所展示的就是ajax的內容載入與地址欄的前進與後退，典型應用，對於熟悉相關知識點很有協助。

三、demo執行個體

您可以狠狠地點擊這裡：HTML5 history API與ajax分頁執行個體

demo結構大致如下：左邊導覽功能表，右側詳細內容。

如果我們想偷懶，導航直接URL地址，點擊重新整理得了。但頭尾內容都是一樣的，重新整理總顯得浪費。從體驗上講，點擊導航，右側Ajax局部重新整理是更優的策略。

Ajax局部重新整理小菜，稍有經驗都能輕鬆應對。現在如果提出如下需求：每次ajax重新整理就如果頁面重新整理一樣，可以後退查看之前內容，怎麼破？

我的策略如下：

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

於是，你會看到：

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

   

  因為被history.replaceState擺了一道。

• 滑鼠點擊左邊的任意一個菜單，會發現，右側內容雖然是Ajax載入，但是，頁面的URL地址卻變了，例如，點擊寶山區：
  

   

  因為記錄被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;    /*     * 該幹嘛幹嘛    */});

瀏覽器安全色性表：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
replaceState, pushState	5	4.0 (2.0)	10	11.50	5.0
history.state	18	4.0 (2.0)	10	11.50	6.0

恩，就這些！

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

pjax是一種基於ajax+history.pushState的新技術，該技術可以無重新整理改變頁面的內容，並且可以改變頁面的URL。pjax是ajax+pushState的封裝，同時支援本機存放區、動畫等多種功能。目前支援jquery、qwrap、kissy等多種版本。

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

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=3432

ajax與HTML5 history pushState/replaceState執行個體