pjax学习

PJAX 介绍

红薯 发布于 2012/04/11 22:06
 
阅读 61K+
 
收藏 116
 
 评论 11
jQuery.Pjax kissy
开发四年只会写业务代码,分布式高并发都不会还做程序员?->>>   

介绍

pushState是一个可以操作history的api,该api的介绍和使用请见这里:http://www.welefen.com/use-ajax-and-pushstate.html

目前已经有http://github.com/, http://plus.google.com, http://www.welefen.com 等网站已经使用。

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组件。

qwrap见: https://github.com/jkisjk/qwrap

对应的ajax组件见: https://github.com/jkisjk/qwrap/tree/master/resource/js/wagang/ajax

或者你直接引用我打包好的: http://www.welefen.com/wp-content/themes/gplus/js/qwrap.js 由于我的空间速度不咋地,建议你另存为。

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

 

kissy版

kissy版需要在页面引入kissy。

kissy见: http://docs.kissyui.com/

        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^='http://www.welefen.com']"

,表示域名是www.welefen.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函数进行过滤了。如:

    {fitler: function(href){//对于wordpress后台的URL和wp-content里的URL不使用pjaxif(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 在phax 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

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

转载于:https://www.cnblogs.com/feiwenstyle/p/10893396.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/279500.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL Server 2000详细安装过程及配置

说明:这篇文章是几年前我发布在网易博客当中的原创文章,但由于网易博客现在要停止运营了,所以我就把这篇文章搬了过来,虽然现如今SQL Server 2000软件早已经过时了,但仍然有一部分人在使用它,尤其是某些高校…

移动应用ios和网页应用_如何在iOS上一次移动多个应用

移动应用ios和网页应用Apple doesn’t really believe in detailed instruction manuals, so some handy tricks slip through the cracks. One such trick we’ve recently discovered is that you can move multiple app icons at once on iOS. Here’s how. Apple并不真正相…

2018-2019 20165226 Exp9 Web安全基础

2018-2019 20165226 Exp9 Web安全基础 目录 一、实验内容说明及基础问题回答 二、实验过程 Webgoat准备XSS攻击 ① Phishing with XSS 跨站脚本钓鱼攻击② Stored XSS Attacks 存储型XSS攻击③ Reflected XSS Attacks 反射型XSS攻击 CSRF攻击 ① Cross Site Request Forgery(CS…

用 git 同步 Colab 与 Gitlab、Github 之间的文件

Colab 是谷歌提供的免费 Jupyter 服务,可使用 GPU。但由于每次的 VM (虚拟机)登出后所有文件都会连同VM被毁掉。如何将一个项目里的程序或数据同步到 Colab则往往比较麻烦。尽管谷歌盘也可以挂到 Colab 里用&#xff0…

keep-alive使用_如何使用Google Keep进行无忧笔记

keep-alive使用There are a lot of note-taking apps out there. Google Keep may not be as powerful as services like Evernote, but its value is in its simplicity. Let’s talk about how to make the most of it. 那里有很多笔记应用程序。 Google Keep可能不如Evernot…

ZedGraph在项目中的应用

ZedGraph在项目中的应用将数据库数据提取出来,显示成曲线图(饼状、柱状或立体图)是项目中最常见的需求。 网上搜索到的解决方法,大多归为两类,一种是利用ActiveX组件,另一种是使用.net框架自带的画图的类。…

数据安全 数据销毁_如何安全销毁敏感数据CD / DVD?

数据安全 数据销毁You have a pile of DVDs with sensitive information on them and you need to safely and effectively dispose of them so no data recovery is possible. What’s the most safe and efficient way to get the job done? 您有一堆DVD,上面有敏…

动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?

代码&#xff1a;完整代码:<!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title></title> <style type"text/css"> *{ margin: 0; padding: 0; } .box{ background-color: #00B83F; } .flag{ position…

MAD huashi

name1 input("请输入一个名字") name2 input("请输入一个名词") name3 input("请输入一个形容词") name4 input("请输入一个名字") name5 input("请输入一个名字") name6 input("请输入一个长辈名字") name…

如何使用QuickConnect远程访问Synology NAS

Your Synology NAS includes a QuickConnect feature that lets you access its DiskStation Manager interface remotely. Here’s how to set it up. Synology NAS包含快速连接功能&#xff0c;可让您远程访问其DiskStation Manager界面。 设置方法如下。 You were likely gr…

网络编程介绍

1. 目标:编写一个C/S架构的软件 C/S: Client--------基于网络----------Server B/S: Browser-------基于网络----------Server2. 服务端需要遵循的原则: 1. 服务端与客户端都需要有唯一的地址,但是服务端的地址必须固定/绑定 2. 对外一直提供服务,稳定运行 3. 服…

css段落缩进_如何缩进Google文档中的段落

css段落缩进Indenting paragraphs in Google Docs requires access to the ruler, which you’ll only find in the full web version. The ruler is not present in the mobile apps. 在Google文档中缩进段落需要访问标尺&#xff0c;而标尺只能在完整的网络版本中找到。 标尺…

暑假个人小结

今天。。。不&#xff0c;是昨天&#xff0c;聂老大让我们写暑期总结 其中有这么一个 &#xff08;300字啊。。。我得好好想想怎么编&#xff09; 嘛&#xff0c;在这写点不敢交上去的内容吧。 7月总结 我收获了什么 很多课件 两个qq群 slay.one被人虐 联盟无畏先锋的号到了20级…

php-fpm with php-5.3.2 + APC

php-fpm 现在php官方内部已经出版本了&#xff0c;据说以后会出现在 php core 里&#xff0c;如果现在安装的话&#xff0c;可以svn得到最新代码,我抢先为快。 至于缓存&#xff0c;我用的facebook 试用的apc 测试了一段时间还很&#xff0c;满意。wget ftp://ftp.csx.cam.ac.u…

kotlin 初始化数组

为什么80%的码农都做不了架构师&#xff1f;>>> //初始化5个元素的数组&#xff0c;每个都为"0" val a:Array<String> Array(5, {"0"}) // val a:Array<String> Array(5, {"0"}) println(a.joinToString(separator &…

Tomcat - Tomcat安装

Tomcat官网&#xff1a;http://tomcat.apache.org/ 准备&#xff1a;JAVA环境布置完成 一、Windows平台 1. 版本选择 1&#xff09; 进入官网 2&#xff09; 查看版本匹配 官网说明 https://tomcat.apache.org/whichversion.html 3&#xff09; 需要查看已安装JAVA版本请打开终…

sonos 服务器_如何在Sonos上收听有声读物

sonos 服务器Audible, Amazon’s subscription audiobook service, was conspicuously absent from Sonos for the last few years. Thankfully, it’s now back. Here’s how to use it. 过去几年&#xff0c;Sonos明显缺少Amazon的订阅有声读物服务Audible。 幸运的是&#x…

SQL Server Management Studio清除历史登陆记录

今天做渗透,登陆目标服务器的数据库管理后发现留下了登陆的记录,自己鼓捣了半天,终于解决 删除C:\Documents and Settings\guest\Application Data\Microsoft\Microsoft SQL Server\90\Tools\Shell下的 mru.dat文件就可以了 本文转sinojelly51CTO博客&#xff0c;原文链接&…

停止抱怨英语_停止抱怨垂直视频

停止抱怨英语People have strong feelings about which direction video should be oriented. There are good reasons for that, but in some contexts, vertical video is completely fine and you should stop complaining about it. 人们对视频应该定向哪个方向有着强烈的感…

facebook_如何清除您的Facebook搜索记录

facebookSearch histories can tell a lot about you, and that’s especially true of Facebook’s search history. If you don’t want that sort of data left sitting around, here’s how to clear it. 搜索历史可以告诉您很多信息&#xff0c;Facebook的搜索历史尤其如此…