使用Ajax和history.pushState()实现无刷新改变页面内容和地址栏Url

         

解决问题之前

浏览器是如何记录访问历史并实现前进与后退的？

浏览器是通过 window对象的 history对象来对浏览器历史访问记录，从而可以实现前进和后退。history对象可以理解其保存了一个有序的列表对象，每个对象都代表了一个页面信息（包括页面的url等信息），注意当前页面也被保存在里面。这样就可以通过浏览器本身提供的前进和后退按钮来操作，也可以利用javascript调用history对象的back(),forward(),和go()方法来实现页面的切换。

我们说的历史记录都是指一个完整的页面请求url，而ajax并不是一个完整的页面请求，因此浏览器无法记录ajax的操作信息。所以我们要做的就是在ajax操作之后改变url，使之可以保存在histroy对象中。

解决问题

1. 使用history.pushState将url塞到浏览器历史中。
2. 浏览器的前进与后退，会触发window.onpopstate事件，通过绑定popstate事件，就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入，实现Ajax的前进与后退效果

 

强大的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)

 

 

 

--------------------- 
版权声明：本文为CSDN博主「H小志」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiaozhi_2016/article/details/52106205