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(时间间隔, [定时器名称], ...

随机推荐

清北学堂模拟赛d5t4 套路
分析:题目非常短,看起来非常难,其实把图一画就明白了.有向图,每个点的出度都是1,那么整个图肯定是环上套链,链上的边无论怎样反向都不会形成环,环上的边也可以随便反向,但是最终不能反为同向的,总方案数减 ...
App架构设计经验谈:接口”安全机制”的设计
[原文地址点击打开链接] 原创文章,转载请注明:转载自Keegan小钢并标明原文链接:http://keeganlee.me/post/architecture/20160107 微信订阅号:ke ...
nyoj_85_有趣的数_201312122130
有趣的数时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述把分数按下面的办法排成一个数表. 1/1 1/2 1/3 1/4..... 2/1 2/2 ...
not in 和 <> 不走索引
首先我们要知道的一点就是CBO的代码oracle是不会对我们公开的,起码现在是.所以本文中的结论不一定适用所有的版本.在应用本文的结论之前最好先试一下. ok 下面就是本文的结论,当你在where语句 ...
php集成环境安装与測试
一. 软件下载 1. AppServ 2.5.10包括的软件有Apache.Apache Monitor.PHP.MySQL.PHP-Nuke.phpMyAdmin. 2. 下载地址: http:// ...
如何杀掉(kill)Oracle中的会话(Session)
Oracle中造成一些表被死锁或者会话异常退出,如执行了更新记录操作后,既没有commit也没有rollback,网络就断开了,也会造表或记录被锁住,待到超时后才会被解开,那样都会造成应用操作被阻塞. ...
spark定制之五：使用说明
背景 spark-shell是一个scala编程解释运行环境,能够通过编程的方式处理逻辑复杂的计算,但对于简单的类似sql的数据处理,比方分组求和,sql为"select g,count(1 ...
C# 数据库备份与还原小妹做了一个winform系统，需要对sql2000数据库备份和还原（小妹妹你太狠了）
成功了,把代码帖出来给大家看看,跟我刚开始帖出来的差不多,是需要杀掉进程的,我之前调用的存储过程,可能有点问题,现在改成sql了/// <summary> /// 数据库 ...
mysql数据库操作（1）
1.mysql 数据库备份: 语法: MYSQLDUMP -uUSER -pPASS DataBase > Path 其中:USER 是用户名,PASS 是密码,DataBase 是数据库名, ...
poj--2031--Building a Space Station（prime）
Building a Space Station Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 6635 Accepte ...

jquery-pjax使用说明