利用history對象實作位址欄更新，頁面局部重新整理

如今的HTML頁面越來越龐大，有時頁面隻需加載部分的内容，如果為了加載一小部分内容而重新加載整個頁面犧牲是非常大。

現解決這種問題的方式多數是使用ajax異步加載資料然後再渲染資料，這樣的方式有個缺點就是位址欄不會變動，如果使用者在這個時候重新整理了頁面那麼就得重新點選多次才能加載出之前的資料（常見的場景：資料清單分頁展示，tab頁面切換）。

那麼我們可以使用history對象來彌補這個缺陷。

我們可以使用 history.pushState() 方法來實作浏覽器位址欄更新。

history.pushState(state, title, url);
           

state 用于存儲一些狀态資訊，暫時用處不大。

title 可忽略，大多數浏覽器并不支援，建議傳入null。

url 要添加的url，傳入相對路徑，url必須和目前url在同一個源下;否則，pushState() 将丢出異常。

使用該方法并不會去加載該url，這樣會出現一個問題，當使用者在使用浏覽器前進後退時候頁面也不會重新加載。

解決該問題的方式與代碼已上傳至GitHub，請自行查閱。

https://github.com/joel-ou/js/blob/master/loader.js

注：浏覽器在前進後退頁面的時候會恢複到該頁面跳轉前的位置，如無需該特性可以使用以下方式禁止

history.scrollRestoration = "manual";

浏覽器相容情況請查閱以下資料

https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState