jQuery pjax の簡単な例の概要-jsチュートリアル-php.cn

jQuery pjax の簡単な例の概要

小云云

リリース： 2018-01-17 14:04:22

オリジナル

2171 人が閲覧しました

pjax は、ajax と PushState を使用して、実際のパーマリンク、ページタイトル、戻るボタンなどの高速なブラウジングエクスペリエンスを実現する jQuery プラグインです。この記事では主に jQuery pjax の簡単な例の概要を紹介し、皆様のお役に立てれば幸いです。

ajax の欠点は、ajax リクエストは履歴に残らないため、ブラウザーの前後の動作が破壊されることです。 pjax は異なります。pjax は ajax+pushState のパッケージとして解釈されます。これは、ajax リクエストを履歴に書き込み、アドレスバーに反映するため、ユーザーは前方と後方を快適に使用できます。 pjax にはいくつかの実装方法がありますが、ここでは最も一般的に使用される jQuery ライブラリである jquery.pjax.js を使用します。デモコードのサーバー側では、PHP スクリプト言語が使用されます。

Pjax はどこで使用されますか? Baidu Cloud Disk について話しましょう。誰もがこれを使用したことがあるはずです。 Baidu Cloud Disk の PC 側では、クリックしてフォルダーを開くと、そのフォルダー内のファイルが開きます。実は、ファイルを表示する p には pjax テクノロジーが使用されています。アドレスバーが変わり内容も変わりますが、これはajaxリクエストです。戻るときに、上位フォルダーの内容は履歴に存在するため、再要求する必要はありません。さらに、開発者はキャッシュとストレージキャッシュの使用を選択することもできます。

例 1、

<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
  <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <p>
  Go to <a href="res1.php" rel="external nofollow" >第一页</a>.<a href="res2.php" rel="external nofollow" >第二页</a>
 </p>
 <p id="container"></p>  
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax(&#39;a&#39;, &#39;#container&#39;)
</script>
</html>

ログイン後にコピー

res1.php

<?php 
echo "<p style=&#39;background:red;&#39;>第一页</p>";

ログイン後にコピー

res2.php

<?php 
echo "<p style=&#39;background:red;&#39;>第二页</p>";

ログイン後にコピー

説明:

$(document).pjax('a', '#Container') ここで、a はトリガー要素、#container は読み込み pjax ですコンテナを返します内容については以下同様。 exexample 2、

rreee
Server-sideコード：

res3.php：

rreee-three包括的なアプリケーション

window.history.pushstate（state、title、url）;/ / https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState// @State オブジェクト: 履歴ポイントを記録する追加オブジェクト。空にすることができます。

// @Page title:現在、すべてのブラウザでサポートされていません。

// @Optional URL: ブラウザは URL が存在するかどうかを確認せず、URL を変更するだけです。

PJAX は実際には HTML5 です。 window.history.pushState (状態、タイトル、URL) この新しい API と従来の AJAX テクノロジーは、通常、更新せずにページを読み込むために使用されます。pushState の主な機能は、この方法で AJAX の後に URL を変更し、戻り履歴を追加することです。更新せずにページをロードすると、ユーザーは普通に行ったり来たりすることもできます。また、JS の window.history.back() と window.history.forward() も正常に動作します。以下は、pushState + を使用して更新せずにページをロードする例です。 jQuery AJAX ブラウズはサポートされていません。ブラウザは自動的に元のリンクを開くフォームに縮退します。JS 統計コードは次のようになります。ページ訪問数を適切にカウントするためにメインブロックに配置されます。 Number.

例 2:

<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
  <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <p>
  <input type="button" id="clickMe" value="GO">
 </p>
 <p id="container"></p>  
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
  $(&#39;#clickMe&#39;).click(function(){
    $.pjax({
      url: &#39;./res3.php&#39;,
      container: &#39;#container&#39;
    });
  });
});
</script>
</html>

ログイン後にコピー

<?php 
echo "<p style=&#39;background:red;&#39;>第三页</p>";

ログイン後にコピー

主なアイデアは、 .pjax a がクリックされたときに、 #pjax-container の内容を次のリクエストの内容に置き換えます。バックエンド処理中に、それが pjax リクエストであるかどうか、部分的なレンダリングが必要かどうか、完全なレンダリングが必要かどうかを判断する必要があります。

pjax は HTML5 テクノロジーを使用しているため、ブラウザーが HTML5 をサポートしていない場合、Web サイトは通常どおりジャンプロードされます。サポートされている場合は、部分的なレンダリングのみが実行されます (ただし、ブラウザーのアドレスバーの URL は通常どおり変更されます)。リンク））。

上記の JS コードには、pjax を構成するときにパラメータscrollTo:falseがあることに注意してください。このパラメータを追加すると、接続をクリックした後にWebページのスクロールバーが変更されなくなり、ブラウジングウィンドウが自動的に表示されます。クリックするたびにジャンプし、Web ページの先頭に移動します

概要: Pjax は実際にはページを更新せずにサーバーからコードスニペットを返し、同時に URL アドレスも変更します。これにより、リソースの読み込みとページの読み込み速度を向上させます。

添付ファイル: pjax の github プロジェクトアドレス
https://github.com/defunkt/jquery-pjax