Nous savons tous que Ajax apporte la possibilité de charger de manière asynchrone au navigateur, améliorant l'expérience utilisateur de la vérification des données, de la rafraîchissement local, etc., mais en même temps, il y a les problèmes suivants:
1. Vous pouvez modifier le contenu de la page sans actualiser, mais vous ne pouvez pas modifier l'URL de la page
2. La méthode du hachage ne peut pas gérer les problèmes du navigateur, en arrière et d'autres
Afin de résoudre les problèmes causés par l'Ajax traditionnel, HTML5 renforce l'API de l'histoire, ajoute les événements pushstate, le remplacement d'interface et de popstate. Je ne le présenterai pas en détail ici. Les étudiants qui n'ont pas ces connaissances recommandent d'abord de regarder les informations pertinentes.
Le plugin PJAX résume les opérations Pushstate et Ajax, nous fournissant une méthode simple pour développer de telles applications Web. Les étapes spécifiques sont les suivantes:
Définir les conteneurs qui nécessitent des mises à jour locales
<div id = "conteneur"> </div>
Initialiser pjax et écouter URL
La copie de code est la suivante:
$ (function () {
// pjax
$ (document) .pjax ('a', '#container');
$ .pjax.reload ('# Container');
})
Backend gère les demandes de pjax
La logique de traitement du backend est de déterminer d'abord s'il s'agit d'une demande PJAX. Dans l'affirmative, renvoyez le contenu local en fonction des paramètres de demande, sinon renvoyez la mise en page, puis lancez la demande pjax par `$ .pjax.reload ('# contener');`. Selon la logique ci-dessus, le code suivant peut être écrit:
La copie de code est la suivante:
var pJaxFilter = fonction (req, res, suivant) {
if (req.get ('x-pjax')) {
suivant();
retour;
}
// S'il ne s'agit pas d'une demande PJAX, revenez directement au modèle de mise en page
res.render ('Layout', {title: 'pjax Simple Demo'});
};
router.get ('/', pjaxfilter, fonction (req, res) {
res.render ('index');
});
router.get ('/ poem /: id', pjaxfilter, fonction (req, res) {
var pomid = req.params.id;
res.render ('poème /' + poémide);
})
Code complet: Pjax-Demo
Ce n'est que la fonction la plus élémentaire de PJAX. Pjax fournit des API riches, veuillez visiter: jQuery-Pjax