pjax: ajaxとpushStateを組み合わせたjsライブラリ

後で使用するために ajax と PushState をカプセル化すると非常に便利です。この記事は、pjax (ajax+pushState) の紹介です

はじめに

pjax は、ajax + PushState をカプセル化したもので、pushState テクノロジーを非常に便利に使用できるようにします。

キャッシュとローカル ストレージの両方をサポートしており、次回アクセスするときにローカル データを直接読み取ることができます。再度アクセスする必要はありません。

そして、表示方法はアニメーション技術をサポートしており、システム独自のアニメーション方法を使用することも、アニメーション表示方法をカスタマイズすることもできます。

現在はjqueryベースのバージョンのみが提供されており、将来的にはqwrap、tangramなどのバージョンも追加される予定です。

使用方法

jquery.pjax.js をページにデプロイします。バインドには pjax のリンクを使用する必要があります (外部ドメインの URL をバインドすることはできません)。たとえば:

$('a').pjax({
    container: '#container', //内容替换的容器
    fx: 'fade', //展现的动画，支持默认和fade, 可以自定义动画方式。
    cache: true, //是否使用缓存
    storage: true, //是否使用本地存储
    titleSuffix: '' //标题后缀
})

Events

一般 Ajax を使用してデータを取得する場合、誰もが読み込み効果を期待しますが、Pjax 自体はこの機能を提供しませんが、2 つの関連イベントを提供します。 このような機能が必要な場合は、イベントに実装できます。

start.pjaxは、pjax ajaxがリクエストを送信する前に呼び出されます

end.pjaxは、phax ajaxが終了するときに呼び出されます

このようにして、start.pjaxイベントでローディング効果を表示し、end.pjaxイベントでローディングを非表示にすることができます。例:

$('#container').bind('start.pjax', function(){
    $('#loading').show();
})
$('#container').bind('end.pjax', function(){
    $('#loading').hide();
})

ブラウザのサポート

この関数は、history.pushState インターフェイスを提供するブラウザのみがサポートします。$.support.pjax は、ブラウザがサポートしているかどうかを判断するために使用されます。

ブラウザがこの関数をサポートせずに pjax メソッドを呼び出した場合、実際には何も行われず、デフォルトのリンク応答メカニズムが引き続き使用されます。

バックエンドが行う必要があること

ajax と同様に、バックエンドは非同期を使用できません。パブリック コンテンツも返されます。

そのため、pjax リクエストが行われたかどうかを判断するインターフェースが必要です。例: PHP は次の実装から学ぶことができます

function gplus_is_pjax(){
    return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}

ソース コードをダウンロードします

pjax はオープンソースであり、コードは https://github.com/welefen/pjax にありますので、どなたでもアクセスしてダウンロードできます。 。

その他

実際、このクラスのカプセル化は https://github.com/defunkt/jquery-pjax から借用しています

キャッシュ、ローカル ストレージ、アニメーションなどの機能が追加され、いくつかのパラメーターが最適化されています。