22 декабря 2015
7 октября 2009
8
Кроссдоменный AJAX
Всем привет!
Сегодня мы поговорим про AJAX. Напомню, что в прошлый раз мы рассматривали пример хорошего AJAX-а. Там мы показали, как нужно делать, чтобы пользователь не чувствовал себе некомфортно.
В этой статье я хочу рассказать про кроссдоменный AJAX. Что в нем особенного? Дело в том, что объект JavaScript XmlHttpRequest, который во всех популярных фреймворках реализует AJAX, не поддерживает кроссдоменные запросы по соображениям безопасности. Но иногда же очень нужно через JS запросить какую-нибудь страничку с другого сайта, да? Варианты есть, так что читаем дальше и выбирает то, что нужно именно для вашей задачи.
Задача
Допустим, вам нужно с помощью JS запросить какой-то файл с другого сервера. Стандартными методами AJAX это сделать нельзя, так как объект XmlHttpRequest работает только в пределах одного домена.
Сразу оговорюсь, что для решения этой задачи необходимо как минимум, чтобы вы как разработчик имели доступ к файлам на обоих серверах (с которого идет запрос и тот, где нужный файл), так как отдаваемые с удаленного сервера файлы должны быть в особом (для каждого отдельного решения) формате.
Решения 1: использование серверных скриптов у себя как прокси
Самы простой вариант — использовать собственный сервер как прокси. То есть вы из своего js-приложения обращаетесь к скриптам на этом же сервере и указываете ему адрес и формат возвращаемой информации (JSON, XML, HTML). Это, конечно, не AJAX в полном смысле этого слова, то тоже выход.
Как пример, могу предложить решение с jQuery и PHP. Но это как-то скучно.
Решение 2: Flash как посредник
Этот способ уже более интересен. Flash может делать кроссдоменные запросы, при условии, если сам сервер позволяет флешу к нему обращаться. Для этого существует, опять же, своя политика безопасности, но она, в отличии от XmlHttpRequest-ой довольно гибкая — для разрешения запроса к серверу в его корне необходимо создать файл crossdomain.xml, в котором указать, какие сервера имеют право доступа. Простейший пример такого файла:
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>Ну а далее Flash-скрипт получает запрос от JS, делает кроссдоменный запрос, получает данные и отдает их обратно в JS-скрипт. А вот вам готовый скрипт и его модернизация, которые все это реализует.
Решение 3: создание тега <script>
Это, кстати, один из способов AJAX, который не нашел широкого применения ввиду неудобства работы с ним. Ну вы же знаете: создаем новый тег, значение его аттрибута src — адрес файла, который нам нужен. Затем этот созданный тег добавляем в <head> или перед </body>. В общем возни много. Да плюс еще и формат подключаемого таким образом файла должен быть text/javascript. Кароче проще уж через XmlHttpRequest.
Но в случае кроссдоменных запросов многие вспоминают про этот способ, ведь подключать файлы можно с разных серверов. В итоге получился еще один вариант.
Решение 4: создание тега <link>
Это, пожалуй, самый необычный способ из увиденных мной. Принцип работы тот же, что и у предыдущего способа, только подключаемые файлы должны быть формата CSS. Вот тут у вас должен быть резонный вопрос: «Мне же данные нужны, нафига мне стили-то?». На этом этапе начинается самое интересное ;-) Смотрим пример возвращаемого файла:
#c0 { background: url(data:,Hello%20World!); }
#c1 { background: url(data:,I’m%20text%20encoded%20in%20CSS!); }
#c2 { background: url(data:,I%20like%20arts%20and%20crafts.); }Ваши данные содержаться внутри dara:uri, неожиданный поворот, да? Вроде и CSS правильный, и данные есть.
Такой способ работы использует скриптик CSSHttpRequest или, как его еще называют — AJACSS.
Решение 5: использование XhrIframeProxy
Это смесь из XmlHttpRequest и <iframe>. Способ основан на том, что ифреймы с разных доменов могут общаться друг с другом по средством изменения хэша из их адресов (хеш — это то, что идет после # в адресе). Этот способ отлично описан на сайте JavaScript.ru, так что не буду заниматься рерайтом.
Заключение
В статье мы рассмотрели 5 способов делать кроссдоменные запросы в JavaScript. Какой из них вам больше подходит — решать вам. Мне лично понравился вариант с флешом, хотя подключение CSS-файлов тоже довольно интересно. Буду рад услышать ваши мнения в комментариях. Пока!
Комментарии — 8
