标签：
从Ajax翻页的问题说起请想象你正在看一个视频下面的评论，在翻到十几页的时候，你发现一个写得稍长，但非常有趣的评论。正当你想要停下滚轮细看的时候，手残按到了F5。然后，页面刷新了，评论又回到了第一页，所以你又要重新翻一次。
再或者，你想把这个评论发给别人分享，一面给了别人页面地址（为什么不直接复制呢？因为要连带视频等场景啊），一面又要加一句嘱咐：请翻到下面评论的第XX页的XX楼。
这就是问题。试想一下，如果浏览器能记住你当前的状态（比如看到了第十几页），而不是一刷新就还原，是不是就显得智能多了？
为什么用Ajax？用Ajax实现翻页等内容切换是有原因的。在传统的无Ajax的站点里，页面A和页面B可能只有10%的地方是不同的，其他90%的内容（尤其是导航、页脚等公用元素）都是一样的，但却仍然需要浏览器下载并显示新的一整个页面。而如果使用Ajax，不仅节省了浏览器需要下载的资源，而且无刷新切换明显比页面跳转更平滑、流畅。
就视频下面的评论来说，Ajax可以说是必须的。视频这样的重量级元素，动不动给你重新加载一次，，不能忍。
传统的跳转翻页的可取之处传统的不使用Ajax的站点，每一个翻页是一个跳转，然后你可以在浏览器地址栏里看到诸如?page=2这样的参数。每一页就这样通过地址栏的URL做了标记，每一次请求，浏览器都会根据参数返回正确的页码。
所以，传统的跳转翻页，刷新也不会丢失状态。
结合两者现在我们就可以想到，如果在Ajax更新页面局部内容的同时，也在地址栏的URL里更新状态参数，就可以做出更完美的Ajax翻页了。
不过，JavaScript修改location的除hash外的任意属性，页面都会以新URL重新加载。而唯一不引发刷新的hash参数并不会发送到服务器，因此服务器无法获得状态。
然后，HTML5 history API将解决这个问题。
介绍HTML5 history APIHTML5 history API只包括2个方法：history.pushState()和history.replaceState()，以及1个事件：window.onpopstate。
history.pushState()它的完全体是 history.pushState(stateObject, title, url)，包括三个参数。
第1个参数是状态对象，它可以理解为一个拿来存储自定义数据的元素。它和同时作为参数的url会关联在一起。
第2个参数是标题，是一个字符串，目前各类浏览器都会忽略它（以后才有可能启用，用作页面标题），所以设置成什么都没关系。目前建议设置为空字符串。
第3个参数是URL地址，一般会是简单的?page=2这样的参数风格的相对路径，它会自动以当前URL为基准。需要注意的是，本参数URL需要和当前页面URL同源，否则会抛出错误。
调用pushState()方法将新生成一条历史记录，方便用浏览器的“后退”和“前进”来导航（“后退”可是相当常用的按钮）。另外，从URL的同源策略可以看出，HTML5 history API的出发点是很明确的，就是让无跳转的单站点也可以将它的各个状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时，站点可以直接加载到对应的状态。
history.replaceState()它和history.pushState()方法基本相同，区别只有一点，history.replaceState()不会新生成历史记录，而是将当前历史记录替换掉。
window.onpopstatepush的对立就是pop，可以猜到这个事件是在浏览器取出历史记录并加载时触发的。但实际上，它的条件是比较苛刻的，几乎只有点击浏览器的“前进”、“后退”这些导航按钮，或者是由JavaScript调用的history.back()等导航方法，且切换前后的两条历史记录都属于同一个网页文档，才会触发本事件。
上面的“同一个网页文档”请理解为JavaScript环境的document是同一个，而不是指基础URL（去掉各类参数的）相同。也就是说，只要有重新加载发生（无论是跳转到一个新站点还是继续在本站点），JavaScript全局环境发生了变化，popstate事件都不会触发。
popstate事件是设计出来和前面的2个方法搭配使用的。一般只有在通过前面2个方法设置了同一站点的多条历史记录，并在其之间导航（前进或后退）时，才会触发这个事件。同时，前面2个方法所设置的状态对象（第1个参数），也会在这个时候通过事件的event.state返还回来。
此外请注意，history.pushState()及history.replaceState()本身调用时是不触发popstate事件的。pop和push毕竟不一样！
如何应用HTML5 history API的内容不多，具体如何应用它来改进Ajax翻页呢？
首先，在服务器端添加对URL状态参数的支持，例如?page=3将会输出对应页码的内容（后端模板）。也可以是服务器端把对应页码的数据给JavaScript，由JavaScript向页面写入内容（前端模板）。