Все ленты — последние статьи

*** Cross-domain ajax с помощью jQuery Принимаем данные с другого сервера JSON


 
 

Межсайтовый (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:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Cross-domain ajax с помощью jQuery — Frameworks.su</title>
  6. <script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
  7. <script src="/js/script.js" ></script>
  8. </head>
  9. <body>
  10. <div class="text">Количество чего либо на сервере site2.ru — <span class="counter"><span></div>
  11. </body>
  12. </html>

PHP

Теперь мы нужно создать объект JSON с данными, в PHP. Предположим, что у нас на сервере site2.ru хранится некий счетчик, мы будем его запрашивать с сайта site1.ru и получать просто число (количество чего либо). Обратите внимание, что мы должны создать объект JSONP, вместо обычного объект JSON.

  1. // Создаем массив с данными которые хотим отправить json ответом
  2. $data = array(
  3. 'counter' => 5,
  4. );
  5.  
  6. //Переводим масив в JSON
  7. $json_data=json_encode($data);
  8.  
  9. // Выставляем кодировку и тип контента
  10. header("Content-type: application/json; charset=utf-8");
  11.  
  12. //JSONP — делаем JSONP объект
  13. echo $_GET['callback'] . ' (' . $json_data . ');';

Сохраните файлик как counter.php и залейте его на сервер site2.ru

JAVASCRIPT

Теперь нужно вызвать $.ajax в jQuery как описано ниже:

  1. $(document).ready(function () {
  2. $.ajax({
  3. type: "GET",
  4. url: "http://site2.ru/counter.php?callback=?",
  5. dataType: 'jsonp',
  6. success: function (data){
  7. $('.text .counter').html(data.counter);
  8. }
  9. });
  10. });

Если не указывать функцию обратного вызова, а просто написать callback = ? — то название функции jQuery подставить автоматически, но также можно явно указать название функции, например callback=parseFunction.

Теперь запустите HTML файл на сайте site1.ru. Вы должны получить ответ от сервера с json данными. Использовать этот кросс-браузерный ajax можно также и для $.getJSON, $.ajax, $.post и $.get.

P.S. Не забудьте в примере заменить site2.ru — на название своего удаленного сервера, к которому делаете запрос.

Если у вас есть какие-либо вопросы или дополнения, пишите в комментариях ниже.

Скачать рабочий пример