最近在學習backbone，學習理解backbone就要先理解spa，理解spa就要先了解單頁面應用是如何做到頁面不刷新改變url的。

相較于不同頁面的跳轉，AJAX可以說大大提高了用戶的瀏覽體驗，不用看到頁面切換之間的白屏是件很愜意的事情。但是很多早先的AJAX應用是不支持瀏覽器的前進后退的，這導致了用戶不管在網站里瀏覽到何處，一旦刷新就會立刻回到起初的位置，并且用戶也無法通過瀏覽器的前進后退按鈕來實現瀏覽歷史的切換。

對于第一個問題，解決還算容易，只要用cookie或者localStorage來記錄應用的狀態即可，刷新頁面時讀取一下這個狀態，然后發送相應ajax請求來改變頁面即可。但是第二個問題就很麻煩了，先說下現代瀏覽器的解決方案。

HTML5 解決方案

要了解HTML5如何實現前進后退，就要先了解下history對象和location對象。

history對象

History 對象屬性

1.length：返回瀏覽器歷史列表中的URL數量，用戶在當前標簽每訪問一個頁面，此數量加1。因為隱私原因，URL具體內容不可見。
2.state：與當前網址相關的對象，只能通過pushState和replaceState添加或修改。我們可以可以用它來存儲跟url有關的信息。

History 對象方法

1.history.back()

此方法無參數，觸發后會返回前一個瀏覽的頁面，相當于點擊了瀏覽器的后退按鈕。

2.history.forward()

此方法無參數，觸發后會返回后退前瀏覽的頁面，相當于點擊了瀏覽器的前進按鈕。

3.history.go(number)

此方法接受一個整形變量參數，history.go(-1)相當于后退一頁，history.go(1)相當于前進一頁，history.go(0)會刷新當前頁面。

4.history.pushState(state, title, url)

改變url且不刷新頁面的關鍵就是它了，此方法會改變當前頁面的location.href并且修改當前的history.state對象，執行后history.length會增加1。此方法接受三個參數，

1.state：當前網址相關的對象。
2.title：頁面標題，但是所有瀏覽器都忽略它，要改變標題還是要用document.title。
3.url：一個與當前頁面同域的網址，location.href會變成此值。

5.history.replaceState(state, title, url)

此方法同上，但是它不會改變history.length，只會修改當history.state和location.href。

注意pushState和replaceState第三個參數不可跨域，并且不會觸發瀏覽器的popstate事件和onhashchange事件(chrome33下測試)。

location對象

除了點擊前進/后退按鈕和history事件，還可以通過location的方法和修改location的屬性來改變Url：

location對象的屬性(讀寫)：

1.host:域名+端口號
2.hostname:域名
3.port:端口號
4.protocol:協議
5.href：完整路徑
6.origin：協議+域名+端口
7.hash：井號 (#) 開始的 URL(hash)
8.pathname:文檔路徑+文檔名
9.search:(?)后面的內容

可以通過改變location.href或location.hash來達到無刷新的目的。

location對象的方法：

1.assign:改變url的值，并且將當前的url添加到歷史記錄中history.length會增加1。location.assig(‘#' + x)會改變url但是不刷新頁面。
2.reload:刷新頁面。
3.replace:改變url的值，但是history.length不變。使用方法同assign。

popstate事件

當url改變時，比如用戶點擊前進/后退按鈕，history.go(n)（n不等于0）,location.hash = x(x不等于當前的location.hash)都會觸發此事件?？梢杂盟鼇肀O聽url，來實現各種功能。

onhashchange事件

改變hash值會觸發popstate事件，而觸發popstate事件不一定會觸發onhashchange事件。經過測試：

1.hash改變但是location.pathname不變會觸發onhashchange事件，比如history.pushState(”, ”, ‘#abc');
2.hash和location.pathname一起改變則不觸發，比如history.pushState(”, ”, ‘a#abc');

老舊瀏覽器的寫法

老舊瀏覽器也不支持pushState和replaceState，所以通過popstate(事實上也不支持這個方法)監聽url變化的路走不通。那么只能通過改變url#后面的內容來達到無刷新，但是它們又不支持onhashchange，所以對url的變化是無動于衷的(除了頁面會滾動至頁面對應id的位置)。那么只能祭出大招：輪詢，起一個setInterval來監聽url的值。Like this:

當然這樣寫非常非常挫，如果不考慮點擊頁面帶有id的a標簽來改變hash的情況，可以利用設計模式來優雅的實現監聽url。比如經典的觀察者模式，專門用一個類來實現改變hash的功能，然后所有要監聽url變化的類(觀察者)去訂閱這個(被觀察者)類。