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

随机推荐

ganglia3.7.2,web3.7.1安装
1.准备安装包 ganglia-3.7.2-2.el6.x86_64.rpm ganglia-gmetad-3.7.2-2.el6.x86_64.rpm ganglia-gmond-3.7.2-2.e ...
Linux学习总结（3）——Linux实用工具
1. Windows下同步Linux文件(Linux安装Samba和配置) 场景需求: 安装了Ubuntu在虚拟机上,但是代码编辑或者其它更多的操作的时候,还是习惯在windows下进行.如果wind ...
ASP.NET MVC 源码分析（二） —— 从 IRouteBuilder认识路由构建
我们来看IRouteBuilder的定义: public interface IRouteBuilder { IRouter DefaultHandler { get; set; } IService ...
Linxu用户管理（转）
说明:用户管理的操作涉及root权限,所以以下实例中应该使用sudo或者root用户进行操作. 背景: Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管 ...
redo allocation latch redo copy latch
这两个latch 是干什么的一直有点迷糊,刚才上网查了一下,总结如下: redo allocation latch 在Log Buffer中分配内存空间时需要获取Redo allocation lat ...
clear out all variables without closing terminal
clear out all variables without closing terminal https://unix.stackexchange.com/questions/172655/cle ...
eclipse中Client/Server程序生成exe
先建两个Java Project项目,一个写Client,一个写Server端程序,程序大致为一个Server端建立监听某个port.多个Client端能够连接,实现例如以下: 1. Ser ...
Smobiler实现列表展示—GridView（开发日志十二）
一.列表功能展示二.具体步骤 2.1,列表控件设计部分 2.1-① 在窗口SmoiblerForm1中加入gridview控件 2.1-② 在属性栏设置gridview控件的大小和位置 ...
poj 1068 Parencodings（模拟）
转载请注明出处:viewmode=contents">http://blog.csdn.net/u012860063?viewmode=contents 题目链接:http://poj ...
SqlService Date 格式化
<choose> <when test="dateFlag=='day'"> ), FRI.INVOICE_DATE, ) AS CREATED_ON, & ...

jquery-pjax使用说明