Кеширование ajax запросовВо времена сверх динамичных сайтов на ajax, никого не удивишь поиском по сайту с огромным числом параметров. Когда клик по чекбоксу вызывает подгрузку сотен элементов. Порой, такая загрузка продолжается приличное время. Во времена классических(однопоточных) сайтов мы просто кешировали всю страницу целиком и работали с ней. Сейчас такое не пройдет и чтобы проверить, как будет выглядеть элемент, надо дождаться полной загрузки. И ладно если это просто загрузка новостей. А если это сложная поисковая форма у туроператора, а на сервере запускается десяток парсеров при каждом смене параметров фильтра. Такие ajax запросы могут по времени быть очень и очень долгими. 

В почте я расскажу, как можно кешировать ajax запросы сделанные на jQuery, но принцип один и тот же для всех ajax библиотек. Нам просто каким-то образом надо добавить плагин, к ajax модулю jQuery, и сохранять в локальное хранилище запросы.

Можно написать все самим, а можно минуту погуглить и воспользоваться готовым решением от знаменитого Пола Ириша https://github.com/paulirish/jquery-ajax-localstorage-cache

Решение старое, и не работает для новых версий jQuery и его надо немного подправить.

Находим строку 

if ( options.dataType.toLowerCase().indexOf( 'json' ) === 0 )

На ней в новых версиях jQuery будет происходить ошибка. Так как сейчас в options.dataType содержится массив. Поэтому можно исправить на

if ( options.dataType[0].toLowerCase().indexOf( 'json' ) === 0 )

В моем случае ajax запрос работал исключительно с JSON поэтому я заменил все эти условия на

if (true)

Да!) Так тоже можно делать.

Теперь все готово к использования. И как указано на странице скрипта в github, пользоваться можно так

$.ajax({
        url          : '/post',
        localCache   : true,        // required to use

        cacheTTL     : 1,           // in hours. Optional
        cacheKey     : 'post',      // optional
        isCacheValid : function(){  // optional
            return true;
        },

        success: function(reply) {
            // i can play with my reply ! 
        }
});

Этими, безусловно удобными и понятными параметрами, можно воспользоваться так. Но лично я не использую функцию ajax, пока не нужно загрузить какой-нибудь файл или сделать еще что-то специфичное. Я пользуюсь такими методами

$.post('index.php', {}, function () {}, 'json')

Или аналогичной для get запроса

$.getJSON('index.php', function () {})

Для таких методов не задать параметры. Поэтому проще всего переопределить параметры jquery ajax глобально. Сделать это можно методом $.ajaxSetup

$.ajaxSetup({
	localCache   : true,        // required to use
	cacheTTL     : 1,           // in hours. Optional
	cacheKey     : 'post',      // optional
	isCacheValid : function(){  // optional
		return true;
	},
});

Такое можно провернуть еще и в том случае, когда сам ajax запрос зашит далеко в недрах библиотеки, которую писал программист с индийскими корнями с алгоритмической сложностью более 1000

Всего доброго! Подписывайтесь на твиттер, в нем будет много всего интересного!

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

ИванИванов
# ИванИванов 17.04.2015 13:48
Какая то проблема со шрифтами в файрфоксе у вас на сайте