然而html5的新接口pushstate / replacestate就可以比較完美的解決問題，它避免了改變hash的問題，避免了使用者不了解url的形式感到疑惑，同時還有onpopstate提供監聽，良好響應後退前進。而且它不需要這個url真實存在。
html5提供history接口，把url以state的形式添加或者替換到浏覽器中，其實作函數正是 pushstate 和 replacestate。
pushstate() 的基本參數是：
window.history.pushstate(state, title, url);
其中state和title都可以為空，但是推薦不為空，應當建立state來配合popstate監聽。
例如，我們通過pushstate現改變url而不重新整理頁面。
var state = ( { url: ~href, title: ~title, ~additionalkey: ~additionalvalue } ); window.history.pushstate(state, ~title, ~href);
其中帶有“~”符号的是自定義内容。就可以把這個~href（url）推送到浏覽器的曆史裡。如果想要改變網頁的标題，應該：
document.title= ~newtitle;
注意隻是pushstate是不能改變網頁标題的哦。
window.history.replacestate( state, ~title, ~href);
pushstate()可以建立曆史，可以配合popstate事件，而replacestate()則是替換掉目前的url，不會産生曆史。
隻能用同域的url替換，例如你不能用http://baidu.com去替換http://google.com。而且state對象不存儲不可序列化的對象如dom。
$("~target a").click(function(evt){ evt.preventdefault(); // 阻止預設的跳轉操作 var uri=$(this).attr('href'); var newtitle=ajax_load(uri); // 你自定義的ajax加載函數，例如它會傳回newtitle document.title=newtitle; // 配置設定新的頁面标題 if(history.pushstate){ var state=({ url: uri, title: newtitle }); window.history.pushstate(state, newtitle, uri); }else{ window.location.href="#!"+~fakeuri; } // 如果不支援，使用舊的解決方案 return false; function ajax_load(uri){ ... return newtitle; } // 你自定義的ajax函數，例如它會傳回newtitle
即可完成pushstate。至于新标題newtitle的擷取就是另外的問題了，例如你可以為a标簽配置設定data-newtitle=~title屬性并屆時讀取，或者如果你用的$.ajax()函數，可以用$(result).filter("title").text()來擷取。
另外如果需要對新加載的頁面的連接配接同樣使用這個ajax，則需要對新内容的a标簽重新部署，例如
$("~newcontenttarget a").click(function(evt){ ... });
想要良好的支援浏覽器的曆史前進後退操作，應當部署popstate監聽：
window.addeventlistener('popstate', function(evt){ var state = evt.state; var newtitle = ajax_load(state.url); //你自定義的ajax加載函數，例如它會傳回newtitle document.title=newtitle; }, false);
提醒，你可以通過setrequestheader()來讓伺服器端配合你的ajax請求輸出專門的内容。
這個例子的大緻過程如下圖所示
if ($.support.pjax) { $(document).on('click', 'a[data-pjax]', function(event) { var container = $(this).closest('[data-pjax-container]') $.pjax.click(event, {container: container}) });}
謝謝收看，如有不正請指出。
轉自
<a target="_blank" href="http://blog.netsh.org/posts/pushstate-ajax_1339.netsh.html">http://blog.netsh.org/posts/pushstate-ajax_1339.netsh.html</a>