ThinkPHP6 での Pjax テクノロジーの使用

Web テクノロジーの継続的な発展により、Web サイトへのアクセス速度はますます高速になっています。ただし、ブログ、ニュース サイト、ソーシャル メディアなど、ページを頻繁に更新する必要がある一部のアプリケーションでは、Web サイトが高速であっても、ユーザーは情報を取得したり一部の操作を実行したりする前に、各ページが完全に読み込まれるまで待つ必要があります。 Pjax テクノロジーはこの問題の解決に役立ち、ThinkPHP6 で Pjax を使用するのも非常に簡単です。

Pjax とは何ですか?

Pjax のプロセス全体は PushState Ajax です。簡単に言うと、ページ全体を更新せずに、ページを部分的に更新してWebサイトの内容を更新する手法です。 Pjax は、JavaScript と XMLHttpRequest テクノロジーを使用してこれを実現し、HTML5 の新しい PushState API と組み合わせて、ブラウザーの URL を変更しないようにします。

Pjax では、各ページは「コンテナ」と呼ばれる複数の部分に分割されます。ユーザーがリンクをクリックするかフォームを送信したときにのみ、特定のコンテナを更新します。たとえば、ブログ ページでは、1 つのコンテナにすべての投稿のリストを含め、別のコンテナに選択した投稿の詳細を表示できます。この利点は、特定のコンテンツをより速く読み込むことができるため、Web サイトの速度とパフォーマンスが向上すると同時に、ユーザー エクスペリエンスも向上することです。

ThinkPHP6 での Pjax の使用

ThinkPHP6 で Pjax を使用するには、まず Pjax プラグインをインストールする必要があります。次のようにインストールします。

composer require ngyuki/pjax

次に、コントローラーに次のコードを追加して、pjax を有効にします。

if ($this->request->isPjax()) {
    // 如果是Pjax请求，禁用布局文件
    $this->view->engine->layout(false);
}

ビュー ファイルに、次のコードを追加して、Pjax でどのコンテナを更新する必要があるかを決定します。 request:

// 设置pjax容器
<div id="pjax-container">
    <?php echo $content; ?>
</div>

// 将pjax链接添加到页面
<a href="http://www.example.com/page" data-pjax="#pjax-container">下一页</a>

ここで、#pjax-container は更新する必要があるコンテナの ID であり、data-pjax 属性はブラウザにどのリンクかを伝えます。 Pjax リクエストで処理する必要があります。ユーザーがリンクをクリックすると、コンテナ内のコンテンツのみが更新され、ヘッダーやフッターなどの他のページ要素は変更されません。

バックエンドを使用してビューをレンダリングする必要がある場合は、テンプレートに pjax 変数を設定できます。 pjax を有効にすると、ajax レイアウトが使用できます。例:

// 启用Pjax时使用不同的布局
if ($pjax) {
    $this->view->engine->layout('layouts/ajax');
}

Ajax レイアウト ファイルでは、通常、読み込み速度を向上させるためにすべてのヘッダー ファイル、ナビゲーション タグ、およびフッター タグが削除され、対応するコンテンツが JavaScript コードに置き換えられます。

概要

Pjax テクノロジーは、ページの読み込み速度を向上させ、ユーザー エクスペリエンスを向上させるのに役立ちます。 ThinkPHP6 での Pjax の使用も非常に簡単で、Pjax プラグインをインストールし、Pjax リクエストを有効にして、Pjax コンテナを決定するだけです。 Pjax を使用する場合、対応するバックエンド レンダリング ビューを使用して、パフォーマンスをさらに向上させることもできます。

以上がThinkPHP6 での Pjax テクノロジーの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。