超级简单的示例
注意:pjax必须使用http协议,即在服务器里使用^_^
简介
pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作。
pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL(JS,CSS),提供了一个快速的外观,全页面加载。但它确实就是Ajax和pushstate。
概述
pjax不是全自动的。您需要设置和指定一个包含在您的页面上的元素,当您浏览您的网站时将被替换。
可以参考下面的HTML代码结构和标签:html>
我们要pjax抓取URL/page/2然后替换#pjax-container不管它什么回来。没有风格或脚本将被加载,甚至
我们会告诉pjax监听一个标签和使用#pjax-container作为目标容器:$(document).pjax('a', '#pjax-container')
现在在pjax兼容浏览器,点击 “next page” 网页的内容容器#pjax-container中的内容将被/page/2内容替换。
魔法!差不多你还需要配置你的服务器来寻找pjax请求并发送回pjax具体内容。
pjax的ajax请求会发送一个X-PJAX文件头,因此,在这个例子中(在大多数情况下)我们希望将页面的内容返回,而不需要任何与该头文件的任何请求的布局。
这是它可能看起来像在Rails上:def index if request.headers['X-PJAX'] render :layout => false
end
end
如果你想要更多的自动解决方案比pjax钢轨检查 Turbolinks.
安装插件
通过bower安装
$ bower install jquery-pjax
或者,添加jquery-pjax到你的bower.json文件中。"dependencies": { "jquery-pjax": "latest" }
standalone
pjax可以直接下载到你的应用程序的公共目录,请确保在此之前你已经加载jQuery。curl -LO https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js
注意:不要盗链原始脚本的URL,Github不是一个CDN。
依赖关系
需要 jQuery 1.8.x 或者更高版本。
兼容性
pjax 只能工作在高级版本的浏览器中,点击这里查看浏览器对history.pushStateAPI 的兼容情况。 当API不支持pjax进入备用模式:$.fn.pjax的调用将无法运行,并且$.pjax将硬盘加载给定的网址。
用于调试目的,你可以故意甚至浏览器是否支持禁用pjaxpushState。只需要调用$.pjax.disable()。看看pjax实际上是支持pushState,调用$.support.pjax。
使用方法
$.fn.pjax
让我们以最基本的方式来谈一谈如何使用jQuery.pjax.js:$(document).pjax('a', '#pjax-container')
这将使所有的链接pjax和指定的容器例如:#pjax-container.
如果你把一个现存的网站,你可能不想让pjax无处不在。而不是使用一个全球性的选择像A的注释与pjaxable链接data-pjax,使用'a[data-pjax]'到你的选择器中。
或者试试这个选择器匹配任何链接插入
pjax 可选参数参数默认值描述timeout650Ajax超时毫秒之后完全刷新是被迫的
pushtrue使用 pushState 在导航中添加浏览器历史记录
scrollTo0垂直位置以滚动导航。为了避免改变滚动位置,通过设置为false.
dataType"html"返回的数据类型,详见 $.ajax
urllink.href字符串或函数返回的URL ajax请求
targetlink最终relatedTarget的值,通过 pjax events
您可以通过写全局更改默认设置$.pjax.defaults对象:$.pjax.defaults.timeout = 1200
这是由$.fn.pjax本身较低水平的功能。它可以让你获得更多的控制在pjax事件处理。
本例使用当前点击上下文来设置一个父级作为容器:if ($.support.pjax) {
$(document).on('click', 'a[data-pjax]', function(event) {
var container = $(this).closest('[data-pjax-container]') $.pjax.click(event, {
注意:使用隐形的$.support.pjax保证,我们没有使用$.fn.pjax因此,我们应该避免结合此事件处理程序,除非浏览器实际上是要使用pjax。
启动一个应用pjax机制服务器当前的URL请求和响应替换容器。不添加浏览器历史条目。$.pjax.reload('#pjax-container', options)
所有pjax事件除了pjax:click和pjax:clicked从pjax容器,不被点击的链接被解雇。事件取消参数注意
pjax:click✔︎options阻止一个链接的默认事件,防止阻止pjax事件
pjax:beforeSend✔︎xhr, options参见 XHR headers
pjax:clickedoptionspjax后,已经得到了从点击一个链接开始
pjax:beforeReplacecontents, options在内容被替换前,HTML从服务器加载的内容
pjax:successdata, status, xhr, options在内容被替换后,HTML 内容从服务器加载
pjax:timeout✔︎xhr, options在选项options.timeout;之后除非取消,否则将很难刷新
pjax:error✔︎xhr, textStatus, error, options一个ajax错误,将执行原始的网页刷新,直到网页加载被取消
pjax:completexhr, textStatus, options总是在pjax执行完成以后调用,不论运行的结果
pjax:popstate事件direction属性:”back”/”forward”
pjax:beforeReplacecontents, options就在从缓存替换HTML内容
}) $(document).on('pjax:complete', function() {
服务器配置将在语言和框架之间变化。下面的示例演示如何配置Rails。def index if request.headers['X-PJAX'] render :layout => false
一个X-PJAX请求头文件 header 设置为区分正常XHR请求一个pjax请求。在这种情况下,如果请求是pjax,我们跳过布局HTML只是使容器内的内容。
点击这里选择一个合适的pjax plugin 为您最喜爱的服务器框架。
页面内容是空白的。Pjax assumes that the server is unable to deliver proper pjax contents.
HTTP服务器返回 4xx 或 5xx代码,说明一些服务器错误。
如果服务器需要影响,这将出现在pjax导航后浏览器的URL的URL(如HTTP重定向工作正常请求),它可以查看X-PJAX-URL头文件:def index
request.headers['X-PJAX-URL'] = "http://example.com/hello" end
部署一个部署,将该版本常数凸到迫使客户机做一个完整的重新加载下一个请求获得新的布局和资产。