Все мы знаем, что Ajax приносит возможность асинхронно загружать в браузер, улучшая пользовательский опыт в проверке данных, локальном обновлении и т. Д., Но в то же время возникают следующие проблемы:
1. Вы можете изменить содержание страницы без обновления, но вы не можете изменить URL -адрес страницы
2. Хэш -метод не может справиться с вперед, назад и другими проблемами браузера
Чтобы решить проблемы, вызванные традиционным AJAX, HTML5 укрепляет исторический API, добавляет интерфейс pushstate, replacetate и события Popstate. Я не буду представлять его подробно здесь. Студенты, у которых нет этих знаний, рекомендуют сначала посмотреть на соответствующую информацию.
Плагин PJAX инкапсулирует операции PushState и Ajax, предоставляя нам простой метод разработки таких веб -приложений. Конкретные шаги следующие:
Определите контейнеры, которые требуют локальных обновлений
<div id = "контейнер"> </div>
Инициализировать PJAX и слушать URL
Кода -копия выглядит следующим образом:
$ (function () {
// pjax
$ (документ) .pjax ('a', '#container');
$ .pjax.reload ('#container');
})
Бэкэнд обрабатывает запросы PJAX
Логика обработки бэкэнда заключается в том, чтобы сначала определить, является ли это запросом PJAX. Если это так, верните локальный контент в соответствии с параметрами запроса, в противном случае верните макет, а затем инициируйте запрос PJAX с помощью $ .pjax.reload ('#intainer'); `. Согласно вышеуказанной логике, можно записано следующий код:
Кода -копия выглядит следующим образом:
var pjaxfilter = function (req, res, next) {
if (req.get ('x-pjax')) {
следующий();
возвращаться;
}
// Если это не запрос PJAX, вернитесь к шаблону макета напрямую
res.render ('layout', {title: 'pjax simple demo'});
};
router.get ('/', pjaxfilter, function (req, res) {
res.render ('index');
});
router.get ('/poem/: id', pjaxfilter, function (req, res) {
var poemid = req.params.id;
res.render ('стихотворение/' + poemid);
})
Полный код: PJAX-Demo
Это просто самая основная функция PJAX. PJAX предоставляет богатые API, пожалуйста, посетите: jQuery-Pjax