###Pjax的使用
####简介:
是一种页面局部刷新的功能,基于Ajax的。其不同之处在与,插件可以默认绑定替换刷新的div,同时会有浏览器的历史记录【可以进行前进后退操作】。
其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。
####优劣:
- 提高用户体验,减少带宽使用
- 浏览器兼容问题,服务器端的复杂
####官方代码库
github: jquery-pjax
###使用教程
#####最简单使用 $.fn.pjax 【失败了(ノ`Д)ノ】
最简单的例子,使所有a标签都为pjax进行请求,内容替换第二个参数的div。
$(document).pjax('a', '#pjax-container')
高级用法,可指定标签:如下
$(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-container')
木有错就是这么简单,但是我的测试失败了。
使用的时候,后台服务端接受到了两个请求:
String pjax_headerString = request.getHeader("X-PJAX");
System.out.println("is pjax? :"+pjax_headerString);
--is pjax? :true //这个是对的
--is pjax? :null //这个不知道是哪里来的(ノ`Д)ノ 导致页面直接跳转刷新了
#####使用参数的用法$.pjax【成功】
<script type="text/javascript">
function test(){
$.pjax({url: '${ctx}/statistics/simpleReport/xiaohangTestPjax?data='+new Date().getTime(), container: '#pjax-container'});
return false;
}
</script>
<button type="button" id="redbtn" onclick = "test()">测试 点这里 ↓↓div的内容会变化</button>
<div id = "pjax-container" style="width: 1000px;height: 300px;background-color: rgba(102, 102, 102, 0.52);">
hello 这是变化的部分 会变成demo2 页面的 表格
</div>
页面是可以正常的更新了<div id = "pjax-container">
的。O(∩_∩)O~
参数详情:
key | default | description |
---|---|---|
timeout | 650 | ajax timeout in milliseconds after which a full refresh is forced |
push | true | use pushState to 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 |
设置参数的写法也可以是这样子的:
$.pjax.defaults.timeout = 12000;
$.pjax.defaults.replace = true;
#####其他用法:$.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.[不添加一个浏览器历史记录。]
function test_reload(){
$.pjax.reload('#pjax-container', {url: '${ctx}/statistics/simpleReport/xiaohangTestPjax?data='+new Date().getTime()});
//$.pjax.reload('#pjax-container', options); ←← 就是这个样子 ↑↑
}
#####其他用法:$.pjax.submit【测试成功√】
$(document).on('submit', 'form[data-pjax]', function(event) { //所需要修改的为第二个参数,确定页面中from表单,
$.pjax.submit(event, '#pjax-container')
})
#####其他用法:$.pjax.click【失败了(ノ`Д)ノ】
if ($.support.pjax) {
$(document).on('click', 'a[data-pjax]', function(event) {
var container = $(this).closest('[data-pjax-container]')
var containerSelector = '#' + container.id
$.pjax.click(event, {container: containerSelector})
})
}
####事件Events
Pjax东东自带的一些事件处理。
event | cancel | arguments | notes |
---|---|---|---|
event lifecycle upon following a pjaxed link | |||
pjax:click | ✔︎ | options | fires from a link that got activated; cancel to prevent pjax |
pjax:beforeSend | ✔︎ | xhr, options | can set XHR headers |
pjax:start | xhr, options | ||
pjax:send | xhr, options | ||
pjax:clicked | options | fires after pjax has started from a link that got clicked | |
pjax:beforeReplace | contents, options | before replacing HTML with content loaded from the server | |
pjax:success | data, status, xhr, options | after replacing HTML content loaded from the server | |
pjax:timeout | ✔︎ | xhr, options | fires after options.timeout ; will hard refresh unless canceled |
pjax:error | ✔︎ | xhr, textStatus, error, options | on ajax error; will hard refresh unless canceled |
pjax:complete | xhr, textStatus, options | always fires after ajax, regardless of result | |
pjax:end | xhr, options |
event lifecycle on browser Back/Forward navigation
event | cancel | arguments | notes |
---|---|---|---|
pjax:popstate | event direction property: “back”/“forward” | ||
pjax:start | null, options | before replacing content | |
pjax:beforeReplace | contents, options | right before replacing HTML with content from cache | |
pjax:end | null, options | after replacing content |
#####例如【发送和完成事件】:
在pjax发送请求的时候调用事件pjax:send,完成更新页面之后回调事件pjax:complete;
$(document).on('pjax:send', function() {
$('#loading').show()
})
$(document).on('pjax:complete', function() {
$('#loading').hide()
})
#####例如【pjax超时事件】:
pjax请求超时时调用自定义事件处理。
$(document).on('pjax:timeout', function(event) {
// Prevent default timeout redirection behavior
event.preventDefault()
})
####其他东东:
- pjax加载的页面中的中文乱码问题【为解决】
- 这个pjax如果和Jfinaly一起使用,似乎是不错的选择呢。
2017-08-04
小杭
####测试使用的代码: