Pjax的学习使用

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,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,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
小杭

测试使用的代码：

<head>
    <title>小杭测试</title>
    <Meta name="decorator" content="default"/>
    <script src="${ctxStatic}/jquery/jquery.pjax.js" type="text/javascript"></script>
        <script type="text/javascript">        
                    $(document).on('submit','form',function(event) {
                          $.pjax.submit(event,'#pjax-container')
                        })

                    $(document).on('click','a',function(event) {  //失败了(ノ｀Д)ノ
                        var container = $(this).closest('#pjax-container')
                        var containerSelector = '#' + container.id
                        $.pjax.click(event,{container: containerSelector})
                    })

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

                    function test(){
                        $.pjax({url: '${ctx}/statistics/simpleReport/xiaohangTestPjax?data='+new Date().getTime(),container: '#pjax-container'});
                        return false;
                    }
                    function test_reload(){
                        $.pjax.reload('#pjax-container',{url: '${ctx}/statistics/simpleReport/xiaohangTestPjax?data='+new Date().getTime()}); 
                    }
            </script>
</head>
<body>
    <div class="content">

        <a href="${ctx}/statistics/simpleReport/xiaohangTestPjax?data=11111" >demo1</a>
        <button type="button" id="redbtn" onclick = "test()">测试 点这里 ↓↓div的内容会变化</button>
        <button type="button" id="redbtn" onclick = "test_reload()">reload </button>

        <form id="searchForm"  action="${ctx}/statistics/simpleReport/xiaohangTestPjax" method="post" class="breadcrumb form-search">
            <label>表单提交测试-参数：</label> <input id="organId" name="organId" maxlength="32" class="input-medium"/>

            <label>表单提交测试-参数：</label><input type="button" class="btn btn-primary" onclick="test_submit()" value="查询button"/> <input id="dsubmit" class="btn btn-primary" type="submit" value="查询submit"/>
        </form>

        <div id = "pjax-container" style="    width: 1000px;    height: 300px;    background-color: rgba(102,0.52);">
            hello  这是变化的部分  会变成demo2 页面的 表格
        </div>

         <div id = "loading" style="    width: 100px;    height: 100px;    background-color: rgba(102,0.52);">
            .............................这个是loding
        </div>

    </div>
</body>