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

この記事では、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 = '//layouts/column1';
  $dataProvider = new CActiveDataProvider('Article', array(
    'criteria' => array('order' => 'create_time DESC')
  ));
  if (array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']) {
    $this->renderPartial('index', array(
       'dataProvider' => $dataProvider,
    ));
  } else {
    $this->render('index', array(
      'dataProvider' => $dataProvider,
    ));
  }
}

効果のデモ画像:

記事リンクまたは記事リンクをクリックすると、次のエフェクトページが表示されます:

----------------------------- ------------

jquery-pjax 使用時の注意事項:

1. 返されるテンプレートのコンテンツは、HTML タグで囲む必要があります

2.プラグインの使用については、github プロジェクトの説明を参照してください。アップデート後は使用方法が異なる場合があります

3. Pushstate をサポートしていない低バージョンのブラウザの場合、pjax プラグインが自動的に判断して使用します。従来のページ読み込みモード

4. ページの pjax リクエスト時間が設定時間を超えると、読み込みにリフレッシュが使用されるため、プラグイン

の関連パラメーターはすべて私がコンパイルする必要があります。今後もお役に立てば幸いです。

関連記事:

Jqueryとphpを組み合わせてAJAXロングポーリングを実装

ロード時のjs ajaxプログレスバーコード

JavaScript、Ajax、jQueryの予備理解、および3つの関係の比較

以上がYii 統合 pjax (pushstate+ajax) を使用して、更新せずにページをロードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。