Межсайтовый (cross-domain) ajax запрос подразумевает получение данных с сайта site2.ru для сайта site1.ru. Обычные ajax запросы работать не будут в связи с политикой безопасности, но в jQuery начиная с версии 1.5 появилась возможность отправлять кросс доменные запросы на ajax и получать ответ в JSON.
При использовании JSON мы можем обращаться к любому домену но результат прийдет в виде json ответа и мы не как не сможем его обработать. JSONP предлагает передавать серверу имя функции и получать не голые данные, а обернутые в эту же функцию данные. Например при отправки запроса на http://site2.ru/data.json?callback=parseFunction мы отправляем название callback функции — parseFunction и получаем некий ответ parseFunction({'result': 2, 'error': false}), после чего jQuery вызовет функцию parseFunction для парсинга результата.
Рассмотрим все это детально на примере, сделаем запрос который будем отправлять с сайта site1.ru на site2.ru и получать некий ответ в json.
HTML
Создадим простую страничку и подключим библиотеку jQuery:
- <!DOCTYPE html>
 - <html>
 - <head>
 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 - <title>Cross-domain ajax с помощью jQuery — Frameworks.su</title>
 - <script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
 - <script src="/js/script.js" ></script>
 - </head>
 - <body>
 - <div class="text">Количество чего либо на сервере site2.ru — <span class="counter"><span></div>
 - </body>
 - </html>
 
PHP
Теперь мы нужно создать объект JSON с данными, в PHP. Предположим, что у нас на сервере site2.ru хранится некий счетчик, мы будем его запрашивать с сайта site1.ru и получать просто число (количество чего либо). Обратите внимание, что мы должны создать объект JSONP, вместо обычного объект JSON.
- // Создаем массив с данными которые хотим отправить json ответом
 - $data = array(
 - 'counter' => 5,
 - );
 - //Переводим масив в JSON
 - $json_data=json_encode($data);
 - // Выставляем кодировку и тип контента
 - header("Content-type: application/json; charset=utf-8");
 - //JSONP — делаем JSONP объект
 - echo $_GET['callback'] . ' (' . $json_data . ');';
 
Сохраните файлик как counter.php и залейте его на сервер site2.ru
JAVASCRIPT
Теперь нужно вызвать $.ajax в jQuery как описано ниже:
- $(document).ready(function () {
 - $.ajax({
 - type: "GET",
 - url: "http://site2.ru/counter.php?callback=?",
 - dataType: 'jsonp',
 - success: function (data){
 - $('.text .counter').html(data.counter);
 - }
 - });
 - });
 
Если не указывать функцию обратного вызова, а просто написать callback = ? — то название функции jQuery подставить автоматически, но также можно явно указать название функции, например callback=parseFunction.
Теперь запустите HTML файл на сайте site1.ru. Вы должны получить ответ от сервера с json данными. Использовать этот кросс-браузерный ajax можно также и для $.getJSON, $.ajax, $.post и $.get.
P.S. Не забудьте в примере заменить site2.ru — на название своего удаленного сервера, к которому делаете запрос.
Если у вас есть какие-либо вопросы или дополнения, пишите в комментариях ниже.
Скачать рабочий пример

 


