Todos sabemos que o Ajax traz a capacidade de carregar de forma assíncrona ao navegador, melhorando a experiência do usuário na verificação de dados, atualização local etc., mas, ao mesmo tempo, há os seguintes problemas:
1. Você pode alterar o conteúdo da página sem atualização, mas não pode alterar o URL da página
2. O método hash não pode lidar com os problemas do navegador para frente, para trás e outros
Para resolver os problemas causados pelo AJAX tradicional, o HTML5 fortalece a API da história, adiciona pushstate, replacestada interface e eventos popstate. Não vou apresentá -lo em detalhes aqui. Os alunos que não têm esse conhecimento recomendam que você observe as informações relevantes primeiro.
O plug -in do PJAX encapsula as operações PushState e Ajax, fornecendo -nos um método simples para desenvolver esses aplicativos da Web. As etapas específicas são as seguintes:
Defina recipientes que requerem atualizações locais
<div id = "contêiner"> </div>
Inicialize o PJAX e ouça URL
A cópia do código é a seguinte:
$ (function () {
// pjax
$ (documento) .pjax ('a', '#container');
$ .pjax.reload ('#contêiner');
})
Lida com os pedidos do PJAX
A lógica de processamento do back -end é determinar primeiro se é uma solicitação PJAX. Nesse caso, retorne o conteúdo local de acordo com os parâmetros de solicitação, retorne o layout e inicie a solicitação PJAX por `$ .pjax.reload ('#contêiner');`. De acordo com a lógica acima, o código a seguir pode ser escrito:
A cópia do código é a seguinte:
var pjaxfilter = function (req, res, próximo) {
if (req.get ('x-pjax')) {
próximo();
retornar;
}
// Se não for uma solicitação PJAX, retorne ao modelo de layout diretamente
res.render ('layout', {title: 'pjax simples demonstração'});
};
Router.get ('/', pjaxfilter, função (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 é apenas a função mais básica do PJAX. O PJAX fornece APIs ricas, visite: jQuery-pjax