作為一個程序員，上GitHub必然是很經常的一件事情。細心的同學會發現當我們在瀏覽項目源碼的時候，進入文件夾后Url地址發生改變后，內容很快就加載好了。起初還以為是刷新了頁面加載的，但刷新頁面速度也快的離譜了吧。於是F12監控下網絡請求，發現是進行了Ajax請求。很是神奇，Url地址發生改變不是會刷新頁面嗎（#號后面的除外啦）？什么情況？猜想肯定是HTML5這個東東里面的新特性。Google搜索下果然如此，是history.pushState 這個新東西。於是自動動手測試實現起來了。
- 實現效果如圖，點擊面包屑導航下面的內容進行Ajax加載頁面內容。
- MVC頁面代碼 ，Ajax 請求只是返回一個內容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render( "~/Content/css" ) @Scripts.Render( "~/bundles/modernizr" ) </head> <body> <div> <a href="/">首頁</a> / <a href="/home/news">公司新聞</a> / <a href="/home/news/1">新品速遞</a> </div> <br /> <div id="page"> @RenderBody() </div> @Scripts.Render( "~/bundles/jquery" ) @RenderSection( "scripts", required: false ) <script type="text/javascript"> $(function () { window.onpopstate = function (e) { //點擊瀏覽器的前進后退按鈕處理 if (e.state) { document.title = e.state.title; $.ajax({ type: "get", url: e.state.url, success: function (data) { $("#page").html(data) }, error: function (data) { } }) } } //處理點瀏覽器返回時候最后一個不刷新頁面內容問題 var state = { title: document.title, url: document.location.href, otherkey: null }; history.replaceState(state, document.title, document.location.href); $("a").click(function () { var _href = $(this).attr("href"); $.ajax({ type: "get", url: _href, success: function (data) { //加入到歷史狀態里面 var state = { title: data, url: _href, otherkey: null }; history.pushState(state, data, _href); $("#page").html(data) }, error: function (data) { } }) return false; }) }) </script> </body> </html> - 總結：剛查資料看到時候覺得就是調用一個js就可以搞定，但做demo的時候會發現存在一個一個問題，例如：瀏覽器前進后退時候頁面不更新，解決更新后又發現后退到進入的第一個頁面時候還是有問題，最后通過
history.replaceState 這個去實現的，從而達到了類似github源碼文件加載類似效果。