您现在的位置是:网站首页>>前端技术>>html+css+js

pjax 简单了解

发布时间:2019-07-31 15:17:17作者:wangjian浏览量:946点赞量:0

    一:pjax介绍

    pjax是jquery的一个插件,它使用ajax和pushState两个技术改善用户的网页浏览体验。具体来说,当用户使用a标签切换页面时,可以实现局部刷新的技术

    pjax作用:

    1:用户点击链接发送ajax请求,服务器得到请求返回需要填充的HTML片段,客户端得到HTML片段然后插入更新区域

    2:页面填充完毕后,使用pushState更新当前的URL

    pjax好处:

    pjax能实现页面局部刷新,比传统的页面切换刷新的体验好一些,只下载需要的HTML页面片段,没有JS、CSS解析,如果服务端配置了正确的pjax请求,则只返回要更新的HTML片段,客户端只更新必要的内容,避免了页面重新渲染的过程

    二:pjax下载

    pjax依赖于jQuery,支持于jQuery 1.8或更高版本

    1:npm下载

    npm install jquery-pjax

    2:通过js引入下载pjax

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

    三:pjax使用

    1:$.fn.pjax(pjax最常用的方法)

    $(document).pjax(selector, [container], options)

    参数说明:

    selector:click事件的选择器

    container:pjax容器id

    options :配置参数

    options配置参数参考如下:

    参数默认值描述
    timeout650ajax请求如果超时将触发强制刷新
    pushtrue使用 [pushState][] 在浏览器中添加导航记录
    replacefalse是否使用replace方式改变URL
    maxCacheLength20返回的HTML片段字符串最大缓存数
    version
    当前pjax版本
    scrollTo0当页面导航切换时滚动到的位置. 如果想页面切换不做滚动重置处理,请传入false.
    type"GET"使用ajax的模板请求方法
    dataType"html"模板请求时的type
    container
    内容替换的CSS选择器
    urllink.hrefstring或function,返回ajax请求响应的URL
    targetlinkpjax 事件 中relatedTarget属性的最终值
    fragment
    从服务端返回的HTML字符串中子内容所在的CSS选择器,用于当服务端返回了整个HTML文档,但要求pjax局部刷新时使用。

    你也可以全局使用$.pjax.defaults对象改变默认配置

    $.fn.pjax简单示例:

    <div>
    <a href="page1.php">一</a>.<a href="page2.php">二</a>
    </div>
    <div id="container">
    <!-- 在这里更新返回的HTML字符串 -->
    </div>


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

    根据如上代码就可以实现点击a标签向指定服务端调取html片段直接渲染在id值为container的标签内

    有时候在一个页面你可能可能不希望在每个地方都使用pjax,那么您可以用data-pjax来注明这是一个pjax链接,然后使用a[data-pjax]来代替全局选择器a。或者,您也可以使用在<div data-pjax>容器中的<a data-pjax href="...">链接作为选择器

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

    2:$.pjax.click

    这是一个$.fn.pjax内部使用的底层方法,通过此方法可以在pjax事件之上做更多的事情

    //判断浏览器是否支持pjax
    if ($.support.pjax) {
      $(document).on('click', 'a[data-pjax]', function(event) {
      //获取点击的第一个祖先元素
        var container = $(this).closest('[data-pjax-container]')
      //获取点击的第一个祖先元素ID
        var containerSelector = '#' + container.id
        
        $.pjax.click(event, {container: containerSelector})
      })
    }

    3:$.pjax.submit

    通过pjax提交表单。

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

    4:$.pjax.reload

    使用pjax机制发起一个当前URL的请求到服务器,并且通过响应的内容替换容器元素中的内容,同时不添加浏览器历史记录。

    $.pjax.reload('#pjax-container', options)  //options表示配置

    5:$.pjax

    手动调用pjax。主要用于非click事件发起pjax请求的情况

    $.pjax({url: url, container: '#pjax-container'})  //url表示服务端地址

    参考:http://bsify.admui.com/jquery-pjax/

0 +1