ホームページ >ウェブフロントエンド >jsチュートリアル >Yii 統合 pjax (pushstate+ajax) を使用して、更新せずにページをロードします

Yii 統合 pjax (pushstate+ajax) を使用して、更新せずにページをロードします

亚连オリジナル: 2018-05-24 17:29:561949ブラウズ

この記事では、Yii が pjax (pushstate+ajax) を統合して、更新せずにページをロードする方法を紹介します。一緒に学びましょう

Pjax とは?

Pjax = history.pushState + Ajax
   = history.pushState + Async JS + XML(xhr?)

BOM オブジェクトの履歴が強化され、主に履歴スタックに対する操作が行われました。以前は、ページ全体をジャンプして更新するものしかありませんでした。現在は、pushState が追加されています。、replaceState など。履歴スタックを単純に操作する方法は、履歴スタック内のコンテンツを変更するだけであり、副作用はありません (ページがジャンプしたり更新されたりしません)

PJAX 効果

動的に読み込まれるコンテンツajax は URL を通じて追跡できます。この手法は、2 ステップのビューレイアウトを持つビューで特に有益です。更新せずにページをロードすることは、静的スクリプトや共通モジュールが多数ある場合に、応答速度とユーザーエクスペリエンスが大幅に向上することを意味し、再利用のコストが最大限に節約されます。アプリケーションの例では、現在の Google+、Facebook、および Weibo の新バージョンを参照できます。これらも HTML5 PushState に基づいて実装されています。 Google Plus のパフォーマンスは最も顕著です。ナビゲーションバーのアドレスをクリックすると、矢印がターゲットに合わせて移動し、同時に読み込まれたページがフェードインします。

ダーティ URL とクリーン URL

pjax が登場する前は、更新せずにページをロードし、URL を通じて追跡するには、ブラウザーが window.location.hash 属性をサポートする必要がありました。具体的な構築方法は、url#アンカー以降に記録されたアドレスを判断して、ハッシュ変更監視関数を記述し、ハッシュ変更がトリガーされた場合にロードする内容を判断します。欠点は、ie6 などの下位バージョンのブラウザーがハッシュをサポートしていないことと、前方および後方を実現するために履歴 URL を記録するために追加の iframe を構築する必要があることです。最大の問題は、# の後に生成されたコンテンツが検索エンジンによってインデックスに登録されないことです。Google は以前、#! を使用してアドレスを ?escape_fragment=url に誘導するという解決策を提供しました。私は twitter や facebook を使用しています。 , Renren、Sina Weibo、そして閉鎖されたDoubanの誰もが、このハッシュバンが使用されているか、使用されているのを見たことがあるでしょう。合格＃！ URL を更新せずに読み込むことを実現する一般的な方法は、検索エンジン (国内の Baidu など) に含まれにくいため、比較的ダーティな URL と呼ばれますが、pjax ではクリーンな URL を使用して同様の効果を得ることができます。さまざまなブラウザとの互換性が高く、現在はブラウザが最適な方法です

PHP+jQueryを使用してPJAXを実装

jQueryはすでにオープンソース化されているため、pushStateベースのJavaScriptプラグインを最初から作成する必要はありません。そしてそれは簡単に実装できます。現在、開発中のプロジェクトにそれを導入しましたが、元のプロジェクトと非常に互換性があり、もちろん、新しいバージョンの Weibo がどのようになるかを視聴者に理解してもらいたいと思っています。使用すると、次のようになります

開始前の準備:

1. jQuery ライブラリ

2. jQ ベースの pjax プラグイン (github のオープンソースプロジェクト) /github.com/defunkt/jquery-pjax

3. PHP プロジェクトのコード (共有しやすいように、この記事ではデモに yii フレームワークを使用しています。実際の開発は同様です)

1. フロントエンドの実装

使い方は非常に簡単で、jquery-pjax プラグインは適切にパッケージ化されており、好みに応じて確実にカスタマイズできます (たとえば、g plus の効果をコピーするなど)。以下は、上記を統合した基本的な HTML サンプルコードです。手順:

<?php
Yii::app()->clientScript->registerCoreScript(&#39;jquery&#39;);
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . &#39;/js/jquery-pjax/jquery.pjax.js&#39;);//具体以你存放pjax的实际位置为准
?>
<p id="nav">
  <a href="<?php echo Yii::app()->createUrl(&#39;article/index&#39;);?>">article</a>
</p>
<p id="main">替换的内容</p>
<script type="text/javascript">
  $(document).ready(function(){
    $("#main").pjax("a");
  });
</script>

最終的な目標は、a タグをクリックすることです。ajax を通じて返された結果は、main の ID を持つ p に格納されます。テキストは対応するアドレスの内容に置き換えられ、URL は自動的に更新されます。ページはリロードされません。バックエンドで処理するコンテンツの実装を始めましょう

2. PHP側の実装

PHP側で行うべき作業は主に2つです。 1. レイアウトビューのレイアウトの実装 2. リクエストの判断pjax から来ています

Yii フレームワークでの実装:

コントローラーで次のアクションの処理を行います (例として Article のインデックスを取り上げます):

public function actionIndex() {
  $this->layout = &#39;//layouts/column1&#39;;
  $dataProvider = new CActiveDataProvider(&#39;Article&#39;, array(
    &#39;criteria&#39; => array(&#39;order&#39; => &#39;create_time DESC&#39;)
  ));
  if (array_key_exists(&#39;HTTP_X_PJAX&#39;, $_SERVER) && $_SERVER[&#39;HTTP_X_PJAX&#39;]) {
    $this->renderPartial(&#39;index&#39;, array(
       &#39;dataProvider&#39; => $dataProvider,
    ));
  } else {
    $this->render(&#39;index&#39;, array(
      &#39;dataProvider&#39; => $dataProvider,
    ));
  }
}

効果のデモ画像: