JqueryローカルリフレッシュプラグインPjax

1731 ワード

PjaxはAjax+pushStateのパッケージで、Webページのajaxロードを実現することができ、WebページのURLを変更してもWebページ全体自体をリフレッシュすることはなく、Webページのほとんどのコントロールとプラグインを再ロードすることを避けることができます.PushStateの機能は、具体的にはurlを変更してページがジャンプせず、履歴に格納されます.
    window.history.pushState(state, title, url);

GitHub転送ゲート:https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js
pjax実行プロセス:
  • 1.イベントをトリガーした後、関連文または関数を実行し、ajaxがサーバにデータを要求するようにパッケージする.
      options = $.extend(true, {}, $.ajaxSettings, pjax.defaults, options)
      pjax.options = optionsvar xhr = pjax.xhr = $.ajax(options)
    
  • 2.要求にX-PJAX IDを添付すると、サーバはContainerの内容のみを返す:
      xhr.setRequestHeader('X-PJAX', 'true')
      xhr.setRequestHeader('X-PJAX-Container', context.selector)
    
  • 3.Containerの内容を更新します.
      function pjaxReload(container, options)
      {  var defaults = 
      {    url: window.location.href,
          push: false,
          replace: true,
          scrollTo: false
      }
      return pjax($.extend(defaults, optionsFor(container, options)))}
    
  • 4.PushStateメソッドは、現在のページのアドレス、タイトルなどの情報をブラウザ履歴
      if (xhr.readyState > 0)
      { if (options.push && !options.replace) 
      {      // Cache current container element before replacing it
            cachePush(pjax.state.id, cloneContents(context))
            window.history.pushState(null, "", options.requestUrl)
      }
      fire('pjax:start', [xhr, options])
      fire('pjax:send', [xhr, options])
      }
      return pjax.xhr
      }
    
  • に格納する.
  • 5.replaceStateを使用してブラウザアドレスを更新します.function locationReplace(url) { window.history.replaceState(null, "", pjax.state.url) window.location.replace(url) }