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

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

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