Кроссдоменный AJAX
Самое простой способ — использование объекта 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 чтобы получить сообщение. Пример:
Ф-ция listener получается один параметр – объект event, по свойству origin которого можно узнать домен, с которого отправляли данные.
Работает postMessage в FF3+, IE8+ , Chrome, Safari 5, Opera10+. Стоит отметить что в IE8 нельзя общаться через окна/табы.