javascript - RightJS 上的 PJAX

Question

我只是在四处阅读，对 RightJS 产生了某种兴趣。我一直使用 jquery 作为我的主要 javascript 框架，但现在我想学习一些新东西。但是我想知道 RightJS 可以做 PJAX。我知道，只要您了解 PJAX 的工作原理，您就可以在任何框架中实现它。但是，我希望有人可以指导我如何构建它。

提前感谢您的帮助。

Answer 1

在大多数情况下，PJAX 包括：

1. 执行 ajax 请求以获取给定的页面 html（页面可以检查标题以了解它是否应该返回完整的 html 或仅返回将要更改的内容）
2. 将返回的 HTML 添加到容器中。
3. 使用 pushstate history API 更新浏览器位置。

为确保一切正常降级，您需要使用 JavaScript 将 PJAX 侦听器应用于内部链接，以便这些链接对于禁用 JS 的人都能正常工作。它还应该进行一些功能检查，以确保用户浏览器支持 pushstate API 等（如果不支持，则再次将所有内容保留为正常链接）。

如果您有兴趣了解如何实现这些东西，我实际上自己实现了 PJAX 的原生 JS 版本：https ://github.com/thybag/PJAX-Standalone/blob/master/pjax-standalone.js

此外，您还可以在此处浏览 JQuery PJAX 的源代码：https ://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js

Answer 2

像@Carl 一样，我已经实现了 pushState + AJAX 导航的独立实现，请参阅HTMLDecor。

PJAX 的理念是：

1. 一个页面由独特的内容 + 网站装饰（横幅、导航、广告、样式表等）组成。
2. 当用户第一次访问一个站点时，发送一个完整的页面。
3. 当用户导航到站点中的新页面时，只需发送独特的内容，而不是完整的页面。（尽管 PJAX 可以配置为从完整页面中提取唯一内容）。

HTMLDecor 的理念是：

1. 一个页面由独特的内容 +<link>网站装饰 +HTMLDecor.js脚本组成。
2. 当用户第一次访问网站时，发送页面（主要是独特的内容）。在浏览器中，HTMLDecor 检查<link>，获取站点装饰并将其与页面合并。
3. 当用户导航到新页面时，该页面已经是唯一内容，因此按原样发送。HTMLDecor 将更新页面的唯一内容并调用pushState()更新 URL。

换句话说，将所有站点装饰放在一个单独的文件中，然后HTMLDecor.js将其与浏览器中的独特内容合并。在那之后，pushState 支持是免费的——你不需要配置任何东西。

HTMLDecor.js压缩和 gzip 压缩后只有 6kB，与大多数 js 框架相比很小。您可以（应该）将 RightJS 从您的正常页面（应该只包含独特的内容）中移除，并且只将其放置在站点装饰页面中。

如果您看到 HTMLDecor 的演示，这一切可能会更有意义。看看我的博客。如果您查看页面源代码，您将看到页面顶部的广告、底部的导航栏和联系人弹出窗口不是页面源代码的一部分。它们都是用 AJAX 添加的。

当您导航到其中一篇博客文章时，使用了 pushState + AJAX（如果浏览器支持），您会看到广告和导航栏没有刷新。

还有一篇文章更详细地介绍了 HTMLDecor。

Answer 3

PJAX 是给娘娘腔的，这是官方的 :)

使用 AJAX + History.js（它有 RightJS 的钩子）