使用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)