pjax实现页面局部刷新跳转
来源:互联网 发布:a字裙淘宝 编辑:程序博客网 时间:2024/06/04 23:09
简介
pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作。
pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL(JS,CSS),提供了一个快速的外观,全页面加载。但它确实就是Ajax和pushstate。
点击这里查看pushState的浏览器支持情况。
概述
pjax不是全自动的。您需要设置和指定一个包含在您的页面上的元素,当您浏览您的网站时将被替换。
可以参考下面的HTML代码结构和标签:
<!DOCTYPE html><html><head> <!-- styles, scripts, etc --></head><body> <h1>My Site</h1> <div class="container" id="pjax-container"> Go to <a href="/page/2">next page</a>. </div></body></html>
我们要pjax抓取URL/page/2然后替换#pjax-container不管它什么回来。没有风格或脚本将被加载,甚至<h1>可以保持不变 – 我们只是想改变#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 endend
安装插件
通过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]'到你的选择器中。
或者试试这个选择器匹配任何<a data-pjax href=>链接插入<div data-pjax>容器。
$(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-container')
参数
内容提要$.fn.pjax函数是:
$(document).pjax(selector, [container], options)
selector是一个字符串,比如要点击的文本 event delegation.
container是一个字符串,选择唯一标识pjax容器。
options下面所描述的一个对象。
pjax 可选参数
您可以通过写全局更改默认设置$.pjax.defaults对象:
$.pjax.defaults.timeout = 1200
$.pjax.click
这是由$.fn.pjax本身较低水平的功能。它可以让你获得更多的控制在pjax事件处理。
本例使用当前点击上下文来设置一个父级作为容器:
if ($.support.pjax) { $(document).on('click', 'a[data-pjax]', function(event) { var container = $(this).closest('[data-pjax-container]') $.pjax.click(event, { container: container }) })}
注意:使用隐形的$.support.pjax保证,我们没有使用$.fn.pjax因此,我们应该避免结合此事件处理程序,除非浏览器实际上是要使用pjax。
$.pjax.submit
通过pjax提交表单。
$(document).on('submit', 'form[data-pjax]', function(event) { $.pjax.submit(event, '#pjax-container') })
$.pjax.reload
启动一个应用pjax机制服务器当前的URL请求和响应替换容器。不添加浏览器历史条目。
$.pjax.reload('#pjax-container', options)
$.pjax
手动调用pjax。主要用于当你想在一个处理程序,并不是来自于点击开始pjax请求。如果你可以得到一个点击event,容器$.pjax.click(event)代替。
function applyFilters() { var url = urlForFilters() $.pjax({url: url, container: '#pjax-container'}) }
事件方法
所有pjax事件除了pjax:click和pjax:clicked从pjax容器,不被点击的链接被解雇。
pjax:send和pjax:complete如果你正在执行一个加载项,则是一个很好的事件使用。他们只会如果一个实际的XHR请求触发,如果内容是从缓存中加载:
$(document).on('pjax:send', function() { $('#loading').show()}) $(document).on('pjax:complete', function() { $('#loading').hide()})
取消的一个例子pjax:timeout事件是如果微调正在显示禁用回退超时行为:
$(document).on('pjax:timeout', function(event) { // Prevent default timeout redirection behavior event.preventDefault() })
服务器端
服务器配置将在语言和框架之间变化。下面的示例演示如何配置Rails。
def index if request.headers['X-PJAX'] render :layout => false endend
一个X-PJAX请求头文件 header 设置为区分正常XHR请求一个pjax请求。在这种情况下,如果请求是pjax,我们跳过布局HTML只是使容器内的内容。
点击这里选择一个合适的 pjax plugin 为您最喜爱的服务器框架。
迫使重新加载响应类型
默认情况下,pjax 将迫使页的全部重新加载,如果它接收到来自服务器下列反应之一:
网页内容引入<html>当fragment选择没有明确的配置。Pjax假定服务器的响应没有被正确配置为pjax。假如fragmentpjax选项,则pjax只会解压缩到插入基于该选择器的DOM的内容。
页面内容是空白的。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
布局重新加载
布局可以被强迫做硬重装时,资产或HTML的变化。
首先设置你的头在初始布局版采用了自定义的元标记。
<meta http-equiv="x-pjax-version" content="v123">
然后从服务器端,设置X-PJAX-Version头文件为下面的样子:
if request.headers['X-PJAX'] response.headers['X-PJAX-Version'] = "v123" end
部署一个部署,将该版本常数凸到迫使客户机做一个完整的重新加载下一个请求获得新的布局和资产。
- pjax实现页面局部刷新跳转
- Pjax实现网页局部刷新
- node+pjax实现不刷新跳转
- PJAX实现页面无刷新跳转及加载数据(浏览器可回退前进)
- pjax实现无刷新
- Codeigniter整合PJAX(pushstate+ajax)实现无刷新页面
- Ajax 实现页面局部刷新
- jquery实现页面局部刷新
- jquery实现页面局部刷新
- js实现页面局部刷新
- jquery实现页面局部刷新
- Ajax实现页面局部刷新
- django实现局部页面刷新
- AjaxAnyWhere 实现页面局部刷新,局部分页
- 在 Laravel 5 中集成 Pjax 实现无刷新加载页面的扩展包 —— Laravel Pjax
- 无刷新实现页面跳转
- 页面实现跳转和刷新
- 页面实现跳转和刷新
- Android Studio如何在模拟机中添加文件
- Codeforces Round #441 Div. 1 F. Royal Questions
- linux上tomcat服务器更新项目的步骤
- 安装pip
- Async Await初探
- pjax实现页面局部刷新跳转
- Hibernate关系映射级别注解(多对一单向外键关联)
- ConfigReader(四十九)—— ReadSkillCameraConfig
- hdoj 4825 Xor Sum
- [linux-shell]shell的case使用
- HDU 1052 Tian Ji -- The Horse Racing(贪心)
- centos安装aria2及web端
- 第一天:python的安装及print函数简单使用
- C++基础