Pjax 无刷新更改网页 URL 实现加载网页 - 文章教程

Pjax 无刷新更改网页 URL 实现加载网页

发布于 2018-07-16 字数 5668 浏览 2735 评论 0

pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术,同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问,并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。

如何使用

jQuery 版

将 jquery.pjax.js 部署到你的页面中,将需要使用 pjax 的 a 链接进行绑定(不能绑定外域的url)如:

$.pjax({
	selector: 'a',
	container: '#container', //内容替换的容器
	show: 'fade',  //展现的动画,支持默认和fade, 可以自定义动画方式,这里为自定义的function即可。
	cache: true,  //是否使用缓存
	storage: true,  //是否使用本地存储
	titleSuffix: '', //标题后缀
	filter: function(){},
	callback: function(){}
})

qwrap 版

qwrap 版需要在页面引入 qwrap 和对应的 ajax 组件。

QW.pjax(
	selector: 'a',
	container: '#container',
	cache: true,
	storage: true,
	titleSuffix: '',
	filter: function(){},
	callback: function(){}
})

kissy 版

kissy 版需要在页面引入kissy。

KISSY.pjax(
	selector: 'a',
	container: '#container',
	cache: true,
	storage: true,
	titleSuffix: '',
	filter: function(){},
	callback: function(){}
})

由于 kissy 核心没有引用 sizzle, 只支持一些简单的 selector, 所以 selector 参数的值最好只为 a, 对于一些不使用 pjax 的链接,可以通过 filter 函数参数进行过滤,具体的使用方法见下面的参数说明。

参数及含义

options.selector

给哪些 selector 绑定 pjax 事件,一般的为 a , 如果要去掉一些外连的 URL, 这里的 selector 可以为 “a[href^=’https://www.wenjiangs.com’]”,表示域名是 www.wenjiangs.com 下才有pjax事件(也就是站内)。

options.container

内容变换容器,是指哪个容器里的内容发生的变换,如: ‘#content’,

options.cache

缓存pjax的内容,对于更新不频繁的页面来说,缓存pjax内容可以减少HTTP请求数

options.cache的值是缓存时间,单位为秒,默认为: 24*3600(一天)

options.storage

是否使用本地存储进行内容的缓存,使用本地存储缓存的话即使关闭浏览器后,下次访问如果缓存时间有效的话会直接读取缓存的内容,避免重新请求了。

options.titleSuffix

标题后缀

对于pjax显示标题,首先会从返回内容里查找,如果没有的话,会取当前a标签的title值,并可以指定统一的后缀

options.filter

过滤函数,虽然options.selector可以写个比较复杂的选择器,但有时候还要过滤一些URL,如:后台的URL。

这时候就可以使用options.filter函数进行过滤了。如:

{
	filter: function(href){
		//对于wordpress后台的URL和wp-content里的URL不使用pjax
		if(href.indexOf('/wp-admin') || href.indexOf('/wp-content')){
			return true;
		}
	}
}

对于要过滤掉的URL, 需要返回值为true。

options.callback

回调函数,这个函数不同于pjax.start和pjax.end(这2个事件下面描述)事件。

该函数会在每个阶段都会执行,即使pjax发生error的时候,并且会传递一个参数标明当前的状态,如:

{
	callback: function(status){
		var type = status.type;
		switch(type){
			case 'success': ;break; //正常
			case 'cache':;break; //读取缓存 
			case 'error': ;break; //发生异常
			case 'hash': ;break; //只是hash变化
		}
	}
}

事件(events)

一般情况下使用 ajax 来获取数据的时候,我们都希望有个 loading 的效果,pjax 本身不提供这个功能,但提供了2个相关的事件。

如果需要这样的功能,可以在事件里实现这种功能。

  • pjax.start 在 pjax ajax 发送 request 之前调用
  • pjax.end 在 pjax ajax 结束时调用

这样你可以在 pjax.start 事件里显示 loading 效果,在 pjax.end 事件里隐藏 loading了如:

$('#container').bind('pjax.start', function(){
	$('#loading').show();
})
$('#container').bind('pjax.end', function(){
	$('#loading').hide();
})

浏览器支持

提供了 history.pushState 接口的浏览器才支持这个功能

如果浏览器不支持这个功能而调用 pjax 方法的话,实际上什么都没做,还是使用默认的链接响应机制

后端需要做的

类似于 ajax, 异步请求的时候后端不能将公用的内容也返回。

所以需要一个判断是否 pjax 请求的接口。如 php 可以借鉴下面的实现

function is_pjax(){
	return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'];
}

其他

实际上该类的封装借鉴于 https://github.com/defunkt/jquery-pjax

对其增加了缓存、本地存储和动画等功能,并且将一些参数进行了优化。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3