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

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

jQuery Nivo Slider

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

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

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

  • Код
  • Чистый код
  1.Origin: http://www.slyweb.ru

        

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

  • Код
  • Чистый код
  1.Access-Control-Allow-Origin: http://www.slyweb.ru

        

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

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

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

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

  • Код
  • Чистый код
  1.Origin: http://www.slyweb.ru
  2.Access-Control-Request-Method: DELETE
  3.

        

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

  • Код
  • Чистый код
  1.Access-Control-Allow-Origin: http://www.slyweb.ru
  2.Access-Control-Max-Age: 3628800
  3.Access-Control-Allow-Methods: PUT, DELETE
  4.

        

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

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

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

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

  • Код
  • Чистый код
  1.var client = new XMLHttpRequest();
  2.client.open("GET", "http://example.com/hello")
  3.client.onreadystatechange = function() { /* do something */ }
  4.client.send()
  5.

        

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

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

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

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(function(){
  3.// запрос с использованием jQuery
  4.
  5. $.ajax({
  6. url: 'http://www.alchinov.com/ajax.php',
  7. success: function(data){
  8. console.log(data);
  9. },
10. error: function(data){
11. console.log(data);
12. },
13. type: "GET",
14. dataType: "text"
15. });
16.
17.// аналогичный запрос
18.
19.var client = new XMLHttpRequest();
20.client.open("GET", "http://www.alchinov.com/ajax.php")
21.client.onreadystatechange = function() { /* do something */ }
22.client.send();
23.
24.});
25.</script>

        

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

  • Код
  • Чистый код
  1.<?php
  2.
  3.header('Access-Control-Allow-Origin: http://test.ru');
  4.header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
  5.header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT');
  6.header('Cache-Control: no-cache, must-revalidate');
  7.header('Pragma: no-cache');
  8.header('Content-Type: text/html; charset=utf-8;');
  9.
10.echo 'hello world';
11.?>

        

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

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

Александр Ермаков