不刷新页面更新内容的方法

不刷新页面更新内容的方法

一个页面， 显示一篇武侠小说，这篇武侠小说有只有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的可以参考这里。