使用Ajax和history.pushState()實現無重新整理改變頁面內容和位址列Url

        先說些廢話，就當放鬆下心情了。最近幾天實在覺著累，不過不是身體累，是心累。總感覺心情很壓抑，具體為什麼，我一時也說不上來，就是每個人都會偶爾上來一陣神經病。前段時間真是熱的要死，搞得我每天都悶悶的，一點動力都沒有，不過還好啦，又下雨了，重點是遇到下雨天，溫度就能降好幾度，你說我能不開心嗎？ 好啦好啦 ，不說這個了，步入正題吧，努力一點，未來就會比現在好一點。

        強大的Ajax通過非同步請求實現了頁面的區域性重新整理，帶來了更好的使用者體驗，但頭疼的是，它不能在瀏覽器的歷史會話中保留記錄，也無法改變頁面在瀏覽器中Url地址，不能點選瀏覽器的前進、後退按鈕。就是當你開啟一個頁面，使用ajax進行各種資料載入，例如一個列表頁面，非同步載入來翻頁。結果使用者一不小心重新整理了頁面，那麼頁碼就得重新開始計算，一旦使用者改變了會話狀態（瀏覽器的前進、後退、重新整理），那麼ajax就會丟失相關的資料。

        後來H5引入了新的API，就是history.pushState和history.replaceState很好的解決掉了Ajax存在的這個缺陷。自己嘗試寫了個例子，頁面中左側顯示文章目錄，右側顯示具體的某一篇文章內容。通過ajax請求實現頁面區域性重新整理，同時改變url地址，並將當前狀態儲存為歷史記錄。就是下面的效果啦，內容是隨便copy的。

        這個例子總共涉及到兩部分，就是目錄和文章內容。通過點選左側目錄，右側的內容便隨之改變，當然，位址列也要變，還要可以點選回退和前進按鈕，回到之前或之後的狀態頁面。下面開始貼程式碼：

1.Html頁面結構及樣式

A)Directory.html(顯示目錄列表及右側文章內容)

B)article01.html（小溪邊的童年）

C)article02.html（一個人過春節）

D)article03.html（你的未來是什麼樣子）

文件結構寫完了，那怎麼在Directory.html裡怎麼能顯示article01.html、article02.html、article03.html的內容呢，這裡就用到ajax請求獲取article裡面的內容了。

哈哈，看前方高能。

2.javascript程式碼實現(ajax+history.pushState)