前面文章介绍了前端路由简单实现和Pjax入门方面的文章，今天来分享一个单页面应用神器jquery.pjax.js。
HTML
我们准备一个加载div#loading,默认隐藏，ajax请求的时候才显示。#container是用来加载响应的页面内容。.pagination是分页条组件。
<div class="row"> <div id="loading">Loading...</div> <div id="container">jQuery.pjax分页</div> <nav> <ul class="pagination"> <li><a href="data.php?p=1">1</a></li> <li><a href="data.php?p=2">2</a></li> <li><a href="data.php?p=3">3</a></li> <li><a href="data.php?p=4">4</a></li> <li><a href="data.php?p=5">5</a></li> </ul> </nav> </div>
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项目地址：https://github.com/defunkt/jquery-pjax
/********/