Во времена сверх динамичных сайтов на ajax, никого не удивишь поиском по сайту с огромным числом параметров. Когда клик по чекбоксу вызывает подгрузку сотен элементов. Порой, такая загрузка продолжается приличное время. Во времена классических(однопоточных) сайтов мы просто кешировали всю страницу целиком и работали с ней. Сейчас такое не пройдет и чтобы проверить, как будет выглядеть элемент, надо дождаться полной загрузки. И ладно если это просто загрузка новостей. А если это сложная поисковая форма у туроператора, а на сервере запускается десяток парсеров при каждом смене параметров фильтра. Такие ajax запросы могут по времени быть очень и очень долгими.
В почте я расскажу, как можно кешировать ajax запросы сделанные на jQuery, но принцип один и тот же для всех ajax библиотек. Нам просто каким-то образом надо добавить плагин, к ajax модулю jQuery, и сохранять в локальное хранилище запросы.
Можно написать все самим, а можно минуту погуглить и воспользоваться готовым решением от знаменитого Пола Ириша https://github.com/paulirish/jquery-ajax-localstorage-cache
Решение старое, и не работает для новых версий jQuery и его надо немного подправить.
Находим строку
1 | if ( options.dataType.toLowerCase().indexOf( 'json' ) === 0 ) |
На ней в новых версиях jQuery будет происходить ошибка. Так как сейчас в options.dataType содержится массив. Поэтому можно исправить на
1 | if ( options.dataType[0].toLowerCase().indexOf( 'json' ) === 0 ) |
В моем случае ajax запрос работал исключительно с JSON поэтому я заменил все эти условия на
1 | if (true) |
Да!) Так тоже можно делать.
Теперь все готово к использования. И как указано на странице скрипта в github, пользоваться можно так
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $.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, пока не нужно загрузить какой-нибудь файл или сделать еще что-то специфичное. Я пользуюсь такими методами
1 | $.post('index.php', {}, function () {}, 'json') |
Или аналогичной для get запроса
1 | $.getJSON('index.php', function () {}) |
Для таких методов не задать параметры. Поэтому проще всего переопределить параметры jquery ajax глобально. Сделать это можно методом $.ajaxSetup
1 2 3 4 5 6 7 8 | $.ajaxSetup({ localCache : true, // required to use cacheTTL : 1, // in hours. Optional cacheKey : 'post', // optional isCacheValid : function(){ // optional return true; },}); |
Такое можно провернуть еще и в том случае, когда сам ajax запрос зашит далеко в недрах библиотеки, которую писал программист с индийскими корнями с алгоритмической сложностью более 1000
Всего доброго! Подписывайтесь на твиттер, в нем будет много всего интересного!
Комментарии