精华内容
下载资源
问答
  • pjax

    2018-04-25 10:10:00
    下载地址: ... 0、先引入jquery和jquery.pjax.js  1、父页面定义区域div,子页面最外层包装div  2、$.pjax({url: url, container: '父页面区域divID', fragment: '子页面外层divid'});  ...

    下载地址:

    https://github.com/defunkt/jquery-pjax/find/master

    使用方法:

      0、先引入jquery和jquery.pjax.js

      1、父页面定义区域div,子页面最外层包装div

      2、 $.pjax({url: url, container: '父页面区域divID', fragment: '子页面外层divid'});

      3、获取url可用$.pjax.state.url;获取

    转载于:https://www.cnblogs.com/xiufengd/p/8940158.html

    展开全文
  • Pjax

    2015-09-24 02:09:28
    什么是pjax? 现在很多网站( facebook, twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳转, 而是只是站内页面刷新。 这样的用户体验, 比起整个页面都闪一下来说, 好很多。 ...

    什么是pjax?

    pjax = ajax + pushState

    现在很多网站( facebook,  twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳转, 而是只是站内页面刷新。 这样的用户体验, 比起整个页面都闪一下来说, 好很多。 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。 那么如果我们想要实现这样的功能, 我们如何做呢? 我发现pjax提供了一个脚本支持这样的功能。 pjax项目地址在  https://github.com/adobe1992/jquery-pjax 。 实际的效果见:  http://pjax.heroku.com/ 没有勾选pjax的时候, 点击链接是跳转的。 勾选了之后, 链接都是变成了ajax刷新。


    为什么要用pjax?

    pjax有好几个好处:

    • 用户体验提升。

      页面跳转的时候人眼需要对整个页面作重新识别, 刷新部分页面的时候, 只需要重新识别其中一块区域。 同时, 由于刷新部分页面的时候提供了一个loading的提示, 以及在刷新的时候旧页面还是显示在浏览器中, 用户能够容忍更长的页面加载时间。

    • 极大地减少带宽消耗和服务器消耗。

      由于只是刷新部分页面, 大部分的请求(css/js)都不会重新获取, 网站带有用户登录信息的外框部分都不需要重新生成了。 虽然我没有具体统计这部分的消耗, 我估计至少有40%以上的请求, 30%以上的服务器消耗被节省了。

    坏处我觉得也有:

    • IE6等历史浏览器的支持

      虽然我没有实际测试, 但是由于pjax利用到了新的标准, 旧的浏览器兼容会有问题。 不过pjax本身支持fallback, 当发现浏览器不支持该功能的时候, 会回到原始的页面跳转上面去。

    • 复杂的服务器端支持

      服务器端需要根据过来的请求, 判断是作全页面渲染还是部分页面渲染, 相对来说系统复杂度增大了。 不过对于设计良好的服务器代码, 支持这样的功能不会有太大的问题。

    综合起来, 由于用户体验和资源利用率的提升, 坏处是可以完全得到弥补的。   我强烈推荐大家使用。


    如何使用pjax?

    直接看   官方文档  就可以了。 我觉得做技术的人要养成看一手的技术资料的习惯。 有一个rails针对pjax的   gem插件  可以直接使用。 也有   django的支持  。


    pjax的原理

    为了能够处理问题, 我们需要能够理解pjax的运作方式。 pjax的代码只有一个文件:https://github.com/adobe1992/jquery-pjax 如果有能力, 可以自己去看一遍。 我这里解释一下原理。 首先, 我们在html里面指定, 需要做pjax的链接内容是哪些, 以及点击之后需要更新的部分(放在data-pjax属性里面): 

    ?
    1
    $( 'a[data-pjax]' ).pjax()
    当加载了pjax脚本之后, 它会拦截这些链接的事件, 然后包装成一个ajax请求, 发送给服务器。 
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $.fn.pjax = function ( container, options ) {
       return this .live( 'click.pjax' , function (event){
         handleClick(event, container, options)
       })
    }
     
    function handleClick(event, container, options) {
       $.pjax($.extend({}, defaults, options))
       ...
       event.preventDefault()
    }
    var pjax = $.pjax = function ( options ) {
       ...
       pjax.xhr = $.ajax(options)
    }
    这个请求带有X-PJAX的HEADER标识, 服务器在收到这样的请求的时候, 就知道只需要渲染部分页面返回就可以了。 
    ?
    1
    2
    xhr.setRequestHeader( 'X-PJAX' , 'true' )
    xhr.setRequestHeader( 'X-PJAX-Container' , context.selector)
    pjax接受到返回的请求之后, 更新data-pjax指定的区域, 同时也会更新浏览器的地址。
    ?
    1
    2
    3
    4
    5
    6
    options.success = function (data, status, xhr) {
       var container = extractContainer(data, xhr, options)
       ...
       if (container.title) document.title = container.title
       context.html(container.contents)
    }

    为了能够支持浏览器的后退, 利用到了history的api, 记录下来对应的信息, 

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    pjax.state = {
       id: options.id || uniqueId(),
       url: container.url,
       container: context.selector,
       fragment: options.fragment,
       timeout: options.timeout
    }
     
    if (options.push || options.replace) {
       window.history.replaceState(pjax.state, container.title, container.url)
    }

    当浏览器后退的时候, 拦截事件, 根据记录的历史信息, 产生一个新的ajax请求。 

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    $(window).bind( 'popstate' , function (event){
       var state = event.state;
       if (state && state.container) {
         var container = $(state.container)
         if (container.length) {
           ...
           var options = {
             id: state.id,
             url: state.url,
             container: container,
             push: false ,
             fragment: state.fragment,
             timeout: state.timeout,
             scrollTo: false
           }
     
           if (contents) {
             // pjax event is deprecated
             $(document).trigger( 'pjax' , [ null , options])
             container.trigger( 'pjax:start' , [ null , options])
             // end.pjax event is deprecated
             container.trigger( 'start.pjax' , [ null , options])
     
             container.html(contents)
             pjax.state = state
     
             container.trigger( 'pjax:end' , [ null , options])
             // end.pjax event is deprecated
             container.trigger( 'end.pjax' , [ null , options])
           } else {
             $.pjax(options)
           }
           ...
         }
       }
    }

    为了支持fallback, 一个是在加载的时候判断浏览器是否支持history push state API:

    ?
    1
    2
    3
    4
    5
    // Is pjax supported by this browser?
    $.support.pjax =
       window.history && window.history.pushState && window.history.replaceState
       // pushState isn't reliable on iOS until 5.
       && !navigator.userAgent.match(/((iPod|iPhone|iPad).+\bOS\s+[1-4]|WebApps\/.+CFNetwork)/)
       另一个是当发现请求一段时间没有回复的时候(可以设置参数timeout), 直接做页面跳转。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    options.beforeSend = function (xhr, settings) {
       if (settings.timeout > 0) {
         timeoutTimer = setTimeout( function () {
           if (fire( 'pjax:timeout' , [xhr, options]))
             xhr.abort( 'timeout' )
         }, settings.timeout)
     
         // Clear timeout setting so jquerys internal timeout isn't invoked
         settings.timeout = 0



     
    展开全文
  • Grails Pjax插件 Pjax在Grails中。 Pjax类似于(turbolinks)[ ,在'A'标签,按钮和表单上工作。 参见_pjaxHeader grails templtate文件中的演示代码。 ## Pjax是什么? Pjax是一个jQuery插件,它使用ajax和push...
  • pjax.js:纯前端pjax-源码

    2021-04-29 04:32:34
    pjax 可前端独立执行的 pjax。同时请求中也会携带两个ajax请求头,方便后端做优化处理。 xhr.setRequestHeader("X-PJAX", true); // 表明是 pjax 请求 xhr.setRequestHeader("X-PJAX-Container", container); // ...
  • react-pjax 使用ReactJS实现PJAX的简单中间件 ##语义 该模块提供了一种如何将PJAX与ReactJS结合使用的解决方案,当收到带有自定义PJAX标头的请求时,仅返回状态以进行部分更新,而无需服务器端呈现标记。 如果不是...
  • django-easy-pjax:适用于Django的Easy PJAX
  • koa-pjax-demo Koa Pjax演示 演示koa-pjax: cd your_path/koa-pjax-demo/ npm install # iojs node nekoa.js # nodejs node --harmony nekoa.js 然后使用浏览器访问 。 单击网页上的超链接进行测试。
  • 选中该框以切换 pjax。 每当时间改变时,就会发生整页加载。 如果时间没有改变,则没有发生整页加载。 这个想法是你无法区分 pjax 页面加载和正常页面加载之间的区别。 在复杂的网站上,浏览只是“感觉更快”。 ...
  • PJAX for Rails 通过资产管道将Chris Wanstrath的集成到Rails中。 要激活,请将其添加到您的app / assets / javascripts / application.js(或使用的任何捆绑包)中: //=require jquery.pjax 然后,选择要展示...
  • Laravel的pjax中间件 是一个jQuery插件,它利用ajax来加快页面的加载时间。 它只能通过从服务器获取特定的html片段来工作,而客户端更新仅发生在页面的某些部分。 该软件包提供了一个中间件,该中间件可以返回...
  • PJAX 路由器 PJAX 路由器允许开发人员在您的应用程序中注册针对您的服务器请求的路由,并专门为这些路由处理 jquery-pjax 触发的发送和完成事件。 它提供了更多的前端代码的组织和控制元素,并使您无需将 javascript...
  • pjax_rails, Rails的PJAX集成 用于 Rails 3.2 的 PJAX 通过资产管道将 wanstrath PJAX的Chris 集成到 Rails 3.2 中。要激活,请将它的添加到 app/assets/javascripts/application.j
  • PJAX学习

    2020-12-22 15:18:46
    PJAX PJAX项目地址 PJAX是什么 pjax是一个jQuery插件,它使用ajax和pushState通过真正的永久链接,页面标题和后退按钮提供快速浏览体验 PJAX好处 用户体验提升,不做页面跳转,只是在站内页面刷新,大部分请求(css/...

    PJAX

    PJAX项目地址

    PJAX是什么

    pjax是一个jQuery插件,它使用ajax和pushState通过真正的永久链接,页面标题和后退按钮提供快速浏览体验

    PJAX好处

    用户体验提升,不做页面跳转,只是在站内页面刷新,大部分请求(css/js)都不会重新获取,极大的减少带宽消耗和服务器消耗

    PJAX的工作原理

    pjax的工作方式是通过ajax从服务器获取HTML,然后用加载的HTML替换页面上容器元素的内容

    然后使用pushState技术更新浏览器中的当前URL

    由于以下两个原因,这使得页面导航更快:

    1)没有页面资源(JS,CSS)被重新执行或重新应用

    2)如果服务器配置为使用pjax,则它只能渲染部分页面内容,从而避免了可能昂贵的完整布局渲染

    PJAX用法

    中文文档

    $.fn.pjax

    最简单常见的pjax使用方法如下:

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

    通过这种方式可以让页面中所有的链接都实现pjax加载,并指定#pjax-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')
    

    服务器端配置

    在服务器端可通过检查指定的X-PJAXHTTP头来识别pjax请求,并且只渲染指定的HTML内容,这也就意味着在浏览器端我们不用重新渲染整个页面,只替换指定容器元素(在我们的示例中是 #pjax-container)中的内容即可

    下面的示例是在Ruby on Rails中的实现方法:

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

    如果想了解比上述方案更为自动化的方案,请查看 Turbolinks

    参数

    $.fn.pjax 方法概述:

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

    1)selector:string类型,用于click 事件委托 的选择器

    2)container:string类型,用于标识唯一pjax容器的选择器

    3)options object类型,包含下列选项

    pjax配置选项
    选项默认值说明
    timeout650ajax超时时间(毫秒),超时后强制刷新整个页面
    pushtrue使用 pushState 在浏览器中添加历史记录
    replacefalse替换URL地址但不添加浏览器历史记录
    maxCacheLength20容器元素缓存内容的最大值(次)
    versionstring或function,返回当前pjax版本
    scrollTo0浏览器滚动条的垂直滚动位置。设为false时禁止滚动
    type“GET”参考 $.ajax
    dataType“html”参考 $.ajax
    container被替换内容元素的CSS选择器
    urllink.hrefstring或function,返回ajax请求响应的URL
    targetlinkpjax 事件relatedTarget属性的最终值
    fragmentcss选择器,提取ajax响应内容中指定的内容片段

    您可以在全局使用$.pjax.defaults对象改变默认配置:

    $.pjax.defaults.timeout = 1200
    

    $.pjax.click

    这是一个$.fn.pjax内部使用的底层方法,通过此方法可以在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})
      })
    }
    

    注意 通过$.support.pjax我们明确浏览器是支持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

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

    如果可以获得click事件,请使用$.pjax.click(event)来代替

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

    事件

    除了pjax:clickpjax:clicked,其他所有pjax事件都是在pjax容器元素上触发的

    事件取消参数说明
    pjax链接事件的生命周期
    pjax:click✔︎options链接被激活的时候触发;取消的时候阻止pjax
    pjax:beforeSend✔︎xhr, options可以设置XHR头
    pjax:startxhr, options
    pjax:sendxhr, options
    pjax:clickedoptionspjax通过链接点击已经开始之后触发
    pjax:beforeReplacecontents, options从服务器端加载的HTML内容完成之后,替换当前内容之前
    pjax:successdata, status, xhr, options从服务器端加载的HTML内容替换当前内容之后
    pjax:timeout✔︎xhr, optionsoptions.timeout之后触发;除非被取消,否则会强制刷新页面
    pjax:error✔︎xhr, textStatus, error, optionsajax请求出错;除非被取消,否则会强制刷新页面
    pjax:completexhr, textStatus, options无论结果如何,都在ajax响应完成后触发
    pjax:endxhr, options
    浏览器前进后退事件的生命周期
    pjax:popstatedirection事件的属性: “back”/“forward”
    pjax:startnull, options内容替换之前
    pjax:beforeReplacecontents, options在用缓存中的内容替换HTML之前
    pjax:endnull, options替换内容之后
    pjax:callbacknull, options页面脚本加载完成后(Admui项目)

    注意 由于Admui项目对本插件做了一些修改,建议不要使用官方原版插件替换

    如果使用了加载指示(如loading图标或“加载中”的文字),pjax:sendpjax: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()
    })
    

    高级配置

    在新页面中重新初始化插件/工具

    pjax的特点是它不会刷新页面即可获取并插入新内容

    但是,如果其他jQuery插件(或库)为页面内容绑定了加载事件(如DOMContentLoaded),那么这些事件是无效的

    比较常用的一种做法是,在更新的页面内容范围内,重新初始化插件

    $(document).on('ready pjax:end', function(event) {
      $(event.target).initializeMyPlugin()
    })
    

    该方法可以让$.fn.initializeMyPlugin()在页面普通加载和pjax加载时(点击链接或浏览器前进后退按钮之后)都能被调用

    强制重载的响应类型

    默认情况下,如果pjax从服务器收到以下响应之一,则会强制重载页面:

    • 页面包含<html>标签,没有明确指定fragment选择器时。 pjax就会认为服务器端没有正确配置pjax响应
    • 如果配置了fragment选项,pjax将根据该选择器提取页面内容
    • 空白页面。pjax就会认为服务器端无法提供正确的pjax内容
    • HTTP状态码为4xx或5xx,表示某些服务器错误

    改变浏览器URL

    如果服务器端需要改变浏览器地址栏中URL(如HTTP重定向),可以通过设置X-PJAX-URL头来实现:

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

    重载布局

    静态资源或页面发生变化时,布局可被强制进行重载

    首先,用一个自定义的meta标签在页面head中初始化layout版本

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

    然后,在服务器端设置相同的X-PJAX-Version

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

    部署后,版本不同时整个页面会强制重载,会重新发起请求来获取新的布局和相关资源

    展开全文
  • Plack::Middleware::Pjax - 适用于您的 Plack 的 PJAX 版本 版本 1.114400 概要 use Plack::Builder; builder { enable 'Plack::Middleware::Pjax'; $app } 描述 Plack::Middleware::Pjax 添加了对结合 jquery-...
  • koa-pjax 中间件可以在koa中使用PJAX。 安装 npm install koa-pjax 用法 演示: var koa = require ( 'koa' ) ; var staticServer = require ( 'koa-static' ) ; var path = require ( 'path' ) ; var app = koa ...
  • pjax理解

    2019-07-07 18:01:40
    注: http://www.itkee.cn/topic-info-75.html https://fly.layui.com/jie/10956/ http://bsify.admui.com/jquery-pjax/?id=pjax-pushstate-ajax
    展开全文
  • pjax = pushState + ajax pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button. pjax works by fetching ...
  • 法尔康PJAX 一个演示项目,用于测试将 Phalcon 与 jQuery PJAX 结合使用的想法。 更多信息 这个实验只是测试我将如何使用 Phalcon 和 PJAX 构建应用程序。 我非常喜欢 PJAX 的简单功能,这个演示展示了它是如何工作...
  • Laravel开发-pjax

    2019-08-28 07:59:11
    Laravel开发-pjax Laravel 5的PJAX
  • pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏,这样用户就能愉快地使用前进后退了。pjax有好几个实现方法,这里使用最常用的Jquery库,使用jquery.pjax.js。...
  • pjax = pushState + ajax=======================pjax是一个jQuery插件,它使用ajax和pushState通过真正的永久链接,页面标题和后退按钮提供快速浏览体验。pjax的工作方式是通过ajax从服务器获取HTML,然后用加载的...
  • pjax-api, 面向高级web框架的第二代 PJAX PJAX 面向高级web框架的第二代 PJAX 。特性功能 defunkt falsandtru Turbolinks并发集成XOX多区域更新XOO回退区域匹配XOX内容类
  • PJAX 用于高级Web框架的第二代PJAX。 特征 特征 放荡 法尔桑特鲁 涡轮链接 并发整合 X Ø X Shadow DOM支持 X Ø X 多区域更新 X Ø Ø 后备区域匹配 X Ø X 内容类型验证 X Ø Ø HEAD内容无标记...
  • laravel pjax

    2019-03-04 22:12:59
    composerrequirespatie/laravel-pjax 第二步: 接下来需要在Kernel.php中注册中间件,这里我们将其注册到web中间件组: //app/Http/Kernel.php protected $middlewareGroups = [ 'web' =&gt; [ ......
  • pushState + ajax = pjax,一个轻量级的纯JavaScript pjax库,或仅用作ajax 为什么 所以您问自己,为什么还要另一个pjax库? 简而言之,恕我直言,大多数其他库都过于复杂,使用仅仅是一种方式,最重要的是,库与...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,385
精华内容 954
关键字:

pjax