Статьи

Javascript: междоменный API для вашего сайта

Ноябрь 20, 2018

Javascript междоменный API для вашего сайта

Добро пожаловать наши читатели. Сегодня я хотел бы дать небольшой, но очень важный урок, где мы создадим свой собственный междоменный javascript api. Я думаю, что многие из вас уже пытались реализовать нечто подобное, и, возможно, вы столкнулись с невозможностью нормальной работы с функциями API на сторонних доменах. По сути, вы просто не можете делать обычные AJAX-запросы к удаленному серверу и получать ответ в своей функции javascript. И все из-за правил безопасности. Но сегодня я покажу вам, как решить эту проблему.

Если вы готовы — давайте начнем кодировать!

скачать в упаковке

Шаг 1. PHP

Как первое, мы должны подготовить нашу серверную часть:

<?php

// set possibility to send response to any domain
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); 

// accept POST params
$sAction = $_POST['action'];
$iParam1 = (int)$_POST['param1'];
$iParam2 = (int)$_POST['param2'];

// perform calculation
$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;
}

// prepare results array
$aResult = array(
    'result' => $iResult
);

// generate result
header('Content-type: application/json');
echo json_encode($aResult);

Следует обратить внимание на первую строку использования настраиваемого заголовка с «Access-Control-Allow-Origin». Это позволяет отправить ответ на любой сервер (имеется в виду — любой домен). Если вы хотите ограничить его использование в определенном домене — вы можете сделать это здесь. После — мы делаем простые действия, в зависимости от действия $ _POST мы выполняем различные действия с полученными параметрами. Как самый простой пример — я решил реализовать самые простые математические действия, такие как суммирование, вычитание, умножение и деление. В конце концов — мы возвращаем наш результат в формате JSON. Теперь пришло время подготовить библиотеку JS нашего сервера:

Шаг 2. JavaScript

api.js

 

function do_sum(param1, param2, cfunction) {

    // send ajax response to server
    $.ajax({
        type: 'POST',
        url: 'http://www.script-tutorials.com/demos/301/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=sum¶m1=' + param1 + '¶m2=' + param2,
        success: function(json) {
            // and evoke client's function
            cfunction(json);
        }
    });
}

function do_sub(param1, param2, cfunction) {

    // send ajax response to server
    $.ajax({
        type: 'POST',
        url: 'http://www.script-tutorials.com/demos/301/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=sub¶m1=' + param1 + '¶m2=' + param2,
        success: function(json) {
            // and evoke client's function
            cfunction(json);
        }
    });
}

function do_mul(param1, param2, cfunction) {

    // send ajax response to server
    $.ajax({
        type: 'POST',
        url: 'http://www.script-tutorials.com/demos/301/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=mul¶m1=' + param1 + '¶m2=' + param2,
        success: function(json) {
            // and evoke client's function
            cfunction(json);
        }
    });
}

function do_div(param1, param2, cfunction) {

    // send ajax response to server
    $.ajax({
        type: 'POST',
        url: 'http://www.script-tutorials.com/demos/301/api.php',
        crossDomain: true,
        dataType: 'json',
        data: 'action=div¶m1=' + param1 + '¶m2=' + param2,
        success: function(json) {
            // and evoke client's function
            cfunction(json);
        }
    });
}

Это своего рода обертка для нашей серверной части. Я подготовил для нас 4 функции JavaScript: do_sum, do_sub, do_mul и do_div. Каждая функция для каждой функции нашего сервера. Вообще говоря, что мы должны делать для правильных запросов: во-первых, установить необходимый URL-адрес файла API сервера (в нашем случае это: http://www.script-tutorials.com/demos/301/api.php), во-вторых , мы должны установить ‘crossDomain’ в true, и, наконец, мы должны установить dataType в ‘json’ (в случае, если мы хотим получить ответ json). И наконец, обратите внимание, что третьим параметром каждой функции является «функция». Это любая пользовательская функция клиента, и мы должны передать ответ сервера этой функции, когда мы получим этот ответ от нашего сервера.

Шаг 3. Использование (на стороне клиента)

Чтобы использовать функции нашего API, мы можем подготовить пример:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://www.script-tutorials.com/demos/301/api.js"></script>

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

    // execute method 1 (sum) by server
    var param1 = 5;
    var param2 = 10;
    do_sum(param1, param2, function(data) {
        $('#results').append(param1 + ' + ' + param2 + ' = ' + data.result + '<br />');

        // execute method 2 (sub) by server
        param1 = 25;
        param2 = 15;
        do_sub(param1, param2, function(data) {
            $('#results').append(param1 + ' - ' + param2 + ' = ' + data.result + '<br />');

            // execute method 3 (mul) by server
            param1 = 8;
            param2 = 5;
            do_mul(param1, param2, function(data) {
                $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '<br />');

                // execute method 4 (sub) by server
                param1 = 33;
                param2 = 11;
                do_sub(param1, param2, function(data) {
                    $('#results').append(param1 + ' / ' + param2 + ' = ' + data.result + '<br />');
                });
            });

        });
    });
});
</script>

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

В этом примере мы можем видеть, как я использую функции javascript нашего сервера. Посмотрите на один пример еще раз

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

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

скачать в архиве

Вывод

Я надеюсь, что в сегодняшнем коде все чисто. Если у вас есть какие-либо предложения относительно дальнейших идей для статей — вы можете поделиться ими с нами. Удачи в работе!

34
Share: