好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译)

超级简单的示例

百度网盘下载:https://pan.baidu.com/s/1jILPmMa

注意:pjax必须使用http协议,即在服务器里使用^_^

简介

pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作。

pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL(JS,CSS),提供了一个快速的外观,全页面加载。但它确实就是Ajax和pushstate。

点击这里查看pushState的浏览器支持情况

概述

pjax不是全自动的。您需要设置和指定一个包含在您的页面上的元素,当您浏览您的网站时将被替换。

可以参考下面的HTML代码结构和标签:

<!DOCTYPE html>
<html>
<head>
    <!-- styles, scripts, etc -->
</head>

<body>
    <h1>My Site</h1>
    <div class="container" id="pjax-container"> Go to <a href="/page/2">next page</a>. </div>
</body>
</html>

我们要pjax抓取URL/page/2然后替换#pjax-container不管它什么回来。没有风格或脚本将被加载,甚至<h1>可以保持不变 – 我们只是想改变#pjax-container元素。

我们会告诉pjax监听一个标签和使用#pjax-container作为目标容器:

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

现在在pjax兼容浏览器,点击 “next page” 网页的内容容器#pjax-container中的内容将被/page/2内容替换。

魔法!差不多你还需要配置你的服务器来寻找pjax请求并发送回pjax具体内容。

pjax的ajax请求会发送一个X-PJAX文件头,因此,在这个例子中(在大多数情况下)我们希望将页面的内容返回,而不需要任何与该头文件的任何请求的布局。

这是它可能看起来像在Rails上:

def index if request.headers['X-PJAX'] render :layout => false
  end
end

如果你想要更多的自动解决方案比pjax钢轨检查 Turbolinks.

也可以点击这里 RailsCasts #294: Playing with PJAX.

安装插件

通过bower安装

$ bower install jquery-pjax

或者,添加jquery-pjax到你的bower.json文件中。

"dependencies": { "jquery-pjax": "latest" }

standalone

pjax可以直接下载到你的应用程序的公共目录,请确保在此之前你已经加载jQuery。

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

注意:不要盗链原始脚本的URL,Github不是一个CDN。

依赖关系

需要 jQuery 1.8.x 或者更高版本。

兼容性

pjax 只能工作在高级版本的浏览器中,点击这里查看浏览器对history.pushStateAPI 的兼容情况。 当API不支持pjax进入备用模式:$.fn.pjax的调用将无法运行,并且$.pjax将硬盘加载给定的网址。

用于调试目的,你可以故意甚至浏览器是否支持禁用pjaxpushState。只需要调用$.pjax.disable()。看看pjax实际上是支持pushState,调用$.support.pjax。

使用方法

$.fn.pjax

让我们以最基本的方式来谈一谈如何使用jQuery.pjax.js:

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

这将使所有的链接pjax和指定的容器例如:#pjax-container.

如果你把一个现存的网站,你可能不想让pjax无处不在。而不是使用一个全球性的选择像A的注释与pjaxable链接data-pjax,使用'a[data-pjax]'到你的选择器中。

或者试试这个选择器匹配任何<a data-pjax href=>链接插入<div data-pjax>容器。

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

参数

内容提要$.fn.pjax函数是:

$(document).pjax(selector, [container], options)
  1. selector是一个字符串,比如要点击的文本 event delegation.

  2. container是一个字符串,选择唯一标识pjax容器。

  3. options下面所描述的一个对象。

pjax 可选参数
参数 默认值 描述
timeout 650 Ajax超时毫秒之后完全刷新是被迫的
push true 使用 pushState 在导航中添加浏览器历史记录
replace false 更换网址不添加浏览器历史记录
maxCacheLength 20 大缓存大小为以前的容器内容
version
一个字符串或函数返回当前pjax版
scrollTo 0 垂直位置以滚动导航。为了避免改变滚动位置,通过设置为false.
type "GET" 网页请求的方式,详见 $.ajax
dataType "html" 返回的数据类型,详见 $.ajax
container
CSS选择器的元素,其中的内容应及时更换
url link.href 字符串或函数返回的URL ajax请求
target link 最终relatedTarget的值,通过 pjax events
fragment
CSS选择器的碎片从Ajax响应提取

