Кросс-доменный ajax

Опубликовано admin - чт, 06/07/2012 - 20:39
Изображение
XMLHttpRequest

Ранее кроссдоменный ajax запросы были невозможны, за исключением запросы в офрмате jsonp. Сегодня с появлением технологии CORS можно реализовать кроссдоменный ajax запрос, в том числе и с полной поддержкой объекта XMLHttpRequest.

Браузеры позволяют сделать это используя протокол Cross-Origin Resource Sharing или CORS

CORS предполагает обязательную отправку заголовка запроса к серверу.

Сервер должен вернуть следующий ответ:

Браузер осуществит проверку запроса и в случае успешной проверка вернёт объект для работы либо завершится неудачей.

CORS поддерживает запросы POST и GET. Другие типы поддерживаются не всеми браузерами.

Firefox 3.5+, Safari 4+ и Chrome поддерживают другие типы запросов, в то время как Ie 8 не поддерживает иные типы запросов.

Если нам, например, нужен запрос типа DELETE, нужно отправить запрос с указанием следующих заголовков:

А в ответ отправить следующие заголовки ответа:

«Предполётный запрос» к серверу позволяет делать последующие кроссбраузерные запросы в течении периода, указанное в заголовке ответа Access-Control-Max-Age.

Конечно, не забывайте, что на серверной стороне нужно проверять получаемые данные, иначе любой желающий сможет посылать запросы на Ваш сервер. Более подробная информация по вопросу кроссдоенных запросов содержится в неутвержденном стандарте W3C http://www.w3.org/TR/access-control/#introduction

Практический пример применения кроссдоменного ajax

Если мы находимся на домене http://hello-world.example и необходимо отправить запрос на домен http://example.com/hello, для этого используем следующий код:

В ответ сервер обязательно должен вернуть заголовок

Access-Control-Allow-Origin: http://hello-world.example

Сейчас вряд ли большинство использует этот стандартный код. Проще сделать это на jQUuery, так как в jQuery 1.5:

Для данного примера можно использовать следующий php код:

Все способы использования кроссдоменного ajax:

  • postMessage
  • JSONP
  • CORS
  • document.domain methods
  • window.name Transport
  • Server-side proxy
  • CRAZY IFRAME STUFF
  • flash

Теги

Комментарии

Оценка

1 votes with an average rating of 3.

На разработку сайта! Скидки до 20%!