pjax: js-Bibliothek, die Ajax und pushState kombiniert

Es ist sehr hilfreich, Ajax und PushState für die spätere Verwendung zu kapseln. Dieser Artikel ist eine Einführung in Pjax (Ajax PushState).

Einführung

Pjax ist eine Kapselung von Ajax PushState, sodass Sie die PushState-Technologie sehr bequem verwenden können.

Unterstützt sowohl Caching als auch lokale Speicherung. Die lokalen Daten können beim nächsten Besuch direkt gelesen werden, ohne dass ein weiterer Besuch erforderlich ist.

Und die Anzeigemethode unterstützt die Animationstechnologie. Sie können die systemeigene Animationsmethode verwenden oder die Animationsanzeigemethode anpassen.

Derzeit wird nur eine JQuery-basierte Version bereitgestellt, und in Zukunft werden Qwrap, Tangram und andere Versionen hinzugefügt.

So verwenden Sie

, um jquery.pjax.js auf Ihrer Seite bereitzustellen. Sie müssen den Link von pjax zum Binden verwenden (Sie können die URL einer externen Domain nicht binden). Zum Beispiel:

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

Ereignisse

Im Allgemeinen hoffen wir alle, bei der Verwendung von Ajax einen Ladeeffekt zu erzielen. Pjax selbst bietet diese Funktion nicht, stellt jedoch zwei verwandte Ereignisse bereit . Wenn Sie eine solche Funktion benötigen, können Sie diese im Event implementieren.

start.pjax wird aufgerufen, bevor pjax ajax die Anfrage sendet

end.pjax wird am Ende von phax ajax aufgerufen

damit Sie den Ladeeffekt im anzeigen können Das Ereignis start.pjax wird im Ereignis end.pjax ausgeblendet. Beispiel:

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

Browser-Unterstützung

Nur ​​Browser, die die Schnittstelle „history.pushState“ unterstützen, verwenden $.support.pjax, um festzustellen, ob der Browser sie unterstützt.

Wenn der Browser diese Funktion nicht unterstützt und die pjax-Methode aufruft, wird tatsächlich nichts unternommen und der Standard-Link-Antwortmechanismus wird weiterhin verwendet

Was das Backend tun muss

Ähnlich wie bei Ajax kann das Backend bei asynchronen Anfragen keine öffentlichen Inhalte zurückgeben.

Es wird also eine Schnittstelle benötigt, um festzustellen, ob eine Pjax-Anfrage gestellt wird. Beispiel: PHP kann aus der folgenden Implementierung lernen

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

Laden Sie den Quellcode herunter

pjax ist Open Source und der Code befindet sich unter https://github.com/welefen /pjax. Jeder ist herzlich willkommen, es zu besuchen und herunterzuladen.

Andere

Tatsächlich ist die Kapselung dieser Klasse von https://github.com/defunkt/jquery-pjax entlehnt

Caching, lokale Speicherung und Animation hinzugefügt an ihn und andere Funktionen angepasst und einige Parameter wurden optimiert.