概念

PJAX（PushState + AJAX）是一种结合了 AJAX 和 HTML5 的 pushState API 的技术，用于实现无刷新页面切换，同时能更新浏览器的 URL 和历史记录。它能让网站拥有类似单页应用（SPA）的流畅体验，但又保持了多页应用（MPA）的简单结构。

注意事项：

• 服务器返回的 HTML 必须完整：因为 PJAX 会从完整页面中提取指定片段，所以后端无需特殊处理，正常输出完整页面即可。
• JavaScript 重新绑定：动态加载的内容中的事件监听需要在 pjax:complete 后重新绑定。
• SEO 友好：由于每个页面都有独立 URL，搜索引擎可以正常抓取，比 SPA 更友好。
• 降级处理：如果用户禁用 JS，data-pjax 链接会正常跳转，保证基本功能。

使用原生pjax.js

第一步：引入

<script src="https://unpkg.com/pjax@0.2.8/pjax.min.js"></script>

第二步：使用

<!-- PJAX 链接 -->
<a href="/about" data-pjax>关于我们</a>
<a href="/contact" data-pjax>联系我们</a>


<script>
var pjax = new Pjax({
    elements: 'a[data-pjax]',           // 触发链接
    selectors: [
        "title",                        // 提取目标页面的 <title> 标签内容，并用它来更新当前页面的标题（document.title）
        "#pjax-container"               // 提取目标页面中 #pjax-container 元素内的 HTML 内容，并用它替换当前页面中 #pjax-container 的内容
    ], // 需要更新的 DOM 元素
    cacheBust: false, // 关闭自动添加 ?t=时间戳
});

// 当你通过 AJAX 加载完目标页面后，应该从返回的 HTML 中提取哪些部分，来更新当前页面的对应元素

// 事件监听
document.addEventListener('pjax:send', function() {
    console.log('发送请求');
});

document.addEventListener('pjax:complete', function() {
    console.log('加载完成');
});
</script>

常见的 selectors 配置

selectors: [
    "title",                    // 更新页面标题
    "#header",                  // 更新头部
    "#content",                 // 更新主要内容区
    "#sidebar",                 // 更新侧边栏
    "meta[name='description']", // 更新描述（对SEO有帮助）
    "body"                      // 有时也需要更新 body 的 class 等
]