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

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

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

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

Origin: http://www.slyweb.ru

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

Access-Control-Allow-Origin: http://www.slyweb.ru

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

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

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

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

Access-Control-Allow-Origin: http://www.slyweb.ru Access-Control-Max-Age: 3628800 Access-Control-Allow-Methods: PUT, DELETE

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

Access-Control-Allow-Origin: http://www.slyweb.ru Access-Control-Max-Age: 3628800 Access-Control-Allow-Methods: PUT, 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://www.slyweb.ru var client = new XMLHttpRequest(); client.open("GET", "http://example.com/hello") client.onreadystatechange = function() { /* do something */ } client.send()

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

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

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

$(function(){ // запрос с использованием jQuery $.ajax({ url: 'http://www.alchinov.com/ajax.php', success: function(data){ console.log(data); }, error: function(data){ console.log(data); }, type: "GET", dataType: "text" }); // аналогичный запрос var client = new XMLHttpRequest(); client.open("GET", "http://www.alchinov.com/ajax.php") client.onreadystatechange = function() { /* do something */ } client.send(); });

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

<?php header('Access-Control-Allow-Origin: http://test.ru'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' ); header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT'); header('Cache-Control: no-cache, must-revalidate'); header('Pragma: no-cache'); header('Content-Type: text/html; charset=utf-8;'); echo 'hello world'; ?>

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

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