Wir alle wissen, dass Ajax die Möglichkeit bietet, asynchron in den Browser zu laden und die Benutzererfahrung in der Datenüberprüfung, lokaler Aktualisierung usw. zu verbessern, aber gleichzeitig gibt es die folgenden Probleme:
1. Sie können den Seiteninhalt ohne Aktualisierung ändern, aber Sie können die Seiten -URL nicht ändern
2. Die Hash -Methode kann nicht mit den Vorwärts-, Rückwärts- und anderen Problemen des Browsers umgehen
Um die durch traditionellen AJAX verursachten Probleme zu lösen, stärkt HTML5 die Historie -API, fügt Pushstate-, Ersatz -Schnittstellen- und Popstate -Ereignisse hinzu. Ich werde es hier nicht ausführlich vorstellen. Studenten, die dieses Wissen nicht haben, empfehlen, zuerst die relevanten Informationen zu betrachten.
Das PJAX -Plugin verkauft Pushstate- und AJAX -Operationen und bietet uns eine einfache Methode, um solche Webanwendungen zu entwickeln. Die spezifischen Schritte sind wie folgt:
Definieren Sie Container, die lokale Aktualisierungen erfordern
<div id = "container"> </div>
Initialisieren Sie PJAX und hören Sie sich URL an
Die Codekopie lautet wie folgt:
$ (function () {
// pjax
$ (Dokument) .pjax ('a', '#Container');
$ .pjax.reload ('#Container');
})
Backend behandelt PJAX -Anfragen
Die Verarbeitungslogik des Backends besteht darin, zuerst festzustellen, ob es sich um eine PJAX -Anfrage handelt. In diesem Fall geben Sie den lokalen Inhalt gemäß den Anforderungsparametern zurück, geben Sie ansonsten das Layout zurück und initiieren Sie die PJAX -Anforderung durch "$ .pjax.reload ("#Container ");". Gemäß der obigen Logik kann der folgende Code geschrieben werden:
Die Codekopie lautet wie folgt:
var pjaxFilter = function (req, res, next) {
if (req.get ('x-pjax') {
nächste();
zurückkehren;
}
// Wenn es sich nicht um eine PJAX -Anforderung handelt, kehren Sie direkt zur Layout -Vorlage zurück
res.render ('layout', {title: 'pjax Simple Demo'});
};
Router.get ('/', pjaxFilter, Funktion (req, res) {
Res.Render ('Index');
});
Router.get ('/poem/: id', pjaxFilter, Funktion (req, res) {
var poemid = req.params.id;
res.render ('Gedicht/' + Gedichte);
})
Voller Code: PJAX-Demo
Dies ist nur die grundlegendste Funktion von PJAX. PJAX bietet reiche APIs, bitte besuchen Sie: jQuery-pjax