介绍

现说下pjax的含义：page + ajax =pjax
其实就是无刷新的加载DOM到页面中，也就是单页设计。

其实这个很简单，通过jquery的$(selector).load(url),这种方式来实现异步来加载网页到指定的selector中。

但是这里需要实现一个浏览器回退的功能,这里可以使用History API，前提是浏览器得支持，点击这里看浏览器支持程度。

其实History API 咱们可以理解为一个有序的数组，分别有两个方法，来添加和替换当前的数组内容，当然减少或者说是删除数组的内容，也就是浏览器的后退行为，也是正常的一个操作。

还有一个事件是监控数组添加或减少时触发该事件，下面简单介绍下。

方法和事件

History API提供了 两个方法和一个事件

1
方法1：history.pushState(stateObject, title, url)

说明:这个方法就是往History这个数组中添加一条URL

第1个参数是状态对象，它可以理解为一个拿来存储自定义数据的元素。它和同时作为参数的url会关联在一起。

第2个参数是标题，是一个字符串，目前各类浏览器都会忽略它（以后才有可能启用，用作页面标题），所以设置成什么都没关系。目前建议设置为空字符串。

第3个参数是URL地址，就是需要放到队列中的一个URL



1
方法2：history.replaceState(stateObject, title, url)

说明:这个方法在当前History这个数组中替换URL，也就是将当前历史记录替换掉，参数和pushState一致


1
事件：window.onpopstate

说明:push的对立就是pop，这个事件是在浏览器取出历史记录并加载时触发的。但实际上，它的条件是比较苛刻的，几乎只有点击浏览器的“前进”、“后退”这些导航按钮，或者是由JavaScript调用的history.back()等导航方法，且切换前后的两条历史记录都属于同一个网页文档，才会触发本事件。
咱们就是通过这个事件监控来动态加载html到指定的DOM中，来实现pjax的。

下一篇介绍插件实际
git项目地址



用右眼看世界