Запросы AJAX с кешированием

Запросы AJAX с кешированием

На прошлой неделе я написал руководство о том, как мы можем улучшить взаимодействие с пользователем на нашем сайте, загружая новый контент на страницы JavaScript без перезагрузки. На этой неделе мы внесем изменения в наш код, чтобы кэшировать загруженную информацию и не отправлять новые запросы на сервер без необходимости..

Давайте сначала проясним, что кеширование целесообразно, когда нет краткосрочных изменений на загружаемых страницах (как, например, в этом блоге)..

В этом руководстве мы внесем изменения непосредственно в код из предыдущего пути..

Кассовый объект

Начнем с добавления переменной (объекта), в которой мы будем хранить кешированную информацию..

jQuery (функция ($) {var cache = {};
$ (документ) .on (‘клик’, ‘nav a’, function (e) {e.preventDefault (); var link = $ (this);
$ .get (link.attr (‘href’), function (data, status, XHR) {if (status == ‘success’) {cache [link.attr (‘href’)] = data; $ (‘section [role = "main"] ‘). html ($ (data) .find (‘ section [role = "main"] ‘). html ()); $ (‘ title ‘). html ($ (data). фильтр (‘заголовок’). html ());
$ (‘заголовок’). html ($ (данные) .find (‘заголовок’). html ()); } else {// сообщаем пользователю, что мы не можем подключиться к серверу}}); }); });

Для облегчения доступа к текущей ссылке я сохраняю ее значение в переменной link в обработчике кликов..

Мы определяем переменную в функции, которую вызываем в загруженном содержимом DOM. Таким образом, мы можем получить к нему доступ в любом месте этой функции, но не за ее пределами..

Читать также:  Бандлеры

Обратите также внимание на то, как мы записываем в этот объект информацию, которую мы получили с результатом с успешным статусом в нашем запросе на получение — cache [link.attr (‘href’)] = data;.

Доступ к рубцу от объекта через квадратные скобки

Используя квадратные скобки, мы можем получить доступ к свойству объекта. Если мы просто напишем строку в квадратных скобках, это будет то же самое, что и использование синтаксиса точечной записи:

объект = {prop1: ‘значение’}; console.log (object.prop1); // выводит "значение" в консоль
объект [‘prop1’] = ‘новое значение’; console.log (object.prop1); // вывод "новое значение"
for (var i = 1; i 2; i ++) {объект [‘prop’ + i] = ‘третье значение’; }
console.log (object.prop1); // вывод "третьего значения"

Преимущество этого синтаксиса в том, что мы можем динамически создавать имена функций с помощью переменных. В этом примере вы видите, как я динамически генерирую имя свойства «prop1». Такое невозможно сделать с помощью синтаксиса точечной записи..

Мы также используем это преимущество при кешировании. Там мы устанавливаем значение свойства, так как само свойство зависит от адреса ссылки. Таким образом, мы можем сгенерировать столько свойств, сколько у нас есть ссылка. В то же время мы сохраняем независимость самого JavaScript от адресов страниц..

Читать также:  Активное состояние меню блога при чтении сообщения блога

Проверить доступный кеш

Теперь, когда мы нажимаем на ссылку, мы должны проверить, не кэшируется ли результат. Таким образом, мы сделаем запрос AJAX только один раз для одного и того же адреса..

jQuery (функция ($) {var cache = {};
$ (документ) .on (‘клик’, ‘nav a’, function (e) {e.preventDefault ();
var link = $ (это);
if (typeof (cache [link.attr (‘href’)])! = ‘undefined’) {// показать кешированный контент} else {$ .get (link.attr (‘href’)), function (data, status , XHR) {if (status == ‘success’) {cache [link.attr (‘href’)] = data; $ (‘section [role = "main"]’). Html ($ (data) .find (‘section [role = "main"]’). html ()); $ (‘title’). html ($ (data) .filter (‘title’). html ()); (‘заголовок’). html ());
$ (‘заголовок’). html ($ (данные) .find (‘заголовок’). html ()); } else {// сообщаем пользователю, что мы не можем подключиться к серверу}}); }}); });

Проверяем это с помощью typeof (cache [link.attr (‘href’))! = ‘Undefined’. Мы проверили тип переменной на предыдущих уроках. Здесь мы снова проверяем, отличается ли тип от undefined. Существует ли переменная, которая в данном случае имеет форму свойства объекта..

Если он существует — значит, у нас уже есть данный адрес в кеше. Тогда нам не нужно делать новый запрос, а только показать информацию. Мы могли бы просто скопировать функциональность, которой мы заменяем контент в функции обратного вызова запроса. Но это приведет к повторению кода.

Читать также:  Запросы AJAX

Избегайте дублирования кода

Лучше всего сделать это с помощью функции. И кричать в обоих случаях:

jQuery (функция ($) {var cache = {};
функция showPageContent (data) {$ (‘section [role = "main"]’). html ($ (data) .find (‘section [role = "main"]’). html ()); $ (‘заголовок’). html ($ (данные) .filter (‘заголовок’). html ()); $ (‘заголовок’). html ($ (данные) .find (‘заголовок’). html ()); }
$ (документ) .on (‘клик’, ‘nav a’, function (e) {e.preventDefault ();
var link = $ (это);
если (typeof (cache (link.attr (‘href’)])! = ‘undefined’) {showPageContent (cache [link.attr (‘href’)]); } else {$ .get (link.attr (‘href’)), функция (данные, статус, XHR) {if (status == ‘success’) {cache [link.attr (‘href’)] = data; showPageContent (data);} else {// сообщаем пользователю, что мы не можем подключиться к серверу}}); }}); });

Вы можете увидеть окончательный результат на https://magadanski.com/demo/ajax-requests-cached/

Поскольку в этом случае мы используем статические страницы, серверы сообщают браузеру, что изменение может быть незамечено в ближайшее время. Вот почему сами браузеры кэшируют наши запросы. Код, который мы добавили в это руководство, был бы актуален, если бы наши страницы создавались динамически (например, с помощью PHP)..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?