您可以通过写全局更改默认设置$.pjax.defaults对象:

$.pjax.defaults.timeout = 1200

$.pjax.click

这是由$.fn.pjax本身较低水平的功能。它可以让你获得更多的控制在pjax事件处理。

本例使用当前点击上下文来设置一个父级作为容器:

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

注意:使用隐形的$.support.pjax保证,我们没有使用$.fn.pjax因此,我们应该避免结合此事件处理程序,除非浏览器实际上是要使用pjax。

$.pjax.submit

通过pjax提交表单。

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

$.pjax.reload

启动一个应用pjax机制服务器当前的URL请求和响应替换容器。不添加浏览器历史条目。

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

$.pjax

手动调用pjax。主要用于当你想在一个处理程序,并不是来自于点击开始pjax请求。如果你可以得到一个点击event,容器$.pjax.click(event)代替。

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

事件方法

所有pjax事件除了pjax:click和pjax:clicked从pjax容器,不被点击的链接被解雇。

事件 取消 参数 注意
在下面的一个pjaxed链接事件生命周期
pjax:click ✔︎ options 阻止一个链接的默认事件,防止阻止pjax事件
pjax:beforeSend ✔︎ xhr, options 参见 XHR headers
pjax:start
xhr, options
pjax:send
xhr, options
pjax:clicked
options pjax后,已经得到了从点击一个链接开始
pjax:beforeReplace
contents, options 在内容被替换前,HTML从服务器加载的内容
pjax:success
data, status, xhr, options 在内容被替换后,HTML 内容从服务器加载
pjax:timeout ✔︎ xhr, options 在选项options.timeout;之后除非取消,否则将很难刷新
pjax:error ✔︎ xhr, textStatus, error, options 一个ajax错误,将执行原始的网页刷新,直到网页加载被取消
pjax:complete
xhr, textStatus, options 总是在pjax执行完成以后调用,不论运行的结果
pjax:end
xhr, options
浏览器的后退/前进导航事件生命周期
pjax:popstate

事件direction属性:”back”/”forward”
pjax:start
null, options 更换内容前
pjax:beforeReplace
contents, options 就在从缓存替换HTML内容
pjax:end
null, options 更换内容后

pjax:send和pjax:complete如果你正在执行一个加载项,则是一个很好的事件使用。他们只会如果一个实际的XHR请求触发,如果内容是从缓存中加载:

$(document).on('pjax:send', function() {
    $('#loading').show()
}) $(document).on('pjax:complete', function() {
    $('#loading').hide()
})

取消的一个例子pjax:timeout事件是如果微调正在显示禁用回退超时行为:

