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