Кросс-доменный Javascript-API для вашего веб-сайта

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


Если вы готовы, давайте приступать к разработке кода!

Этап 1. PHP

Сначала нам нужно подготовить всё на серверной стороне:

api.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». Он позволяет нам отправлять ответ на любой сервер (имеется в виду любой домен). Если вы хотите запретить использование API на определенном домене, то сделать это можно здесь. Далее мы совершаем простые действия, в зависимости от действия $_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&param1=' + param1 + '&param2=' + 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&param1=' + param1 + '&param2=' + 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&param1=' + param1 + '&param2=' + 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&param1=' + param1 + '&param2=' + 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-ответ). Наконец, обратите внимание, что третий параметр каждой функции – это ‘cfunction’. Это любая пользовательская функция, и в этой функции нам нужно задать ответ сервера, когда мы получим этот ответ от сервера.

Этап 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-документ на вашем компьютере, и открыть его через браузер, чтобы увидеть результаты.

* Скачать в архиве


Удачи в работе!