Снова привет всем!
Хочу представить вам новую свою наработку, собственно обмен данными между разными доменами.
Ни для кого не секрет что давно существуют методы для обмена данными между разными доменами. Один из этих вариантов является официальным и описывается в спецификациях
XMLHttpRequest level 2 где есть возможность обмениваться данными между разными доменами, при этом сайт на другом домене не обязательно должен быть у вас во фрейме. Для этого удаленный сервер должен отослать заголовок к примеру "
Access-Control-Allow-Origin: *". Который разрешит браузеру взять данные и отдать их вашему скрипту.
Для ИЕ8-9 есть специальный метод для обмена данными между разными доменами называется он
XDomainRequest, к сожалению майкрософт не особо заботится о разработчиках и всегда борется с вирусами в своих наработках. От того их метод имеет массу ограничений, хотя и не лишен возможностью обмениваться данными, но заставляет на стороне сервера, немного попотеть. Например отправка POST данных с помощью их метода, заставляет на стороне сервера, пришедшие RAW-данные обрабатывать самостоятельно, это ограничение вызвано тем что при запросе XDomainRequest не отправляет серверу заголовков о типе данных, такие как:
Content-Type: application/x-www-form-urlencoded
или
Content-Type: multipart/form-data
от того сервер просто не знает что делать с данными, и просто их складирует в переменную:
$HTTP_RAW_POST_DATA
- это если вы юзаете PHP.
Не смотря на это ограничение, многие разработчики не теряют оптимизма творить. И продолжают работать с тем что им дают.
Вот для примера код который работает во всех современных браузерах и включая ИЕ8+
var xhr = ( window.XMLHttpRequest && "withCredentials" in (new XMLHttpRequest) ) ?
new XMLHttpRequest : window.XDomainRequest ? new XDomainRequest : null;
if ( xhr ) {
xhr.open( "GET", "http://history.spb-piksel.ru/", false );
xhr.onload = function() {
alert( this.responseText ); // тут увидите HTML-code моего сайта
}
xhr.onerror = function() {
alert( "Не удалось сделать запрос" );
}
xhr.send( null );
} else {
alert( "Извините но ваш браузер не поддерживает Кроссдоменные запросы." );
}
Я решил сделать возможность что бы данный код продолжал работать и в старых браузерах, для этого я начал для ИЕ7 писать метод XDomainRequest, после того как написал. Решил его проверить и в старых браузерах, таких как Opera, FireFox которые еще не поддерживали
XMLHttpRequest level 2. Как оказалось, моя разработка так же работает и в них.
Теперь подключаем мою библиотеку:
<script type="text/javascript" src="http://code.spb-piksel.ru/light.core.class.min.js"></script>
<script type="text/javascript" src="http://code.spb-piksel.ru/XDomainRequest.min.js"></script>
<script type="text/javascript">
// а вот и наш код:
var xhr = ( window.XMLHttpRequest && "withCredentials" in (new XMLHttpRequest) ) ?
new XMLHttpRequest : window.XDomainRequest ? new XDomainRequest : null;
if ( xhr ) {
xhr.open( "GET", "http://history.spb-piksel.ru/", false );
xhr.onload = function() {
alert( this.responseText ); // тут увидите HTML-code моего сайта
}
xhr.onerror = function() {
alert( "Не удалось сделать запрос" );
}
xhr.send( null );
} else {
alert( "Извините но ваш браузер не поддерживает Кроссдоменные запросы." );
}
</script>
Теперь этот код работает во всех браузерах...
А теперь самое главное, на стороне удаленного сервера так же нужно внести изменения. Что бы метод полноценно работал. Для обычного стандартного XMLHttpRequest и для XDomainRequest сервер должен отправить заголовок PHP:
<?php
/*
* Разрешим получать данные через XMLHttpRequest, XDomainRequest (JavaScript)
*/
header( "Access-Control-Allow-Origin: *" );
?>
для моего метода нужно добавить дополнительный код, который нужно написать сразу же после того как вы отправите все заголовки браузеру:
<?php
/*
* Разрешим получать данные через XMLHttpRequest, XDomainRequest (JavaScript)
*/
header( "Access-Control-Allow-Origin: *" );
/*
* Разрешим получать данные через shim-XDomainRequest (JavaScript)
*/
if (
!empty( $_GET['Access-Control-Allow-Origin'] ) &&
preg_match( "/^https?:\/\/[\S]/i", $_GET['Access-Control-Allow-Origin'] )
) {
echo "<script>".(isset($_SERVER['HTTP_REFERER'])&&$_GET['Access-Control-Allow-Origin']===$_SERVER['HTTP_REFERER']?1:
"window.name==='".$_GET['Access-Control-Allow-Origin']."'")."&&(window.onload=function(){window.name=document.".
"documentElement.innerHTML;window.history.back();})</script><plaintext>>";
unset( $_GET['Access-Control-Allow-Origin'] );
}
// тут уже пишите остальной ваш PHP код, обработчики POST и т.д.
?>
Как видите, в браузер происходит вывод дополнительного скрипта, в самом начале кода, который копирует в переменную window.name все данные, что бы потом их оттуда прочитать.
Вот собственно и вся наработка. С большим удовольствием выслушаю вашу критику и предложения)))
Всем спасибо!
Скачать скрипты:
http://code.spb-piksel.ru/light.core.class.js или
https://github.com/devote/jsClasses
http://code.spb-piksel.ru/XDomainRequest.js на гитхаб пока не выкладывал
