Кросс-доменный ajax-запрос статических JSON-файлов

JSON - JavaScript Object NotationПредположим, что на вашем веб-сервере лежит статический 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-функции, и отправляет запрос вида:

http://mystaticfiles.com/hello.json?callback=jQuery2348327482374893232
Но мы можем переопределить имя этого обработчика, с помощью опции jsonpCallback, и таким образом сделать так, чтобы это имя совпадало с именем функции в статическом JSON-файле.

$.ajax({
  url: "http://mystaticfiles.com/hello.json",
  dataType: "jsonp",
  jsonpCallback: "staticfunctionname123", /* Уникальное имя функции */
  success: function(data){
    /* Обрабатываем данные */
    alert(data.message) /* Выводим сообщение "Hello, world!" */ 
  }
});

Теперь jQuery будет создавать запрос вида:

http://mystaticfiles/hello.json?callback=staticfunctionname123
Конечно, наш статический веб-сервер просто отбросит строку запроса, ведь у него нет серверной логики. Но в этот же момент в вашем приложении jQuery создаст функцию с именем staticfunctionname123, которая будет готова принимать ваши статические JSON-данные.

Это перевод статьи Fetching static JSON files cross site with jQuery.

Похожие статьи

Leave a Reply

Your email address will not be published. Required fields are marked *