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)

selector is a string to be used for click event delegation.

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使用说明的更多相关文章

jQuery Pjax – 页面无刷新加载，优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
jquery.pjax.js bug问题解决集锦
jquery.pjax 是一个很好的局部刷新插件,但实际应用过程是还是会有很多小问题,部分问题解决如下: 1.pjax 局部加载时候,IE 存在缓存问题,很容易理解,pjax是通过jquery的aja ...
使用jquery.pjax实现SPA单页面应用
前面文章介绍了前端路由简单实现和Pjax入门方面的文章,今天来分享一个单页面应用神器jquery.pjax.js. HTML 我们准备一个加载div#loading,默认隐藏,ajax请求的时候才显示 ...
jquery.pjax 单页面, 无刷新打开页面.
介绍: pushState+ajax=pjax 工作原理: 什么是pjax? 现在很多网站(facebook, twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳 ...
jQuery+pjax简单示例汇总
pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮. ajax缺点是破坏了浏览器的前进后退,因为ajax的请求 ...
解决jquery.pjax加载后的异常滚动
个人博客地址:http://www.wenhaofan.com/article/20181106154356 在使用jquery.pjax的时候发现每次加载完成后都会将滚动条滚动至顶部,用户体验极不 ...
jquery pjax 用法总结
以前我们点击a链接的时候总是会刷新整个页面并跳转到新页面,中间可以很明显的看到短暂的白屏.pjax就很好的解决了这问题. pjax的原理很简单,就是发送一个ajax请求,获取html代码,再把相关代码 ...
表单验证——jquery validate使用说明【另一个教程】
[参考:http://www.tuicool.com/articles/y6fyme] jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证 ...
jquery选择器使用说明
在jquery中选择器是一个非常重要的东西,几乎做什么都离不开它,下面我总结了jquery几种选择器的用法.以方便后面直接可以用到!! 层次选择器: 1.find()://找到该元素的子元素以及孙子元 ...
jquery.timers使用说明
jQuery Timers提供了三个函式 1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])2. oneTime(时间间隔, [定时器名称], ...

随机推荐

E. Rusty String
E. Rusty String time limit per test 3 seconds memory limit per test 512 megabytes input standard inp ...
[poj3974]Palindrome_Manacher
Palindrome poj-3974 题目大意:求字符串的最长回文子串. 注释:$1\le strlen(s) \le 10^6$. 想法:介绍一种字符串算法——Manacher.求以每一个字符和字 ...
Spring Data Jpa-动态查询条件
/** * * 查看日志列表-按照时间倒序排列 * * @author: wyc * @createTime: 2017年4月20日下午4:24:43 * @history: * @return L ...
oracle 内部机制-DTRACE
Oracle SQL Tuning and CBO Internals: Based Optimizer with CBO Internals and SQL Tuning Optimization ...
springmvc mybatis 分页插件 pagehelper
springmvc mybatis 分页插件 pagehelper 下载地址:pagehelper 4.2.1 , jsqlparser 0.9.5 https://github.com/pagehe ...
jQuery和CSS3炫酷button点击波特效
这是一款效果很炫酷的jQuery和CSS3炫酷button点击波特效.该特效当用户在菜单button上点击的时候.从鼠标点击的点開始,会有一道光波以改点为原点向外辐射的动画效果,很绚丽. 在线演示:h ...
Android学习之6.0系统执行时权限设置
今天讲讲工作中遇见的6.0运行时权限处理问题.起因就是设置版本号更新时,在6.0系统会报错,起因就是6.0动态权限设置,由于在google为了安全考虑,对于一些特定权限会征询客户授权,这当然会大大添加 ...
WEB开发面试题
1.HTML的全称: 2.HTML的结构: 3.经常使用标签: 4.CSS的全称: 5.CSS的作用: 6.CSS中创建Class的语法: ...
HashMap源代码剖析
大部分思路都是一样的 .仅仅是一些细节不一样.源代码中都标了出来.jdk容器源代码还是挺简单的. public class HashMap<K,V> extends AbstractMap ...
Android WiFi开发教程（二）——WiFi的搜索和连接
在上一篇中我们介绍了WiFi热点的创建和关闭,如果你还没阅读过,建议先阅读上一篇文章Android WiFi开发教程(一)——WiFi热点的创建与关闭. 本章节主要继续介绍WiFi的搜索和连接. Wi ...

jquery-pjax使用说明