pjax = pushState + ajax

        .--.

       /    \

      ## a  a

      (   '._)

       |'-- |

     _.\___/_   ___pjax___

   ."\> \Y/|<'.  '._.-'

  /  \ \_\/ /  '-' /

  | --'\_/|/ |   _/

  |___.-' |  |`'`

    |     |  |

    |    / './

   /__./` | |

      \   | |

       \  | |

       ;  | |

       /  | |

 jgs  |___\_.\_

      `-"--'---'

Introduction

pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button.

pjax works by grabbing html from your server via ajax and replacing the content 
of a container on your page with the ajax’d html. It then updates the browser’s 
current URL using pushState without reloading your page’s layout or any 
resources (JS, CSS), giving the appearance of a fast, full page load. But really 
it’s just ajax and pushState.

For browsers that don’t support pushStatepjax fully degrades.

Overview

pjax is not fully automatic. You’ll need to setup and designate a containing element on your page that will be replaced when you navigate your site.

Consider the following page.

<!DOCTYPE html>

<html>

<head>

  <!-- styles, scripts, etc -->

</head>

<body>

  <h1>My Site</h1>

  <div class="container" id="pjax-container">

    Go to <a href="http://wincn.net/page/2">next page</a>.

  </div>

</body>

</html>

We want pjax to grab the URL /page/2 then replace #pjax-container with 
whatever it gets back. No styles or scripts will be reloaded and even the <h1> 
can stay the same - we just want to change the #pjax-container element.

We do this by telling pjax to listen on a tags and use #pjax-container as the target container:

$(document).pjax('a', '#pjax-container')

Now when someone in a pjax-compatible browser clicks “next page” the content of #pjax-container will be replaced with the body of /page/2 .

Magic! Almost. You still need to configure your server to look for pjax requests and send back pjax-specific content.

The pjax ajax request sends an X-PJAX header so in this example (and in most cases) we want to return just the content of the page without any layout for any requests with that header.

Here’s what it might look like in Rails:

def index

  if request.headers['X-PJAX']

    render :layout => false

  end

end

If you’d like a more automatic solution than pjax for Rails check out Turbolinks.

Also check out RailsCasts #294: Playing with PJAX.

Installation

bower

Via Bower:

$ bower install jquery-pjax

Or, add jquery-pjax to your app’s bower.json .

"dependencies": {

  "jquery-pjax": "latest"

}

standalone

pjax can be downloaded directly into your app’s public directory - just be sure you’ve loaded jQuery first.

curl -LO https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js

WARNING Do not hotlink the raw script url. GitHub is not a CDN.

Dependencies

Requires jQuery 1.8.x or higher.

Compatibility

pjax only works with browsers that support the history.pushState 
API. When the API isn’t supported pjax goes into fallback mode: 
$.fn.pjax calls will be a no-op and $.pjax will hard load the given URL.

For debugging purposes, you can intentionally disable pjax even if the browser supports pushState . Just call $.pjax.disable() . To see if pjax is actually supports pushState , check $.support.pjax .

Usage

$.fn.pjax

Let’s talk more about the most basic way to get started:

$(document).pjax('a', '#pjax-container')

This will enable pjax on all links and designate the container as #pjax-container .

If you are migrating an existing site you probably don’t want to enable pjax everywhere just yet. Instead of using a global selector like a try annotating pjaxable links with data-pjax , then use 'a[data-pjax]'as your selector.

Or try this selector that matches any <a data-pjax href="http://wincn.net/2015/06/18/jquery-pjax%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/> links inside a <div data-pjax> container.

$(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-container')

Arguments

The synopsis for the $.fn.pjax function is:

$(document).pjax(selector, [container], options)
  • container is a string selector that uniquely identifies the pjax container.
  • options is an object with keys described below.
pjax options
key default description
timeout 650 ajax timeout in milliseconds after which a full refresh is forced
push true use pushStateto add a browser history entry upon navigation
replace false replace URL without adding browser history entry
maxCacheLength 20 maximum cache size for previous container contents
version a string or function returning the current pjax version
scrollTo 0 vertical position to scroll to after navigation. To avoid changing scroll position, pass false.
type "GET" see $.ajax
dataType "html" see $.ajax
container CSS selector for the element where content should be replaced
url link.href a string or function that returns the URL for the ajax request
target link eventually the relatedTarget value for pjax events
fragment CSS selector for the fragment to extract from ajax response

You can change the defaults globally by writing to the $.pjax.defaults object:

$.pjax.defaults.timeout = 1200

$.pjax.click

This is a lower level function used by $.fn.pjax itself. It allows you to get a little more control over the pjax event handling.

This example uses the current click context to set an ancestor as the container:

if ($.support.pjax) { $(document).on('click', 'a[data-pjax]', function(event) { var container = $(this).closest('[data-pjax-container]') $.pjax.click(event, {container: container}) }) }

NOTE Use the explicit $.support.pjax guard. We aren’t using $.fn.pjax so we should avoid binding this event handler unless the browser is actually going to use pjax.

$.pjax.submit

Submits a form via pjax.

$(document).on('submit', 'form[data-pjax]', function(event) { $.pjax.submit(event, '#pjax-container') })

$.pjax.reload

Initiates a request for the current URL to the server using pjax mechanism and replaces the container with the response. Does not add a browser history entry.

$.pjax.reload('#pjax-container', options)

$.pjax

Manual pjax invocation. Used mainly when you want to start a pjax request in a handler that didn’t originate from a click. If you can get access to a click event ,consider $.pjax.click(event) instead.

function applyFilters() { var url = urlForFilters() $.pjax({url: url, container: '#pjax-container'}) }

Events

All pjax events except pjax:click & pjax:clicked are fired from the pjax 
container, not the link that was clicked.

jquery-pjax使用说明的更多相关文章

  1. jQuery Pjax – 页面无刷新加载，优化用户体验

    pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...

  2. jquery.pjax.js bug问题解决集锦

    jquery.pjax 是一个很好的局部刷新插件,但实际应用过程是还是会有很多小问题,部分问题解决如下: 1.pjax 局部加载时候,IE 存在缓存问题,很容易理解,pjax是通过jquery的aja ...

  3. 使用jquery.pjax实现SPA单页面应用

    前面文章介绍了前端路由简单实现和Pjax入门方面的文章,今天来分享一个单页面应用神器jquery.pjax.js. HTML 我们准备一个加载div#loading,默认隐藏,ajax请求的时候才显示 ...

  4. jquery.pjax 单页面, 无刷新打开页面.

    介绍: pushState+ajax=pjax 工作原理: 什么是pjax? 现在很多网站(facebook, twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳 ...

  5. jQuery+pjax简单示例汇总

    pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮. ajax缺点是破坏了浏览器的前进后退,因为ajax的请求 ...

  6. 解决jquery.pjax加载后的异常滚动

    个人博客 地址:http://www.wenhaofan.com/article/20181106154356 在使用jquery.pjax的时候发现每次加载完成后都会将滚动条滚动至顶部,用户体验极不 ...

  7. jquery pjax 用法总结

    以前我们点击a链接的时候总是会刷新整个页面并跳转到新页面,中间可以很明显的看到短暂的白屏.pjax就很好的解决了这问题. pjax的原理很简单,就是发送一个ajax请求,获取html代码,再把相关代码 ...

  8. 表单验证——jquery validate使用说明【另一个教程】

    [参考:http://www.tuicool.com/articles/y6fyme] jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证 ...

  9. jquery选择器使用说明

    在jquery中选择器是一个非常重要的东西,几乎做什么都离不开它,下面我总结了jquery几种选择器的用法.以方便后面直接可以用到!! 层次选择器: 1.find()://找到该元素的子元素以及孙子元 ...

  10. jquery.timers使用说明

    jQuery Timers提供了三个函式 1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])2. oneTime(时间间隔, [定时器名称],  ...

随机推荐

  1. 选择客栈（codevs 1135）

    题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一家咖啡店,每家咖啡店均 ...

  2. ggplot画图笔记

    1.数据集相加符号 %+% 2.图形属性映射 aesc()函数 aes(x=mpg,y=wt)  把mpg属性映射为x,wt属性映射为y 图层图形属性可以添加.修改和删除映射. 如 3.位置调整参数 ...

  3. ZooKeeper教程资源收集（简介/原理/示例/解决方案）

    菩提树下的杨过: ZooKeeper 笔记(1) 安装部署及hello world ZooKeeper 笔记(2) 监听数据变化 ZooKeeper 笔记(3) 实战应用之[统一配置管理] ZooKe ...

  4. 优化实例- not in 和 not exists

    客户运行一个SQL,非常慢.于是进行了一下改写.速度飞快,首先看一下原来的SQL. original sql SQL> explain plan for 2 select count(*) fr ...

  5. vs2010+cuda5.0+qt4.8

    在进行CUDA处理的时候,总是在控制台程序下,于是就想要通过qt进行界面处理. 一开始先测试一下qt的环境,新建一个qt项目,不过在运行的时候提示平台不对,换成64位 出现 这个是qt的版本问题,在右 ...

  6. IntelliJ IDEA 16 EAP新特性一览

    IntelliJ IDEA 16 EAP新特性一览 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs IntelliJ I ...

  7. hibernate之关于一对一单向，双向关联映射

    [hibernate]之关于一对一单向,双向关联映射 首先我们来看,Hibernate官方对于一对一单向关联的解释: 基于外键关联的单向一对一关联和单向多对一关联差点儿是一样的. 唯一的不同就是单向一 ...

  8. Hilbert曲线简单介绍及生成算法

    Hilbert曲线 Hilbert曲线是一种填充曲线,相似的填充曲线还包含Z曲线.格雷码等其它方法.Hilbert曲线根据自身空间填充曲线的特性,能够线性地贯穿二维或者更高维度每一个离散单元.而且只穿 ...

  9. Jmeter压测问题_Non HTTP response code: java.net.ConnectException

    负载机压测,线程500,服务器根本无压力,负载机本身发的请求都是失败的 Sample result如下: Thread Name: 考勤(考勤提交) 1-255 Sample Start: 2018- ...

  10. jenkins任务失败重新构建插件Naginator Plugin

    1.下载插件Naginator Plugin 2. 如何配置失败任务自动重试 安装Naginator+Plugin后,新建一个任务,在构建后操作 选择 "Retry build after ...