http://www.helloweba.com/view-blog-387.html
前面我有文章介绍了前端路由和Pjax单页面应用方面的实例应用，今天我来和大家分享一个单页面应用神器jquery.pjax.js。它是基于jQuery的pjax插件，使用方便，功能完善。我会结合实例给大家讲解使用jquery.pjax.js。
在上一期文章中，我们了解了Pjax的实现原理，它就是利用了HTML5的Pushstate+ajax增强了页面局部刷新功能，它在我们原有的ajax功能上，实现了可以记录浏览历史，可以使用浏览器前进后退功能，浏览器的url可以跟随内容变化，而整个页面可以只刷新某一部分，也就是局部刷新。
今天我要给大家分享的这个实例是模拟分页功能，分页是在web开发中最常见的组件之一。正常情况下，点击分页组件中的页面，页面会跳转到对应的页面，而使用Pjax后，点击页码时，会发送一个ajax请求到后端，响应后更新对应的页面内容部分，同时地址栏url也对应实际的页码url，但整个页面并没有跳转，给我们的感觉是非常流畅，当然，我们也可以在请求页面异步时增加加载动画效果。来看具体的使用方法。
我们准备一个加载div#loading,默认隐藏，ajax请求的时候才显示。#container是用来加载响应的页面内容。.pagination是分页条组件。
&div class="row"&
&div id="loading"&Loading...&/div&
&div id="container"&jQuery.pjax分页&/div&
&ul class="pagination"&
&li&&a href="data.php?p=1"&1&/a&&/li&
&li&&a href="data.php?p=2"&2&/a&&/li&
&li&&a href="data.php?p=3"&3&/a&&/li&
&li&&a href="data.php?p=4"&4&/a&&/li&
&li&&a href="data.php?p=5"&5&/a&&/li&
Javascript
我们使用的pjax组件依赖jQuery库，所以先将这两个文件加载。
&script src="jquery-2.0.0.min.js"&&/script&
&script src="jquery.pjax.js"&&/script&
然后，使用以下代码调用pjax插件。
$(document).pjax('.pagination a', '#container');
$(document).on('pjax:send', function() {
$('#loading').show();
$(document).on('pjax:complete', function() {
$('#loading').hide();
上面的代码中，我们告诉pjax监听一个标签和使用 #container 作为目标容器：
$(document).pjax('.pagination a', '#container');
现在在pjax兼容浏览器，点击分页条上的页码，网页的内容容器 #container 中的内容将被 data.php?p=x 的内容替换。
data.php的内容我们简单的写个代码，实际开发中应该是读取数据库中的数据列表。
$p = intval($_GET['p']);
if($p==0) $p=1;
echo '这是第'.$p.'页';
选项与事件
pjax的调用方法我们刚才简单介绍了，它还可以设置一些选项用来定制。格式如下：
$(document).pjax(selector, [container], options)
selector 是一个字符串，比如要点击的文本 event delegation.
container 是一个字符串，选择唯一标识pjax容器。
options 下面所描述的一个对象。
Ajax超时毫秒之后完全强制刷新
使用 pushState 在导航中添加浏览器历史记录
更换网址不添加浏览器历史记录
maxCacheLength
大缓存大小为以前的容器内容
一个字符串或函数返回当前pjax版
垂直位置以滚动导航。为了避免改变滚动位置，通过设置为 false.
网页请求的方式
返回的数据类型
CSS选择器的元素，其中的内容应及时更换
字符串或函数返回的URL ajax请求
最终 relatedTarget 的值，通过 pjax events
CSS选择器的碎片从Ajax响应提取
pjax:click
阻止一个链接的默认事件，防止阻止pjax事件
pjax:beforeSend
参见 XHR headers
pjax:start
pjax:clicked
pjax后，已经得到了从点击一个链接开始
pjax:beforeReplace
在内容被替换前，HTML从服务器加载的内容
pjax:success
在内容被替换后，HTML 内容从服务器加载
pjax:timeout
在选项 options.之后除非取消，否则将很难刷新
pjax:error
一个ajax错误，将执行原始的网页刷新，直到网页加载被取消
pjax:complete
总是在pjax执行完成以后调用，不论运行的结果
pjax:popstate
浏览器前进后退事件 direction 属性：”back”/”forward”
$.pjax还能响应点击事件，以及提交表单和重新加载事件。详情请参考jquery.pjax项目地址：
阅读(...) 评论()jQuery.pjax.js：使用AJAX和pushState无刷新加载网页（官网教程中文翻译）
超级简单的示例百度网盘下载：注意：pjax必须使用http协议，即在服务器里使用^_^简介 pjax是一个jQuery插件，使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作。 pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL（JS，CSS），提供了一个快速的外观，全页面加载。但它确实就是Ajax和pushstate。。 概述 pjax不是全自动的。您需要设置和指定一个包含在您的页面上的元素，当您浏览您的网站时将被替换。 可以参考下面的HTML代码结构和标签：&!DOCTYPE&html&
&&&&&!--&styles,&scripts,&etc&--&
&&&&&h1&My&Site&/h1&
&&&&&div&class=&container&&id=&pjax-container&&&Go&to&&a&href=&/page/2&&next&page&/a&.&&/div&
&/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 如果你想要更多的自动解决方案比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 只能工作在高级版本的浏览器中，。 当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) selector是一个字符串，比如要点击的文本 .
container是一个字符串，选择唯一标识pjax容器。
options下面所描述的一个对象。
pjax 可选参数 参数
Ajax超时毫秒之后完全刷新是被迫的
在导航中添加浏览器历史记录
更换网址不添加浏览器历史记录
maxCacheLength
大缓存大小为以前的容器内容
一个字符串或函数返回当前pjax版
垂直位置以滚动导航。为了避免改变滚动位置，通过设置为false.
网页请求的方式，详见
返回的数据类型，详见
CSS选择器的元素，其中的内容应及时更换
字符串或函数返回的URL ajax请求
最终relatedTarget的值，通过
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
阻止一个链接的默认事件，防止阻止pjax事件
pjax:beforeSend
xhr, options
参见 XHR headers
pjax:start
xhr, options
xhr, options
pjax:clicked
pjax后，已经得到了从点击一个链接开始
pjax:beforeReplace
contents, options
在内容被替换前，HTML从服务器加载的内容
pjax:success
data, status, xhr, options
在内容被替换后，HTML 内容从服务器加载
pjax:timeout
xhr, options
在选项options.之后除非取消，否则将很难刷新
pjax:error
xhr, textStatus, error, options
一个ajax错误，将执行原始的网页刷新，直到网页加载被取消
pjax:complete
xhr, textStatus, options
总是在pjax执行完成以后调用，不论运行的结果
xhr, options
浏览器的后退/前进导航事件生命周期
pjax:popstate
事件direction属性：”back”/”forward”
pjax:start
null, options
更换内容前
pjax:beforeReplace
contents, options
就在从缓存替换HTML内容
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 一个X-PJAX请求头文件 header 设置为区分正常XHR请求一个pjax请求。在这种情况下，如果请求是pjax，我们跳过布局HTML只是使容器内的内容。 点击这里选择一个合适的 为您最喜爱的服务器框架。 迫使重新加载响应类型 默认情况下，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 部署一个部署，将该版本常数凸到迫使客户机做一个完整的重新加载下一个请求获得新的布局和资产。 相关链接 Github地址： 文章转载自： >>
版权所有：迷津渡口 站长：小指 主题：迷津渡口唯美模板V1.0 Design by 小指
我想和你虚度时光 花房姑娘 恋恋风尘 我喜爱一切不彻底的事物 我的心里是满的 Long Way 给少年的歌 晴日共剪窗 天上的月你的脸您也可以使用第三方帐号快捷登录
觉得文章有用就打赏一下文章作者
支付宝扫一扫打赏
微信扫一扫打赏如果你玩过Google+，看到过YouTube的新界面，便会体验到这个HTML5的新功能。使用pushState + Ajax（pjax），可以实现网页的ajax加载，同时又能完成URL的改变而没有网页跳转刷新的迹象，就像是改变了网页的hash（＃）一样。
旧的解决方案
曾说SEO和ajax是天敌。此前从Twitter开始流行Ajax+hash的方式调用内容，Google给出的解决方案是“#!
~string”自动转换为“?_excaped_fragment_=
~string”来抓取动态内容。但这无疑会非常麻烦：首先你需要对网站进行“?_excaped_fragment_=
~string”的处理配置，而且，如果用户把网址“http://example.com/#!/
~string”直接复制并分享的话，意味着网页还必须监听hashchange。不过如果你觉得这个#!很好看就没关系了。
新的解决方案: pushState
然而HTML5的新接口pushState / replaceState就可以比较完美的解决问题，它避免了改变hash的问题，避免了用户不理解URL的形式感到疑惑，同时还有onpopstate提供监听，良好响应后退前进。而且它不需要这个URL真实存在。
HTML5 的 pushState+Ajax
HTML5提供history接口，把URL以state的形式添加或者替换到浏览器中，其实现函数正是 pushState 和 replaceState。
pushState 例子
pushState() 的基本参数是：
window.history.pushState(state, title, url);
其中state和title都可以为空，但是推荐不为空，应当创建state来配合popstate监听。
例如，我们通过pushState现改变URL而不刷新页面。
var state = ( {
url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE
window.history.pushState(state, ~title, ~href);
其中带有“~”符号的是自定义内容。就可以把这个
~href（URL）推送到浏览器的历史里。如果想要改变网页的标题，应该：
document.title= ~newT
注意只是pushState是不能改变网页标题的哦。
replaceState 同理
window.history.replaceState( state, ~title, ~href);
pushState、replaceState 的区别
pushState()可以创建历史，可以配合popstate事件，而replaceState()则是替换掉当前的URL，不会产生历史。
只能用同域的URL替换，例如你不能用http://baidu.com去替换http://google.com。而且state对象不存储不可序列化的对象如DOM。
Ajax 配合 pushState 例子
现在用Ajax + pushState来提供全新的ajax调用风格。以jQuery为例，为了SEO需要，应该为a标签的onclick添加方法。
$(&~target a&).click(function(evt){
evt.preventDefault(); // 阻止默认的跳转操作
var uri=$(this).attr(&href&);
var newTitle=ajax_Load(uri); // 你自定义的Ajax加载函数，例如它会返回newTitle
document.title=newT // 分配新的页面标题
if(history.pushState){
var state=({
url: uri, title: newTitle
window.history.pushState(state, newTitle, uri);
}else{ window.location.href=&#!&+~fakeURI; } // 如果不支持，使用旧的解决方案
function ajax_Load(uri){ ... return newT } // 你自定义的ajax函数，例如它会返回newTitle
即可完成pushState。至于新标题newTitle的获取就是另外的问题了，例如你可以为a标签分配data-newtitle=~title属性并届时读取，或者如果你用的$.ajax()函数，可以用$(result).filter(&title&).text()来获取。
另外如果需要对新加载的页面的连接同样使用这个ajax，则需要对新内容的a标签重新部署，例如
$(&~newContentTarget a&).click(function(evt){ ... });
pushState 配合 popstate 监听
想要良好的支持浏览器的历史前进后退操作，应当部署popstate监听：
window.addEventListener(&popstate&, function(evt){
var state = evt.
var newTitle = ajax_Load(state.url); //你自定义的ajax加载函数，例如它会返回newTitle
document.title=newT
}, false);
提醒，你可以通过setRequestHeader()来让服务器端配合你的ajax请求输出专门的内容。
流程图示意
这个例子的大致过程如下图所示
jQuery + PJAX 插件
，有人把PJAX做成了jQuery插件，方便调用，节省大量代码：
if ($.support.pjax) {
$(document).on(&click&, &a[data-pjax]&, function(event) {
var container = $(this).closest(&[data-pjax-container]&)
$.pjax.click(event, {container: container})
谢谢收看，如有不正请指出。
相关 [改变 url pushstate] 推荐：
- Web前端 - ITeye博客
如果你玩过Google+，看到过YouTube的新界面，便会体验到这个HTML5的新功能. 使用pushState + Ajax（pjax），可以实现网页的ajax加载，同时又能完成URL的改变而没有网页跳转刷新的迹象，就像是改变了网页的hash（＃）一样. 曾说SEO和ajax是天敌. 此前从Twitter开始流行Ajax+hash的方式调用内容，Google给出的解决方案是“#.
- 张鑫旭-鑫空间-鑫生活
本文地址：
http://www.zhangxinxu.com/wordpress/?p=3432. 我就TM想找个例子，知道如何个使用，使用语法什么的滚粗. 精力总是有限的，昨天一冲动，在上海浦东外环之外订了个90米的房子，要借钱筹首付、贷款和领证什么的. HTML5 history相关知识点啪啦啪啦讲起来也是一条又臭又长的裹脚布，精气神实在不够用，这里，直接一个实例.
- chenqj - 阮一峰的网络日志
一个显著变化，就是URL加入了"#!"符号. 在我印象中，这是主流网站第一次将"#"大规模用于直接与用户交互的关键URL中. 这表明井号（Hash）的作用正在被重新认识. 本文根据HttpWatch的文章，整理与井号有关的所有重要知识点. 其右面的字符，就是该位置的标识符. 就代表网页index.html的print位置.
- JavaScript - Web前端 - ITeye博客
URL一般只能由字母、数字、$ - _. * ' ( ) 等一些字符构成. 那么当URL中需要用到汉字时怎么办，譬如有这样的URL: "www.test.com/search?name=张三"，此时，只有通过将URL进行编码的方式进行传递了.
Javascript编/解码方法：.
如果对上面的URL(www.test.com/search?name=张三)进行编码的话.
- winners - Thinking for Fun
关于URL编码，RFC1738做了如下的规定：. “Only alphanumerics [0-9a-zA-Z], the special characters “$-_.+!*’(),” [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL.”.
- 移动开发 - ITeye博客
本文译者：
candeladiao，原文：
URL filtering for UIWebView on the iPhone. 说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源.
- CSDN博客推荐文章
这几天为解决一个BUG头疼了一段时间，BUG现象如下：. 一个选择人员的选择控件，当选择多个人时(50多个的时候)，返回没有错误现象，而再一次打开的时候就报404错误. 看到这个错误非常纳闷，无法下手，只能再一次看控件的代码，在详细看代码时，发现所有的参数都是经过URL传参的，赶紧百度一下URL参数的大小限制(从这个百度开始，我就进入一个误区：参数大小的限制).
- CSDN博客Web前端推荐文章
　　URL中的井号(#)是比较常见的，它并不影响网址的指向，而是有众多功能和特点的. 下面就为大家介绍一些有关井号的故事. 　　1、页面中的某一个位置可以用井号在URL中指定. 　　井号作为比较长出现在URL的一种符号，通常也会代表这个页面中的某一个位置，比如：http://aoshu.juren.com/chzt/xiaoxueshijuan/index.html#nn1，此URL表示在这个页面中nn1的位置.
- IT技术博客大学习
跳转. Custom URL scheme 的好处就是，你可以在其它程序中通过这个url打开应用程序. 如Ａ应用程序注册了一个url scheme:myApp,
那么就在mobile浏览器中就可以通过打开你的应用程序Ａ. 首先在AndroidManifast.xml要被指定Scheme的Activity下设置如下参数.
--> 坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：itarea.。