$(document).on('pjax:timeout', function(event) { // Prevent default timeout redirection behavior event.preventDefault() })

服务器端

服务器配置将在语言和框架之间变化。下面的示例演示如何配置Rails。

def index if request.headers['X-PJAX'] render :layout => false
  end
end

一个X-PJAX请求头文件 header 设置为区分正常XHR请求一个pjax请求。在这种情况下,如果请求是pjax,我们跳过布局HTML只是使容器内的内容。

点击这里选择一个合适的 pjax plugin 为您最喜爱的服务器框架。

迫使重新加载响应类型

默认情况下,pjax 将迫使页的全部重新加载,如果它接收到来自服务器下列反应之一:

  • 网页内容引入<html>当fragment选择没有明确的配置。Pjax假定服务器的响应没有被正确配置为pjax。假如fragmentpjax选项,则pjax只会解压缩到插入基于该选择器的DOM的内容。

  • 页面内容是空白的。Pjax assumes that the server is unable to deliver proper pjax contents.

  • HTTP服务器返回 4xx 或 5xx代码,说明一些服务器错误。

影响浏览器的网址

如果服务器需要影响,这将出现在pjax导航后浏览器的URL的URL(如HTTP重定向工作正常请求),它可以查看X-PJAX-URL头文件:

def index
  request.headers['X-PJAX-URL'] = "http://example.com/hello" end

布局重新加载

布局可以被强迫做硬重装时,资产或HTML的变化。

首先设置你的头在初始布局版采用了自定义的元标记。

<meta http-equiv="x-pjax-version" content="v123">

然后从服务器端,设置X-PJAX-Version头文件为下面的样子:

if request.headers['X-PJAX'] response.headers['X-PJAX-Version'] = "v123" end

部署一个部署,将该版本常数凸到迫使客户机做一个完整的重新加载下一个请求获得新的布局和资产。

相关链接

文章转载自:问说网 » jQuery.pjax.js使用AJAX和pushState无刷新加载网页

点赞54
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
romoautocare
 romoautocare 约 2 小时前回复
#197
<a href="http://www.wuxiangtaichi.com/washington-nationals-new-era-mlb-2-tone-link-9fifty-snapback-cap-hath">washington nationals new era mlb 2 tone link 9fifty snapback cap</a> <a href="http://www.culdesacmag.com/air-jordan-melo-gris-bleu-ciel-chaussuresh">air jordan melo gris bleu ciel</a> <a href="http://www.livinggreedy.com/nike-flyknit-lunar-3-rosa-argento-scarpel">nike flyknit lunar 3 rosa argento</a> <a href="http://www.clickstroy.com/adidas-harden-blue-gold-shoesj">adidas harden blue gold</a> <a href="http://www.zotorrent.com/air-jordan-retro-7-r%C3%B8d-lilla-skoi">air jordan retro 7 r酶d lilla</a> <a href="http://www.viptarimas.com/nike-kd-8-triple-nero-scarpeq">nike kd 8 triple nero</a>
romoautocare http://www.romoautocare.com/
ceracustica
 ceracustica 约 2 小时前回复
#196
<a href="http://www.investicrypto.com/nike-hypervenom-phantom-ii-fg-football-hvit-bl%C3%A5-oransje-obuvi">nike hypervenom phantom ii fg football hvit bl氓 oransje</a> <a href="http://www.nattaravnur.com/nike-tiempo-legend-v-fg-verde-zapatosl">nike tiempo legend v fg verde</a> <a href="http://www.uacheap.com/adidas-damian-lillard-2-blu-scarpeh">adidas damian lillard 2 blu</a> <a href="http://www.sheeradiance.com/adidas-predator-absolado-lz-shoesk">adidas predator absolado lz</a> <a href="http://www.solclimasur.com/oakley-fast-jacket-black-frame-gray-lens-sunglassesh">oakley fast jacket black frame gray lens</a> <a href="http://www.successlms.com/nike-mercurial-superfly-fg-gris-rose-noir-chaussuresl">nike mercurial superfly fg gris rose noir</a>
[url=http://www.ceracustica.com/]ceracustica[/url]
mariusen
 mariusen 2019-04-24 09:55回复
#195
<a href="http://www.egyptmaritime.com/air-jordan-retro-1-royal-bl%C3%A5-hvid-skoi">air jordan retro 1 royal bl氓 hvid</a> <a href="http://www.erstube.com/nike-zoom-structure-20-grigio-viola-scarpeq">nike zoom structure 20 grigio viola</a> <a href="http://www.thecardplayer.com/mens-asics-asics-gel-kayano-17-grey-purple-shoesj">mens asics asics gel kayano 17 grey purple</a> <a href="http://www.theweedaddict.com/mk-shopper-tote-mkh">mk shopper tote</a> <a href="http://www.thecampingman.com/mennns-nike-free-run-2-hvit-rosa-obuvi">mennns nike free run 2 hvit rosa</a> <a href="http://www.otuzbircek.com/maschio-nike-dunk-rosso-rosa-scarpej">maschio nike dunk rosso rosa</a>
mariusen http://www.mariusen.com/
mlarchitects
 mlarchitects 2019-04-24 03:08回复
#194
<a href="http://www.fullscreentours.net/nike-pegasus-33-hommes-vente-items-obuvb">nike pegasus 33 hommes vente items</a> <a href="http://www.fultiltpoker.net/nike-lunarglide-7-mennns-l%C3%B8ping-sko-polish-chaussuresc">nike lunarglide 7 mennns l酶ping sko polish</a> <a href="http://www.gandoza.net/nike-air-flight-89-patent-pelle-kurpesg">nike air flight 89 patent pelle</a> <a href="http://www.goldspeedusa.net/nike-hyperdunk-2013-blau-grau-schuhea">nike hyperdunk 2013 blau grau</a> <a href="http://www.gpscaddy.net/jordan-5-wolf-grau-legit-check-butyf">jordan 5 wolf grau legit check</a> <a href="http://www.grainchain.net/mujeres-asics-gel-kinsei-5-negro-amarillo-kurpesd">mujeres asics gel kinsei 5 negro amarillo</a>
mlarchitects http://www.mlarchitects.net/
villacafaggio
 villacafaggio 2019-04-23 13:52回复
#193
<a href="http://www.florianscafe.net/air-jordan-retro-8-rojo-amarillo-blanco-azul-obuve">air jordan retro 8 rojo amarillo blanco azul</a> <a href="http://www.floridalighthouse.net/maschio-nike-roshe-yeezy-boost-rosa-blu-obuve">maschio nike roshe yeezy boost rosa blu</a> <a href="http://www.fortknoxjewelers.net/new-kobe-10-bianca-kurpesd">new kobe 10 bianca</a> <a href="http://www.freerivalcasinos.net/herren-nike-roshe-run-hyp-alle-rosa-schuhee">herren nike roshe run hyp alle rosa</a> <a href="http://www.friendsofugami.net/adidas-john-walle-2-schwarz-blau-kurpesf">adidas john walle 2 schwarz blau</a> <a href="http://www.fullertonchamber.net/nike-shox-s%C3%B8lv-rosa-obuva">nike shox s酶lv rosa</a>
villacafaggio http://www.villacafaggio.net/
tai eur
 tai eur 2019-04-23 06:44回复
#192
<a href="http://www.skidrowcrackedgames.com/host/vanucci-cordura-denim-jeans-kaufen-louis-motorrad-feizeit">vanucci cordura denim jeans kaufen louis motorrad feizeit</a><a href="http://www.skidrowcrackedgames.com/join/m%c3%a4nner-lange-windjacke-mann-junge-herbst-winter-jacken-mantel-l%c3%a4ssig-slim-fit-mittlerer-l%c3%a4nge-revers-woolen">m盲nner lange windjacke mann junge herbst winter jacken mantel l盲ssig slim fit mittlerer l盲nge revers woolen</a><a href="http://www.skidrowcrackedgames.com/kobe/suchergebnis-auf-amazon.de-f%c3%bcr-adidas-samba-gr%c3%bcn">suchergebnis auf amazon.de f眉r adidas samba gr眉n</a><a href="http://www.skidrowcrackedgames.com/lace/wundersch%c3%b6nes-mayoral-kleid-wei%c3%9f-blau-mit-punkten-gr%c3%b6%c3%9fe-80-in-neuburg-a.d.-donau">wundersch枚nes mayoral kleid wei脽 blau mit punkten gr枚脽e 80 in neuburg a.d. donau</a>
tai eur http://www.chiplunews.com/spray/tai-eur
hobartcomfest
 hobartcomfest 2019-04-23 03:17回复
#191
<a href="http://www.maytorrent.com/north-face-3-in-1-womens-jacket-sale-northfaceh">north face 3 in 1 womens jacket sale</a> <a href="http://www.gplandiet.com/air-jordan-retro-5-gr%C3%BCn-schwarz-schuhek">air jordan retro 5 gr眉n schwarz</a> <a href="http://www.mizenbouche.com/nike-hypervenom-phelon-tf-cleats-guld-sort-skoi">nike hypervenom phelon tf cleats guld sort</a> <a href="http://www.owenandfarney.com/adidas-originals-zx-750-marine-blanc-chaussuresh">adidas originals zx 750 marine blanc</a> <a href="http://www.escortsinoz.com/denver-broncos-mitchell-and-ness-hat-hatl">denver broncos mitchell and ness hat</a> <a href="http://www.itsallfetish.com/nike-mercurial-superfly-ag-vert-rose-blanc-noir-chaussuresh">nike mercurial superfly ag vert rose blanc noir</a>
hobartcomfest http://www.hobartcomfest.com/
mens polo shirt navy
 mens polo shirt navy 2019-04-22 02:27回复
#190
<a href="http://www.maytorrent.com/nike-sb-zoom-stefan-janoski-blue-shoesk">nike sb zoom stefan janoski blue</a> <a href="http://www.gplandiet.com/kvinders-nike-light-gr%C3%A5-internationalist-trainers-skol">kvinders nike light gr氓 internationalist trainers</a> <a href="http://www.mizenbouche.com/billig-svart-l%C3%A6r-converse-obuvk">billig svart l忙r converse</a> <a href="http://www.owenandfarney.com/femminile-grigio-converse-slip-on-scarpei">femminile grigio converse slip on</a> <a href="http://www.escortsinoz.com/vibram-fivefingers-treksport-rosado-p%C3%BArpura-zapatosh">vibram fivefingers treksport rosado p煤rpura</a> <a href="http://www.itsallfetish.com/adidas-tubular-vintage-hvid-skok">adidas tubular vintage hvid</a>
mens polo shirt navy http://www.gaiaescort.com/mens-polo-shirt-navy-poloh
polyphonyma
 polyphonyma 2019-04-21 11:46回复
#189
<a href="http://www.cbchispana.com/jordan-retro-1-noir-grape-butye">jordan retro 1 noir grape</a> <a href="http://www.ciarahanna.com/jordan-1-negro-toe-legit-check-obuve">jordan 1 negro toe legit check</a> <a href="http://www.finjabacken.com/nike-flyknit-lunar-2-bl%C3%A5-oransje-pill-obuvd">nike flyknit lunar 2 bl氓 oransje pill</a> <a href="http://www.meetingxs.com/kvinders-air-jordan-5-khaki-kurpesf">kvinders air jordan 5 khaki</a> <a href="http://www.ollyknox.com/nike-air-max-bw-rot-wei%C3%9F-obuvb">nike air max bw rot wei脽</a> <a href="http://www.sfhires.com/adidas-originals-zx-700-schwarz-and-wei%C3%9F-butya">adidas originals zx 700 schwarz and wei脽</a>
polyphonyma http://www.polyphonyma.com/
jeffreya
 jeffreya 2019-04-20 06:38回复
#188
<a href="http://www.sugarforspice.com/herre-nike-air-max-95-hvid-gr%C3%B8n-skol">herre nike air max 95 hvid gr酶n</a> <a href="http://www.mybancorphsa.com/polo-ralph-lauren-fleece-contrast-hoodie-poloh">polo ralph lauren fleece contrast hoodie</a> <a href="http://www.scopatore.com/nike-kobe-12-grey-red-shoesi">nike kobe 12 grey red</a> <a href="http://www.galacticlogos.com/mens-asics-gel-noosa-tri-8-grey-sky-blue-shoesp">mens asics gel noosa tri 8 grey sky blue</a> <a href="http://www.ispardmore.com/nike-free-gr%C3%B8nn-leopard-obuvl">nike free gr酶nn leopard</a> <a href="http://www.radioramabc.com/air-jordan-retro-6-gamma-bl%C3%A5-guld-skoj">air jordan retro 6 gamma bl氓 guld</a>
jeffreya http://www.jeffreya.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