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. xth 的玫瑰花（codevs 1360）

    题目描述 Description 这天是rabbit 的生日前夕,Xth 来到花店,要给他的rabbit 买玫瑰花,为了保证质 量,他跟花店老板——小菜儿同学要求自己到花田采摘.小菜儿灰常希望早日见到 ...

  2. 洛谷 P2965 [USACO09NOV]农活比赛The Grand Farm-off

    P2965 [USACO09NOV]农活比赛The Grand Farm-off 题目描述 Farmer John owns 3*N (1 <= N <= 500,000) cows su ...

  3. ZooKeeper官方文档资源

    一般来说官方的文档是最权威的. 入口:http://zookeeper.apache.org/ 在右侧即可进入相应版本文档: 如果想要看主干的文章,入口如下,主干是最稳当的版本:http://zook ...

  4. 网易杭研后台技术中心的博客 -MYSQL ：OOM

    http://backend.blog.163.com/blog/#m=0&t=3&c=mysql

  5. java如何实现替换指定位置的指定字符串的功能

    /**  * @创建日期 2013-07-15  * @创建时间 14:25:59  * @版本号 V 1.0  */ public class CosTest {     public static ...

  6. HDU 5387 Clock （MUT#8 模拟）

    [题目链接]:pid=5387">click here~~ [题目大意]给定一个时间点.求时针和分针夹角,时针和秒针夹角,分针和秒针夹角 模拟题,注意细节 代码: #include&l ...

  7. BeanUtils使用案例

     1.BeanUtils框架/工具(APACHE开源组织开发)    (1)BeanUtils框架可以完毕内省的一切功能.并且优化    (2)BeanUtils框架可以对String<-> ...

  8. ip地址转换成16进制long

    <span style="font-size:18px;">public class IpUtil { /** * ip地址转换成16进制long * @param i ...

  9. SpringMVC + MyBatis 配置文件

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="htt ...

  10. outlook创建收信规则，将收到的所有邮件，转发到qq邮箱，然后删除

    因为outlook默认只有400M的空间. 使用企业邮箱的时候,很快就满了. 本来是打算在qq邮箱中,添加其他邮箱来收取的. http://service.mail.qq.com/cgi-bin/he ...