网站实现pjax跳转，js实现局部刷新跳转

博主是因为想在博客中加入音乐播放器，然后因为超链接的跳转被影响到了，所以才想到了加入pjax局部刷新。然后我这里说到的是一个集成了pjax的工具类（**YUI**）
现在开始大概介绍下如何上手吧

Pjax介绍

使用pjax优点：

• 减轻服务端压力
• 优化页面跳转体验

缺点

• 不支持一些低版本的浏览器(如IE系列)
• 使服务端处理变得复杂

快速开始

1. 引入YUI的JS工具类

   <script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>

2. 创建一个新的 Pjax 实例，container是当前页面需要被跳转后的页面替换调的元素。更多用法可参考后面的介绍

    

   <script>
   YUI().use(‘pjax‘, function (Y) {
       new Y.Pjax({container: ‘#content‘});
   });
   </script>

3. 在需要修改的超链接处加入"yui3-pjax"的这个class

   <ol>
       <li><a href="page1.html" class="yui3-pjax">Page One</a></li>
       <li><a href="page2.html" class="yui3-pjax">Page Two</a></li>
       <li><a href="page3.html" class="yui3-pjax">Page Three</a></li>
   </ol>

4. 就到这就实现一个简单的Pjax功能了

   Pjax配置属性

   属性	类型	默认	描述
   addPjaxParam	布尔值	true	如果true，“pjax=1”查询参数将附加到通过 Pjax 请求的所有 URL。 浏览器在缓存内容时会忽略 HTTP 请求头，因此如果使用相同的 URL 请求部分 Pjax 页面和完整页面，浏览器会将它们缓存在相同的 key 下，并且稍后可能会在用户实际请求时加载缓存的部分页面整页（反之亦然）。 为了防止这种情况，我们可以向 URL 添加一个虚假的查询参数，这样 Pjax URL 将始终与非 Pjax URL 分开缓存。
   container	节点	null	通过 Pjax 加载页面时应插入内容的节点。该节点的现有内容将被删除，以便为新内容让路。 如果未设置，加载的内容将不会自动插入到页面中。
   contentSelector	细绳	null	CSS 选择器用于提取通过 Pjax 加载的页面内容的特定部分。 例如，如果您想加载页面example.html但只使用 id 为“pjax-content”的元素中的内容，contentSelector则应设置 为“#pjax-content”。 如果未设置，将使用整个页面。
   linkSelector	细绳	"a.yui3-pjax"	用于过滤链接点击事件的 CSS 选择器字符串，以便只有匹配它的链接才会应用 Pjax 的增强导航行为。 当一个链接被点击并且该链接与这个选择器匹配时，Pjax 将尝试通过 Ajax 加载它。如果不支持 HTML5 历史记录，或者如果链接被中键单击、右键单击或在按下修饰键时单击，则浏览器将像处理任何旧链接一样处理链接单击。
   navigateOnHash	布尔值	false	是否应增强导航到当前页面上的哈希片段标识符并navigate触发事件。 默认情况下，当用户通过单击页内链接（例如<a href="#top">Top of page</a>）在页面内导航时，Pjax 允许浏览器执行其默认操作，并且不会尝试干扰或增强页内导航。
   scrollToTop	布尔值	true	导航到 URL 后是否应将页面滚动到顶部。 当用户点击浏览器的后退按钮时，将保持之前的滚动位置。
   timeout	数字	30000	Ajax 请求应该超时的时间（以毫秒为单位）。当超时发生时，该error事件将被触发。
   titleSelector	细绳	"title"	CSS 选择器用于从通过 Pjax 加载的页面内容中提取页面标题。 默认情况下，这设置为从<title>元素中提取标题，但您可以自定义它以从<h1>或任何其他元素中提取标题，如果这更适合您正在加载的内容。

最后，官方文档请参考：https://clarle.github.io/yui3/yui/docs/pjax/

网站实现pjax跳转，js实现局部刷新跳转

原文：https://www.cnblogs.com/howeya/p/14860448.html