パイックスとは

pjax とは何ですか?

現在、多くの Web サイト (Facebook、twitter) がこのような閲覧方法をサポートしています。サイト内のリンクをクリックすると、そのページにジャンプするのではなく、サイト内のページが更新されるだけです。 この種のユーザー エクスペリエンスは、ページ全体をフラッシュするよりもはるかに優れています。

これらの Web サイトの Ajax 更新では、ページを更新すると、ブラウザのアドレス フィールドに戻ることもできます。前のページ。

では、そのような機能を実装したい場合は、どうすればよいでしょうか?

pjax がそのような機能をサポートするスクリプトを提供していることがわかりました。

pjax プロジェクトのアドレスは https://github.com/defunkt/jquery-pjax です。 実際の効果については、 http://pjax.heroku.com/ を参照してください。 pjax がチェックされていない場合、リンクをクリックするとジャンプします。 確認後、リンクは ajax 更新されます。

なぜ pjax を使用するのですか?

pjax にはいくつかの利点があります:

ユーザー エクスペリエンスの向上。ページがジャンプするとき、人間の目はページ全体を再識別する必要があります。ページの一部を更新する場合、再識別する必要があるのは 1 つの領域だけです。私は自分の Web サイトで pjax テクノロジーを使用しているため、ページジャンプしかない他の Web サイトにアクセスする方がはるかに不快だと感じずにはいられません。 同時に、一部のページを更新するときに読み込みプロンプトが表示され、更新時に古いページがブラウザに引​​き続き表示されるため、ユーザーはページの読み込み時間が長くなっても許容できます。

帯域幅の消費とサーバーの消費を大幅に削減します。ページの一部のみが更新されるため、ほとんどのリクエスト (css/js) は再取得されず、ユーザーのログイン情報が含まれる Web サイトの外枠部分を再生成する必要はありません。 この部分の消費量を具体的に計算したことはありませんが、リクエストの少なくとも 40%、サーバー消費量の 30% 以上が節約されたと推定します。

デメリットもあると思います:

IE6 などの歴史的なブラウザのサポートを実際にテストしたことはありませんが、pjax は新しい標準を利用しているため、古いブラウザとの互換性に問題が発生します。 ただし、pjax 自体はフォールバックをサポートしており、ブラウザがこの機能をサポートしていないことが判明した場合は、元のページに戻ります。

複雑なサーバー側のサポート サーバー側では、受信したリクエストに基づいて、ページ全体のレンダリングを実行するか、部分的なページのレンダリングを実行するかを決定する必要があります。 ただし、適切に設計されたサーバー コードの場合、そのような機能のサポートは大きな問題にはなりません。

総合すると、ユーザーエクスペリエンスとリソース利用率の向上により、デメリットは完全に補うことができます。ぜひ皆さんにも使ってみることをお勧めします。

pjax の使い方

公式ドキュメントを見てください。

技術者は直接の技術情報を読む習慣を身につけるべきだと思います。

直接使用できる pjax 用の Rails gem プラグインがあります。 ジャンゴのサポートもあります。

pjax の原理

この問題に対処できるようにするには、pjax がどのように機能するかを理解できる必要があります。 pjax コードには 1 つのファイルしかありません: https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js

能力がある場合は、自分で見てみることができます。 ここでその原理を説明しましょう。

まず、HTML で pjax する必要があるリンク コンテンツと、クリック後に更新する必要がある部分を指定します (data-pjax 属性に入れます):

$('a[data-pjax]').pjax()

pjax スクリプトがロードされると、リンクされたイベントは、ajax リクエストにラップされてサーバーに送信されます。

$.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 ロゴが含まれています。サーバーはそのようなリクエストを受信すると、ページの一部をレンダリングして返すだけでよいことを認識します。

xhr.setRequestHeader('X-PJAX', 'true')
xhr.setRequestHeader('X-PJAX-Container', context.selector)

pjax は返されたリクエストを受信した後、data-pjax で指定された領域を更新し、ブラウザのアドレスも更新します。

options.success = function(data, status, xhr) {
  var container = extractContainer(data, xhr, options)
  ...
  if (container.title) document.title = container.title
  context.html(container.contents)
}

ブラウザの後退をサポートするために、履歴 API を使用して対応する情報を記録します。

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 リクエストを生成します。

$(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)
      }
      ...
    }
  }
}

フォールバックをサポートするために、1 つは読み込み時にブラウザが履歴プッシュステート API をサポートしているかどうかを判断することです:

// 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)/)

もう 1 つは、リクエストに対する応答がないことが判明した場合にページに直接ジャンプすることです。期間 (パラメーターのタイムアウトを設定できます)。

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

結論

ここまで見たところで、実際に pjax を使ってみませんか? 非常に多くの利点があるため、ほとんどすべての Web サイトで pjax を使用する必要があると思います。 今すぐ使ってください！