在前端开发中，使用 AJAX 技术进行异步数据请求是非常常见的操作。但是，如果每次请求都需要重新加载整个页面的话，那么不仅会影响用户体验，还会浪费带宽和服务器资源。为了解决这个问题，Pjax（PushState + Ajax）技术应运而生。
Pjax-Standalone 是一个 npm 包，提供了一种轻量级的 Pjax 实现方式，可以方便地实现页面之间的无刷新跳转。
安装
你可以通过 npm 来安装 Pjax-Standalone，执行以下命令即可：
--- ------- ---------------
安装成功后，在需要使用的文件中引入 Pjax：
----- ---- - ---------------------------
或者通过 ES6 的 import 语法来引入：
------ ---- ---- ------------------
使用方法
初始化
首先，你需要对 Pjax 进行初始化配置。比如：
------
--------- ------------ -- --------------
---------- -
--------
----------
--
---------- -------- -- -
-- ------
-
---上述代码中，elements 表示需要进行 Pjax 转换的链接元素选择器；selectors 则表示需要被更新的元素选择器；analytics 则是一个回调函数，在每次 Pjax 结束时被调用，可以用来进行统计分析等操作。
启用 Pjax
当初始化完成后，你需要手动启用 Pjax：
--------------
这会自动将所有符合 elements 选择器的链接转换成 Pjax 请求。
禁用 Pjax
如果你需要禁用 Pjax，可以执行以下代码：
---------------
手动触发 Pjax 请求
你也可以在代码中手动触发 Pjax 请求：
-----------------------------------
事件
Pjax-Standalone 提供了一些事件回调函数，可以让你在 Pjax 请求的不同阶段进行相应的处理。比如：
---------------- -------- -- - -- ---- ---------- --- -------------- -------- -- - -- ---- ---------- ---
目前支持的事件包括：beforeSend, start, beforeReplace, replace, afterReplace, end。
示例代码
下面是一个简单的示例代码：
--------- -----
------
------
----------- ------------
------- ----------------------------------------------------------------------------
------- ---------------------------------------------------------------------
--------
------
--------- ------------ -- --------------
---------- -
--------
----------
--
---------- -------- -- -
-- ------
-
---
--------------
---------
-------
------
--------
-- -------- ----------------
-- ------------- ------------------
-- --------------- ------------------
---------
----- -------------
-------- ---- ---------
--------- ---- -----------------
-------
-------
-------在上面的代码中，我们首先引入了 jQuery 和 Pjax-Standalone 库。然后，在页面加载完成后，对 Pjax 进行了初始化配置，并启用了 Pjax。
最后，在页面中，我们使用 `data-pjax
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/37867