History API

注：本文写的demo，全部在 demo地址，可以clone到本地，然后在localhost下打开。

好下面我们进入正题：

之前我在做分页的时候，全部采取的都是给页面后面加上参数的方式，如：第一页url地址为：http://www.lsgogroup.com/admin.php?s=/Article/index/p/1.html，第二页url地址为http://www.lsgogroup.com/admin.php?s=/Article/index/p/2.html，但是考虑下，我们的这两个页面不一样的是什么，貌似除了数据不同外没有什么不同的了，所以我们有必要采取这种每次进行转换页面时，整个将页面刷新一遍吗，只需要来更新我们的数据就好了啊，诶，局部刷新，那是不是可以利用ajax来实现呢？
于是有了文件夹demo下的demo1目录：
我发现了一个问题，那就的确我们的页面时不刷新了，但是我们的页面也不能后退和前进了，由于我们的页面并没有整体的向服务器发送http请求，所以并没有添加到浏览器历史记录上，并且我们下次再进入页面时，我们仍然是初始状态，这也可以理解，因为我们是一直在这个页面，而没有进行跳转，所以这是一个很大的问题，我们要怎么解决呢？

这时history API就起了很大的作用：

先来了解一个history API：
1. history.pushState(stateObject, title, url)，新生成一条历史记录，第一个参数是状态对象，第二参数是标题，第三个参数是url地址
2. history.replaceState()，使用方法与history.pushState基本相同，但是其不会新生成历史记录，而是将当前的历史记录替换掉。
3. window.onpopstate事件，这个事件是在浏览器取出历史记录时触发的，但是其条件是很苛刻的，只有点击浏览器自身的前进、后退按钮，或者利用history.go()等导航方法时，并且前后两条记录来自同一个网页文档时，才会触发脚本。关于这个事件看demo1下的test-popstate就可以懂了。也就是说：在一个网页文档内的页面跳转会触发popstate事件，同一个网页文档的意思也就是同时document对象，也就是说只要发生了reload就不能触发该事件。

下面我们来用history API改进代码，详情见于demo2的index.html，总的来说就是在进行翻页操作时，将当前页面的url放入到浏览器的历史记录中，然后在绑定window.onpopstate事件，使其在页面切换时，发生数据的变化。

由此可以引出一个概念，那就是pjax，其意义就是pushState+ajax，其原理就是demo中分页所体现，当然也有大神封装好的库。

• welefen封装的库，对jquery、qwrap和kissy都做了封装，地址：https://github.com/welefen/pjax