【www.bbyears.com--jquery】
前面我有文章介绍了前端路由和Pjax单页面应用方面的实例应用，今天我来和大家分享一个单页面应用神器jquery.pjax.js。它是基于jQuery的pjax插件，使用方便，功能完善。我会结合实例给大家讲解使用jquery.pjax.js。
在上一期文章中，我们了解了Pjax的实现原理，它就是利用了HTML5的Pushstate+ajax增强了页面局部刷新功能，它在我们原有的ajax功能上，实现了可以记录浏览历史，可以使用浏览器前进后退功能，浏览器的url可以跟随内容变化，而整个页面可以只刷新某一部分，也就是局部刷新。
今天我要给大家分享的这个实例是模拟分页功能，分页是在web开发中最常见的组件之一。正常情况下，点击分页组件中的页面，页面会跳转到对应的页面，而使用Pjax后，点击页码时，会发送一个ajax请求到后端，响应后更新对应的页面内容部分，同时地址栏url也对应实际的页码url，但整个页面并没有跳转，给我们的感觉是非常流畅，当然，我们也可以在请求页面异步时增加加载动画效果。来看具体的使用方法。
我们准备一个加载div#loading,默认隐藏，ajax请求的时候才显示。#container是用来加载响应的页面内容。.pagination是分页条组件。
Loading...
jQuery.pjax分页
Javascript
我们使用的pjax组件依赖jQuery库，所以先将这两个文件加载。
<script src="jquery-2.0.0.min.js"></script>
<script src="jquery.pjax.js"></script>
然后，使用以下代码调用pjax插件。
$(document).pjax(".pagination a", "#container");
$(document).on("pjax:send", function() {
$("#loading").show();
})
$(document).on("pjax:complete", function() {
$("#loading").hide();
})
上面的代码中，我们告诉pjax监听一个标签和使用 #container 作为目标容器：
$(document).pjax(".pagination a", "#container");
现在在pjax兼容浏览器，点击分页条上的页码，网页的内容容器 #container 中的内容将被 data.php?p=x 的内容替换。
data.php的内容我们简单的写个代码，实际开发中应该是读取数据库中的数据列表。
$p = intval($_GET["p"]);
if($p==0) $p=1;
echo "这是第".$p."页";
选项与事件
pjax的调用方法我们刚才简单介绍了，它还可以设置一些选项用来定制。格式如下：
$(document).pjax(selector, [container], options)
selector 是一个字符串，比如要点击的文本 event delegation.
container 是一个字符串，选择唯一标识pjax容器。
options 下面所描述的一个对象。
参数
描述
默认值
timeout
Ajax超时毫秒之后完全强制刷新
650
push
使用 pushState 在导航中添加浏览器历史记录
true
replace
更换网址不添加浏览器历史记录
false
maxCacheLength
大缓存大小为以前的容器内容
20
version
一个字符串或函数返回当前pjax版
scrollTo
垂直位置以滚动导航。为了避免改变滚动位置，通过设置为 false.
0
type
网页请求的方式
"GET"
dataType
返回的数据类型
"html"
container
CSS选择器的元素，其中的内容应及时更换
url
字符串或函数返回的URL ajax请求
link.href
target
最终 relatedTarget 的值，通过 pjax events
link
fragment
CSS选择器的碎片从Ajax响应提取
事件方法
事件
描述
pjax:click
阻止一个链接的默认事件，防止阻止pjax事件
pjax:beforeSend
参见 XHR headers
pjax:start
请求开始
pjax:send
发送请求
pjax:clicked
pjax后，已经得到了从点击一个链接开始
pjax:beforeReplace
在内容被替换前，HTML从服务器加载的内容
pjax:success
在内容被替换后，HTML 内容从服务器加载
pjax:timeout
在选项 options.timeout;之后除非取消，否则将很难刷新
pjax:error
一个ajax错误，将执行原始的网页刷新，直到网页加载被取消
pjax:complete
总是在pjax执行完成以后调用，不论运行的结果
pjax:end
请求结束
pjax:popstate
浏览器前进后退事件 direction 属性：”back”/”forward”
$.pjax还能响应点击事件，以及提交表单和重新加载事件。详情请参考jquery.pjax项目地