不刷新頁面更新內容的方法

不刷新頁面更新內容的方法

一個頁面， 顯示一篇武俠小說，這篇武俠小說有隻有5個章節。
武俠小說主頁假設爲百度主頁https://www.baidu.com/
5個章節的內容都是從後端獲取。

武俠小說主頁

• 武俠小說第1章
• 武俠小說第2章
• 武俠小說第3章
• 武俠小說第4章
• 武俠小說第5章

如何實現不刷新頁面更新內容的方法，好比說，點擊武俠小說第1章,顯示第1章的內容，
點擊武俠小說第2章,顯示第2章的內容，可是url便沒有變化。

普通的ajax實現

每次點擊某一章節的時候，獲取標識符，而後經過標識符獲取相應的API請求數據，顯示到頁面。

缺點：
在不一樣章節之間切換的時候，地址欄的url是同樣的，這樣就不能固定到某一個url了，
好比我看到武俠小說第3章，想要bookmark到武俠小說第3章，是作不到的，每次打開這個頁面都是默認的頁面。
好比我看到武俠小說第3章了，我想經過瀏覽器的後退按鈕返回到武俠小說第2章，這也是作不到的，由於武俠小說第2章和武俠小說第3章的url沒有區別，點擊瀏覽器的後退按鈕只能返回其餘不一樣的url上去了。

改進的ajax實現

爲了解決上面的問題，可讓每一個章節的url不一樣，可是我又不想更新整個頁面，不想更新整個頁面能夠經過ajax實現，實現不一樣的url能夠經過在url後面添加hash，url後添加hash是不會更新頁面的，而且還會保存到history中。

實現：
點擊武俠小說第1章, location.hash = frist;
點擊武俠小說第2章, location.hash = second;
點擊武俠小說第3章, location.hash = thrid;
點擊武俠小說第4章, location.hash = fouth;
點擊武俠小說第5章, location.hash = five;

每次點擊武俠小說章節的時候，先獲取hash的值，若是沒有location.hash值，默認賦值location.hash = frist;而後經過location.hash值，發送ajax請求，獲取相應的數據。
這樣就現實了每一個章節有不一樣的url，能夠bookmark了，好比bookmark了第3章，經過bookmark進入第3章後，看的是第3章的內容了，而不是默認的第1節的內容了。
由於location.hash會儲存在history中的，因此瀏覽器的前進後退按鈕也有效的，好比如今看到武俠小說第2章了，點擊武俠小說第2章，武俠小說第2章的url是https://www.baidu.com#second, 這個https://www.baidu.com#second是會保存在history對象中的，
武俠小說第2章看完了，點擊武俠小說第3章，武俠小說第3章的url是https://www.baidu.com#thrid， 這個https://www.baidu.com#thrid也是會保存在history對象中的， 點擊瀏覽器的後退按鈕，則返回到了武俠小說第2章。

只改變hash，是不會刷新頁面的，可是會把這個url添加到history對象中

history對象

經過改進的ajax，實現了瀏覽器前進後退按鈕無效的問題。
還有一個問題，進入到武俠小說主頁，因爲沒有設置hash，會默認添加location.hash = frist;這時咱們會看到武俠小說第1章的內容，但是若是這時候，點擊瀏覽器的後退按鈕，瀏覽器的url從https://www.baidu.com#frist變成了https://www.baidu.com，內容便沒有改變，再一次點擊瀏覽器的後退按鈕，纔會返回咱們真正想返回的頁面。

當第一次進入武俠小說主頁時， history中保存https://www.baidu.com, 由於沒有hash， 經過 location.hash = frist; 添加hash， 此時往history又添加了一條記錄，https://www.baidu.com#frist， 因此咱們須要返回2次，相對於history.pushState()。
想要一次返回，要麼武俠小說主頁url寫成https://www.baidu.com#frist，要麼使用
history.replaceState()。
關於history的能夠參考這裏。