Home > Программирование > Кроссдоменный AJAX

Кроссдоменный AJAX

September 24th, 2011 Leave a comment Go to comments

Самое простой способ — использование объекта XMLHTTPRequest в современных браузерах(Chrome 6+, Firefox 3.5+, Internet Explorer 8+, Safari 4+) и наличие у сервера заголовка Access-Control-Allow-Origin: *

Все бы хорошо, вот только заметили ли вы в списке Оперу? Нет, она еще не поддерживает XMLHTTPRequest 2. Да и то что IE не поддерживает в 7-ой версии может оказаться для кого-то критичным. Ниже последуют другие способы кроссдоменного ajax’a.

Проксирование

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

 JSONP

JSON Padding или так называемый “JSON с подкладкой” — способ с JSON при котором имя калбэка указывается в аргументах запроса. При этом запрос подгружается через тег script, а в ответе json-объект должен быть заключен в вызов того самого переданного калбэка. Пример:

запрос http://example.com/?q=somevalue&callback=mycallback
ответ  mycallback({"foo": "bar", "a": "x"})

Из минусов возможность использовать только GET-запрос.

Политика безопасности также позволяет загружать css’ники с любых доменов, поэтому аналогично JSONP появился метод CSSHttpRequest. Особой выгоды в нем не вижу, кому интересно могут глянуть на странице проекта.

XHRIframeProxy

Метод основан на том, что ифреймы находясь на разных доменах могут общаться через url hash.

Для использования необходимо 2 ифрейма, первый – клиентский, с тем же url, что и основное окно. Второй – внутри клиентского, с серверным url. Данные отправляем через форму с указанным target=имя фрейма. Затем запускаем ф-цию с интервалом в 1 секунду и ждем пока хэш страницы не изменится – тогда мы получили ответ от сервера. Идентификатор изменяется серверным скриптом через self.parent.location = ‘…’

Стоит иметь ввиду, что в Internet Explorer есть ограничение на кол-во символов в url и составляет  2048 символов. Так что при передачи большого кол-ва данных придется делить на различные запросы. Кроме того необходимо в серверный фрейм передавать url основного окна – серверный фрейм его узнать не сможет.

При использовании https  этот способ корректно работать не будет.

postMessage (HTML 5)

В спецификации HTML 5 был введен метод

otherWindow.postMessage(message, targetOrigin);

в котором otherWindow – ссылка на другой объект window (например ифрейм на этой странице), message – данные которые должны послать, targetOrigin – домен на которой должны отослать данные, либо “*” – для всех доменов. targetOrigin должен соответствовать url объекта window на который посылаются данные.

В окне-приемнике должен быть зарегистрирован обработчик onmessage чтобы получить сообщение. Пример:

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

Ф-ция listener получается один параметр – объект event, по свойству origin которого можно узнать домен, с которого отправляли данные.

Работает postMessage в FF3+, IE8+ , Chrome, Safari 5, Opera10+. Стоит отметить что в IE8 нельзя общаться через окна/табы.

  1. No comments yet.
  1. No trackbacks yet.