В данном уроке мы сделаем собственный кросс-доменный 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¶m1=' + param1 + '¶m2=' + 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¶m1=' + param1 + '¶m2=' + 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¶m1=' + param1 + '¶m2=' + 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¶m1=' + param1 + '¶m2=' + 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).