Pjax 是一种使用 Ajax 和 pushState 技术实现的无需刷新整个页面的方式，它可以在不跳转页面的情况下更新页面内容。
使用 Pjax 可以提高网页的加载速度和用户体验。
使用 Pjax 的场景有很多，例如：
- 网页新闻资讯类网站：这类网站需要频繁更新内容，使用 Pjax 可以实现页面局部刷新，从而提高网页的加载速度。
- 电商网站：这类网站需要展示商品列表和详情，使用 Pjax 可以在不跳转页面的情况下加载商品详情，提高用户浏览体验。
下面以一个简单的示例来说明 Pjax 的使用方法：
方法一
1.安装 Pjax：可以通过 npm 或 cnpm 安装 Pjax，命令如下：
npm install pjax2.或使用cdn在页面引入 Pjax 文件：在页面的 <head> 标签中引入 Pjax 文件，命令如下：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>3.创建 Pjax 实例并设置选项：在页面底部创建一个 Pjax 实例，并设置相关选项，例如：
let pjax = new Pjax({
selectors: ["head title", ".aa", ".pp"], // 要改变的部分，标签直接写标签名，id选择器需要加#，类名需要加.
history: true, // 是否添加近浏览器历史记录
pushState: true, // 是否启用 pushState。禁用后 Pjax 就变成了 Ajax。
});4.在页面中添加链接并设置目标 URL：在页面中添加链接，并设置目标 URL，例如：
<a href="/example">Example</a>5.当用户点击链接时，Pjax 会通过 Ajax 请求目标 URL，并使用 pushState 修改 URL。如果请求成功，Pjax 会根据选项中的 selectors 更新页面内容。如果请求失败，Pjax 会触发默认的导航行为。
方法二
6.如果未生效，在需要使用Pjax的链接上添加data-pjax属性：
<a href="/example" data-pjax>Page 2</a>7.重新初始化Pjax：
$(document).pjax('a[data-pjax]', '#pjax-container');8.在页面中添加一个容器用于显示Pjax加载的内容：
<div id="pjax-container"></div>这样，当用户点击带有data-pjax属性的链接时，Pjax会通过Ajax加载链接中的页面内容并将其显示在pjax-container容器中，同时通过pushState方法改变浏览器地址栏的URL，使得用户可以使用前进和后退按钮访问已经加载的页面。
其他
9.可以通过监听Pjax事件来实现一些特殊功能，例如：
// Pjax开始加载页面时触发
$(document).on('pjax:start', function() {
// 显示loading动画
$('#loading').show();
});
// Pjax页面加载完成时触发
$(document).on('pjax:end', function() {
// 隐藏loading动画
$('#loading').hide();
// 初始化一些需要重新绑定的事件
initEvents();
});
// Pjax加载页面出错时触发
$(document).on('pjax:error', function() {
// 显示错误提示
$('#error').show();
});
这样，当Pjax开始加载页面时，会显示loading动画；当页面加载完成时，会重新绑定一些需要绑定的事件；当加载页面出错时，会显示错误提示。
10.可以通过配置选项来定制Pjax的行为，例如：
$(document).pjax('a[data-pjax]', '#pjax-container', {
timeout: 5000, // 设置请求超时时间为5秒
scrollTo: false, // 是否滚动到页面顶部
maxCacheLength: 0, // 设置缓存的最大长度为0，禁用缓存
replace: false, // 是否使用replaceState替换浏览器历史记录
fragment: '#pjax-container', // 指定只更新页面中的哪个部分
beforeSend: function(xhr) {
// 发送请求前的回调函数
xhr.setRequestHeader('X-PJAX', 'true'); // 设置请求头
},
complete: function() {
// 请求完成后的回调函数
}
});11.Pjax还可以与其他技术和库一起使用
- Pjax + Turbolinks
Turbolinks是一种类似于Pjax的技术，可以通过Ajax实现页面无刷新加载，并且减少页面重载的次数。与Pjax不同的是，Turbolinks会预加载下一个页面，从而提高页面加载的速度和用户体验。可以将Pjax和Turbolinks一起使用，实现更好的效果。
- Pjax + Vue.js
Vue.js是一种流行的前端框架，可以帮助我们实现组件化开发、数据绑定、状态管理等功能。可以将Pjax和Vue.js一起使用，实现更好的组件化开发和无刷新加载的效果。例如，在Vue.js组件中使用Pjax，可以实现组件的无刷新切换，从而提高用户体验。
- Pjax + React
React是另一种流行的前端框架，可以帮助我们实现虚拟DOM、组件化开发、状态管理等功能。可以将Pjax和React一起使用，实现更好的组件化开发和无刷新加载的效果。例如，在React组件中使用Pjax，可以实现组件的无刷新切换，从而提高用户体验。
总之，Pjax可以帮助我们实现页面无刷新加载，提高用户体验，并且可以通过监听Pjax事件来实现一些特殊功能。但是需要注意，Pjax也有一些缺点，例如可能会影响SEO等，需要根据实际情况进行选择和使用。
本文暂时没有评论，来添加一个吧(●'◡'●)