Как избежать кэширования JS при кроссдоменных запросах с JSONP

JSONP — способ выполнения JS скриптов при подгрузке их с других серверов, позволяющий избежать блокирования кросдоменных запросов.

 

 

Избежать кэширования JSONP

JSONP — альтернатива AJAX, предоставляющая большие возможности, но менее безопасная.

Трудности при использовании JSONP могут возникнуть на этапе обработки запросов сервером. JS скрипты являются статическим контентом и могут кэшироваться как на стороне сервера так и на стороне браузера пользователя.

 

Для кэширования применяются отдельный хранилища за счет Nginx или Varnish. Браузерное кэширование реализуется за счет определенного заголовка (чаще всего Cache-Control), который сервер передает браузеру и тот в дальнейшем его проверяет.

 

Если скрипты обновляются кэширование нежелательно поскольку посетители сайта могут видеть неактуальный контент.

 

 

Чтобы избежать кэширования при использовании JSONP можно добавлять в URL для каждого запроса случайным образом сгенерированное число. Создавать его можно функцией random.

 

var url = «http://example.com/?callback=newFunction» +
«&random=» + (new Date()).getTime();

 

Фактически URL может выглядеть так:

http://example.com?callback=newFunction&random=564548785815

 

 

http://example.com здесь — адрес домена при запросе на который можно получить скрипт, newFunction — функция скрипта, которая вызывается. &random=564548785815 — секция, которая сгенерирована и будет отброшена браузером поскольку не представляет ценной информации, ее использование при этом позволяет избежать кэширования.

 

 

Переменная URL может обрабатываться так:

function clickButton() { var s = document.createElement(«script»);
var url = «http://example.com/?callback=newFunction» +
«&random=» + (new Date()).getTime();
document.body.appendChild(url);
}

 

Функция при этом назначается на кнопку и выполняется при ее нажатии.

Запись опубликована автором в рубрике JS.