Todos sabemos que AJAX trae la capacidad de cargar asincrónicamente al navegador, mejorando la experiencia del usuario en verificación de datos, actualización local, etc., pero al mismo tiempo hay los siguientes problemas:
1. Puede cambiar el contenido de la página sin actualizar, pero no puede cambiar la URL de la página
2. El método hash no puede manejar los problemas de avance, atrasado y otros problemas del navegador
Para resolver los problemas causados por el AJAX tradicional, HTML5 fortalece la API de la historia, agrega PushState, Replacestate Interface y PopState Events. No lo presentaré en detalle aquí. Los estudiantes que no tienen este conocimiento recomiendan que vea primero la información relevante.
El complemento PJAX encapsula las operaciones PushState y AJAX, proporcionándonos un método simple para desarrollar tales aplicaciones web. Los pasos específicos son los siguientes:
Definir contenedores que requieren actualizaciones locales
<div id = "contenedor"> </div>
Inicializar PJAX y escuchar URL
La copia del código es la siguiente:
$ (function () {
// pjax
$ (documento) .pJax ('a', '#Container');
$ .pjax.reload ('#contenedor');
})
Backend maneja las solicitudes de PJAX
La lógica de procesamiento del backend es determinar primero si se trata de una solicitud PJAX. Si es así, devuelva el contenido local de acuerdo con los parámetros de solicitud, de lo contrario, devuelva el diseño e inicie la solicitud PJAX por `$ .pjax.reload ('#contenedor');`. Según la lógica anterior, se puede escribir el siguiente código:
La copia del código es la siguiente:
var pJaxFilter = function (req, res, next) {
if (req.get ('x-pjax')) {
próximo();
devolver;
}
// Si no es una solicitud de PJAX, vuelva a la plantilla de diseño directamente
res.render ('Layout', {Título: 'PJAX Simple Demo'});
};
router.get ('/', pjaxfilter, function (req, res) {
res.render ('índice');
});
router.get ('/poem/: id', pjaxfilter, function (req, res) {
var poemid = req.params.id;
res.render ('poema/' + poemid);
})
Código completo: PJAX-DEMO
Esta es solo la función más básica de PJAX. PJAX proporciona API ricas, visite: jQuery-PJAX