Предположим, что на вашем веб-сервере лежит статический JSON-файл, к примеру, http://mystaticfiles.com/hello.json. Этим сервером может быть Amazon S3, CloudStorage или любая другая CDN. Содержимое файла выглядит примерно так:
{"message": "Hello, world!"}
Допустим, необходимо, чтобы веб-приложение на домене example.com доставало данные из этого статического JSON-файла с помощью Javascript, но обычным AJAX-запросом сделать этого будет нельзя из-за кросс-доменных ограничений. В обычной ситуации, вы бы организовали JSONP-сервис на mystaticfiles.com, и его действительно очень просто реализовать на PHP. Однако в нашем случае на сервере нет никакой логики, он не может исполнять скрипты (т.к. является CDN). Ниже приведено решение этой задачи на jQuery.
Шаг первый: Добавляем статический JSONP padding к своему JSON-файлу
Придумайте любое уникальное имя для функции, и добавьте ее в свой статический файл. Теперь файл выглядит вот так:
staticfunctionname123({"message":"Hello, world!"});
Шаг второй: jQuery должна знать имя функции
В обычной ситуации jQuery генерирует случайное имя для JSONP callback-функции, и отправляет запрос вида:
Но мы можем переопределить имя этого обработчика, с помощью опции jsonpCallback, и таким образом сделать так, чтобы это имя совпадало с именем функции в статическом JSON-файле.
http://mystaticfiles.com/hello.json?callback=jQuery2348327482374893232
$.ajax({ url: "http://mystaticfiles.com/hello.json", dataType: "jsonp", jsonpCallback: "staticfunctionname123", /* Уникальное имя функции */ success: function(data){ /* Обрабатываем данные */ alert(data.message) /* Выводим сообщение "Hello, world!" */ } });
Теперь jQuery будет создавать запрос вида:
Конечно, наш статический веб-сервер просто отбросит строку запроса, ведь у него нет серверной логики. Но в этот же момент в вашем приложении jQuery создаст функцию с именем staticfunctionname123, которая будет готова принимать ваши статические JSON-данные.
http://mystaticfiles/hello.json?callback=staticfunctionname123
Это перевод статьи Fetching static JSON files cross site with jQuery.