Pull to refresh

Кросс-доменные коммуникации с помощью JSONP

Reading time 3 min
Views 44K

Введение



Асинхронный JavaScript и XML (AJAX) ключевая технология нового поколения сайтов, причисляемых к WEB 2.0. AJAX позволяет обрабатывать данные без назойливой перезагрузки страниц. Данные обрабатываются с использованием объекта XMLHttpREquest, который позволяет клиентскому JavaScript создавать HTTP подключения к удаленным серверам. AJAX используется во многих мешапах, которые интегрируют контент из нескольких разных ичточников.

Однако кросс-доменные соединения запрещены – такова политика браузеров. Если вы попробуете отправить запрос на другой домен, то получите ошибку безопасности. Вы конечно можете избежать этих ошибок, если будете посылать запросы только к своему домену, но что же это будет за Web-приложение, если оно никуда дальше Вашего сервера не может сунуться. Что если Вам все-таки нужно получать данные от других доменов?



Начальные ограничения



Начальные ограничения заключаются в том, что скрипт загруженый с одного домена не может производить какие-либо манипуляции с другим доменом. Домен, запрашиваемого URL, должен бытаким же как и домен текущей страницы. Браузер изолирует контент из разных источников для их защиты от изменения. Эта «политика» браузеров очень стара и корнями уходит к Netscape Navigator 2.0.

Первое, что приходит в голову для преодоления этого ограничения, это использовать страницу, которая обращается к серверу в своем домене и сервер в своем домене, который являет своеобразным прокси к необходимым сторонним серверам. Но данный подход плохо масштабируется. Другой вариант – использовать фреймы для создания на странице областей, в которые будет загружаться сторонний контент средствами GET запроса. Но после загрузки во фрейм этот контент так же станет объектом описанного выше ограничения.

Намного более много обещающим путем решения этой роблемы является метод динамической вставки элемента script в страницу. Этот скрипт загружается как раз с другого домена и содержит в себе все нужные данные.

JSON и JSONP



JSON – это легковесный формат (похожий на xml) дял обмена данными между браузером и сервером. JSON представляет собой текстовыю репрезентацию объектов JavaScript. Например, у Вас есть объект с двумя атрибутами: символ и цена. Можно так определить это в JavaScript.

var ticker = {symbol: 'IBM', price: 91.42};


А это как раз JSON представление:

{symbol: 'IBM', price: 91.42}


Вот пример простой JavaScript функции, которая показывает цену при вызове.

function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}


Вы можете вызывать ее используя JSON представление в качестве параметра.

showPrice({symbol: 'IBM', price: 91.42}); // Выводит: Symbol: IBM, Price: 91.42


А теперь вы уже готовы соединить оба этих примера в одной странице.

function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
showPrice({symbol: 'IBM', price: 91.42});


После загрузки страницы Вы увидите следующее сообщение:

image

До сих пор в этой статье я говорил только о том, как вызывать функцию со статичным JSON параметром. Номожно динамически «оборачивать» JSON в вызов функции, вы можете вызывать Ваши функции с динамическими данными – эта техника называется динамическая вставка JavaScript (dynamic JavaScript insertion). Для того чтобы понять как она работает запишем следующую строку в отдельный файл ticker.js.

showPrice({symbol: 'IBM', price: 91.42});


Теперь поменяем код нашей страницы:

// Эта функция просто вызывает окно с данными из JSON
function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
var url = “ticker.js”; // Это адрес скрипта, который мы загружаем.

//А этим кодом мы динамически вставляем JavaSCript.
var script = document.createElement('script');
script.setAttribute('src', url);

// load the script
document.getElementsByTagName('head')[0].appendChild(script); 


Ничего сложного. В этом римере после загрузки страницы срабатывает вторая часть скрипта, которая динамически подгружает файл ticker.js. Этот файл в свою очередь содержит только вызов функции с JSON данными.
А теперь мы подошли к кросс-доменным коммуникациям.
Изменим в последнем скрипте только одну строку.

var url = "http://some_another_domain.com/script_generator.php?param1=data1&param2=data2"; // Это адрес скрипта, который мы загружаем.


Фактически мы можем загрузить этот скрипт откуда угодно. С любого домена. И не только загрузить, но и передать перед этим параметры методом GET. Сам же загружаемый скрипт может генерироваться любым способом. Нативная поддержка JSON есть у большинства языков.
Tags:
Hubs:
+4
Comments 22
Comments Comments 22

Articles