一些網站頭尾內容都是一樣的，重新整理總顯得浪費。從體驗上講，點選導航，右側Ajax區域性重新整理是更優的策略。

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

我的策略如下：

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

1. history.pushState
菊花插一刀之意，用法舉例：
history.pushState({}, “頁面標題”, “xxx.html”);

2. history.replaceState
換把菊花刀之意，用法舉例：
history.replaceState(null, “頁面標題”, “xxx.html”);

3. window.onpopstate
在菊花刀拔插的時候……，用法舉例：
window.addEventListener(“popstate”, function() {
var currentState = history.state;
/*
* 該幹嘛幹嘛
*/
});