Обмен данными между доменами. Часть 2.

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/xhr-crossdomain.

Эта статья является продолжением статьи Обмен данными для документов с разных доменов и рассматривает новые способы обмена данными между доменами, которые, однако, уже поддерживаются основными современными браузерами.

HTML5: postMessage

В стандарте HTML5 предусмотрена отсылка javascript-сообщения из одного окна в другое при помощи специального вызова window.postMessage.

При этом окна могут быть с любых доменов, не важно. Например, один iframe с yandex.ru , а другой - с vaysapupkin.info. Чтобы получать кросс-доменные сообщения, принимающее окно регистрирует специальный обработчик onmessage, в котором, кроме всего прочего, может проверить, с какого домена пришло сообщение.

Пример

В примере ниже используется iframe с домена javascript.ru, исходник которого приведен ниже, и iframe с домена ilyakantor.ru.

Как вы можете видеть, сообщение прекрасно пересылается. Пример работает в браузерах Firefox 3.5, Opera 10, Safari 4.0/Chrome 3.0+, Internet Explorer 8.0.

Отправляющее окно

Исходник окна, отправляющего сообщение:

<html>
<body>
<iframe src="http://ilyakantor.ru/receive.html" id="iframe"></iframe>
<form id="form">
  <input type="text" id="msg" value="Ваше сообщение"/>
  <input type="submit"/>
</form>
<script>
var win = document.getElementById("iframe").contentWindow;

document.getElementById("form").onsubmit = function(){
	win.postMessage(
		document.getElementById("msg").value,
		"http://ilyakantor.ru" // target domain
	);
	return false
}
</script>
</body>
</html>

Как видите, для передачи сообщения достаточно вызвать метод postMessage(message, targetOrigin) принимающего окна.

message: Сообщение - javascript-объект
targetOrigin: Целевой домен, с которого должно быть окно, получающее сообщение. Если вы не хотите ограничить целевой домен - поставьте вместо него звездочку "*".

Принимающее окно

Исходный код принимающего окна (в ифрейме):

<html>
<body>
<b>iframe с домена http://ilyakantor.ru</b>
<div id="test">Пришли мне сообщение!</div>
<script>
function listener(event){
	if ( event.origin !== "http://javascript.ru" )
		return;

	document.getElementById("test").innerHTML = event.origin + " прислал: " + event.data;
}

if (window.addEventListener){
	window.addEventListener("message", listener,false);
} else {
	window.attachEvent("onmessage", listener);
}


</script>

</body>
</html>

Обработчик события onmessage проверяет исходный домен, который находится в свойстве event.origin, и, если все нормально, выводит на экран сообщение event.data.

Все прозрачно и удобно.

Реализация postMessage браузерами использует внутренний механизм передачи сообщений, поэтому можно передавать любые объекты, а сам факт передачи никак не отслеживается снифферами пакетов.

Интерфейс поддерживается основными современными браузерами.

XMLHTTPRequest 2 / XDomainRequest

Уже давно в W3C вызревает второй стандарт XMLHTTPRequest 2. А пока суть да дело - Firefox 3.5, Safari 4/Chrome 3 и IE8 уже реализовали ряд фич.

Например, кросс-доменные запросы.

Пример

Следующий пример отправляет запрос с текущего домена (javascript.ru) на домен ilyakantor.ru.

Он не работает в старых браузерах и... в Opera.

Кросс-доменный запрос отсылается точно так же, как и обычный XMLHttpRequest, но браузер посылает на сервер дополнительный заголовок Origin.

Сервер в ответе указывает заголовком Access-Control-Allow-Origin, для каких доменов доступны данные. Ответ сервера:

Если вдруг домен, на который приходит ответ, не совпадает с Access-Control-Allow-Origin (можно указать звездочку "*" для любого домена), то браузер блокирует операцию из соображений безопасности.

Реализация

В то время как Firefox/Safari расширили обычный объект XMLHTTPRequest, специалисты Microsoft завели для кросс-доменных запросов новый объект XDomainRequest.

Оба объекта имеют весьма схожие интерфейсы, но решение Firefox/Safari более полно реализует XMLHTTPRequest 2. В частности, поддерживаются другие методы, кроме GET/POST, работа с Cookie/HTTP Auth и расширены средства контроля доступа.

Исходный код отсылающего запрос ифрейма:

<html>
<head>

<script type="text/javascript">
    var url = 'http://ilyakantor.ru/xdr/receive.php';

    function doCallOtherDomain(){
        var XHR = window.XDomainRequest || window.XMLHttpRequest
        var xhr = new XHR();

        xhr.open('GET', url, true);

        // замена onreadystatechange
        xhr.onload = function() {
            document.getElementById('response').innerHTML = xhr.responseText
        }

        xhr.onerror = function() {
            alert("Error")
        }

        xhr.send()
    }

    function callOtherDomain() {
        try {
            doCallOtherDomain()
        } catch (e) {
            alert("В этом браузере данная фича не поддерживается.")
        }
    }

    </script>
</head>
<body>

<div id="response"></div>
    <input type="button" value="Нажмите для запроса к другому домену" onclick="callOtherDomain()" />

</body>
</html>

Принимающий код:

<?php
// можно ограничить домен, для которого доступен ответ
// header('Access-Control-Allow-Origin: http://javascript.ru');

header('Access-Control-Allow-Origin: *');
?>
http://ilyakantor.ru Ха-ха! Все получилось!

Как видно из примера, в обоих реализациях можно отказаться от onreadystatechange и использовать события onload/onerror/onabort.

Кроме того, начиная с Firefox 3.5/Safari 4/IE8 поддерживается событие onprogress, предназначенное для реализации progress bar.

Конечно, можно написать кросс-браузерную обертку, которая будет прозрачно отправлять запросы, используя эти новые методы в дополнение к уже существующим.

Дополнительные материалы

Мы разобрали основы новых способов кросс-доменной коммуникации. При практической реализации вам могут понадобиться детали.

Могу порекомендовать следующие статьи.

версия для печати

Автор: Гость (не зарегистрирован), дата: 12 ноября, 2009 - 13:45

Обмен данными между доменами. Часть 2.

Unveiling the Y2K Resurgence: A Fashion Renaissance

Embracing Nostalgia with Y2K Fashion Trends

Y2K Icons and Influencers: Paving the Way for Modern Statements

Styling Tips for a Modern Y2K Look

Y2K Fashion: More Than a Trend, a Lifestyle

Y2K Fashion Blog: Your Gateway to the Nostalgic Future

Embracing Y2K—Where Nostalgia Meets Contemporary Chic

Отправить комментарий

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное