Frameworks.suFrameworks.su Шпаргалка вебмастера

  • Главная
  • Framework Kohana
  • PHP
  • Javascript
  • CSS
  • Контакты
Главная / Javascript / Cross-domain ajax с помощью jQuery

Cross-domain ajax с помощью jQuery

24.04.2015 3 17815

Cross-domain ajax с помощью jQuery

Межсайтовый (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 - на название своего удаленного сервера, к которому делаете запрос.

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

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

Теги:
  • jQuery
  • Пример

Комментарии

  1. Djo
    Djo
    15.09.2017 08:29

    Вероятней всего тип контента в этом случаее должен быть application/javascript

    Ответить
  2. Роман
    Роман
    16.12.2016 08:32

    А как передать данные обратно?

    Ответить
    • Администратор
      Администратор
      16.12.2016 11:10

      Если вы хотите передать входящие данные обратно js то укажите их в файле php в переменную $data

      Ответить

    Оставить комментарий Отмена

    *

    *

    *

    *

    Категории

    • PHP
      • Framework Kohana
    • Javascript
    • CSS
    • Администрирование

    Теги

    Framework Kohana Пример jQuery Уроки CRON Установка и настройка Backup CSS3 Валидация API Bash Cache Captcha i18n Linux

    Авторизация

    • Забыли пароль?
    • Регистрация

    Популярные статьи

    • Находим расстояние до ближайших станций метро

      Находим расстояние до ближайших станций метро

      17.02.2017 100168
    • Регистрация и авторизация пользователей. Модуль Auth в Kohana 3.3.x

      Регистрация и авторизация пользователей. Модуль Auth в Kohana 3.3.x

      02.07.2014 40935
    • Собственная система лайков на PHP и JQuery

      Собственная система лайков на PHP и JQuery

      06.04.2015 29765
    • Javascript — сумма прописью

      Javascript — сумма прописью

      07.07.2014 20098
    • Cross-domain ajax с помощью jQuery

      Cross-domain ajax с помощью jQuery

      24.04.2015 17816
    Copyright © 2014-2023 Frameworks.su. Все права защищены.