В данном уроке мы сделаем собственный кросс-доменный API. Может быть вы уже пробовали делать что-то подобное, и, вероятно, сталкивались с невозможностью нормальной работы функций API со сторонних доменов. В основном не получается сделать нормальный запрос AJAX к удаленному серверу и получить ответ в JavaScript функциях. А причина заключается в настройках безопасности. Мы покажем, как решать подобные проблемы

Шаг 1. PHP

Первым делом приготовим наш сервер.

api.php

<?php

// Устанавливаем возможность отправлять ответ для любого домена
header('Access-Control-Allow-Origin: *');

if (version_compare(phpversion(), '5.3.0', '>=')  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

// Получаем параметры POST
$sAction = $_POST['action'];
$iParam1 = (int)$_POST['param1'];
$iParam2 = (int)$_POST['param2'];

// Выполняем вычисления
$iResult = 0;
switch ($sAction) {
    case 'sum':
        $iResult = $iParam1 + $iParam2;
        break;
    case 'sub':
        $iResult = $iParam1 - $iParam2;
        break;
    case 'mul':
        $iResult = $iParam1 * $iParam2;
        break;
    case 'div':
        $iResult = $iParam1 / $iParam2;
        break;
}

// Подготавливаем массив результатов
$aResult = array(
    'result' => $iResult
);

// Генерируем результат
header('Content-type: application/json');
echo json_encode($aResult);

Следует уделить внимание первой строке, в которой используется установка для заголовка ‘Access-Control-Allow-Origin’. Так разрешается отправка ответа любому серверу (что означает — любому домену). Если вы хотите ограничить область использования определенным доменом, делайте это в данной строке. Затем мы выполняем простые операции в зависимости от полученных параметров $_POST. В нашем примере реализуются простые математические операции. Мы возвращаем результат в формате JSON. Теперь время подготовить библиотеку JavaScript.

Шаг 2. JavaScript

api.js

function do_sum(param1, param2, cfunction) {

    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=sum&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}

function do_sub(param1, param2, cfunction) {

    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=sub&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}

function do_mul(param1, param2, cfunction) {

    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=mul&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}

function do_div(param1, param2, cfunction) {

    // Отправляем AJAX ответ на сервер
    $.ajax({
        type: 'POST',
        url: 'http://ваш_сайт/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=div&param1=' + param1 + '&param2=' + param2,
        success: function(json) {
            // и вызываем функцию клиента
            cfunction(json);
        }
    });
}

Это обертка для нашей серверной части. В примере подготовлены 4 функции JavaScript: do_sum, do_sub, do_mul и do_div. Для каждой серверной операции. Обобщая, можно сказать, что нужно для правильного запроса: первое, установить необходимы URL для файла серверной части API (например: http://ваш_сайт/api.php); второе, установить для ‘crossDomain’ значение true; и последнее, установить тип данных dataType (для нашего примера ‘json’). Обратите внимание, что третий параметр каждой нашей функции — ‘cfunction’. Это пользовательская функция и нам следует передавать полученный ответ сервера в данную функцию.

Шаг 3. Использование

Небольшой пример использования подобного API.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://ваш_сервер/api.js"></script>
</head>
<body>

<script type="text/javascript">
$(document).ready(function() {

    // Выполняем метод 1 (сумма) на сервере
    var param1 = 5;
    var param2 = 10;
    do_sum(param1, param2, function(data) {
        $('#results').append(param1 + ' + ' + param2 + ' = ' + data.result + '<br />');

        // Выполняем метод  2 (вычитание) на сервере
        param1 = 25;
        param2 = 15;
        do_sub(param1, param2, function(data) {
            $('#results').append(param1 + ' - ' + param2 + ' = ' + data.result + '<br />');

            // Выполняем метод  3 (умножение) на сервере
            param1 = 8;
            param2 = 5;
            do_mul(param1, param2, function(data) {
                $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '<br />');

                // Выполняем метод  4 (деление) на сервере
                param1 = 33;
                param2 = 11;
                do_div(param1, param2, function(data) {
                    $('#results').append(param1 + ' / ' + param2 + ' = ' + data.result + '<br />');
                });
            });

        });
    });

});
</script>

<div id="results"></div>
</body>
</html>

Здесь показано, как можно использовать функции API. Вот единичный пример:

var param1 = 5;
var param2 = 10;
do_sum(param1, param2, function(data) {
    $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '<br />');
});

Мы просто передаем 3 параметра в нашу функцию: 2 цифры и одну функцию. Ответ сервера будет получать данная функция. И можно будет выводить результат где-нибудь (как пример используется элемент #results).

Источник:   Исходник:

Другие темы: