Кросс-доменная API для сайта

Подробности: Категория: PHP. Система

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

sourse

Шаг 1. PHP

Первым делом приготовим наш сервер.
api.php
01 <?php
02
03 // Устанавливаем возможность отправлять ответ для любого домена
04 header('Access-Control-Allow-Origin: *');
05
06 if (version_compare(phpversion(), '5.3.0', '>=') == 1)
07 error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
08 else
09 error_reporting(E_ALL & ~E_NOTICE);
10
11 // Получаем параметры POST
12 $sAction = $_POST['action'];
13 $iParam1 = (int)$_POST['param1'];
14 $iParam2 = (int)$_POST['param2'];
15
16 // Выполняем вычисления
17 $iResult = 0;
18 switch ($sAction) {
19 case 'sum':
20 $iResult = $iParam1 + $iParam2;
21 break;
22 case 'sub':
23 $iResult = $iParam1 — $iParam2;
24 break;
25 case 'mul':
26 $iResult = $iParam1 * $iParam2;
27 break;
28 case 'div':
29 $iResult = $iParam1 / $iParam2;
30 break;
31 }
32
33 // Подготавливаем массив результатов
34 $aResult = array(
35 'result' => $iResult
36 );
37
38 // Генерируем результат
39 header('Content-type: application/json');
40 echo json_encode($aResult);

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

Шаг 2. JavaScript
api.js
01 function do_sum(param1, param2, cfunction) {
02
03 // Отправляем AJAX ответ на сервер
04 $.ajax({
05 type: 'POST',
06 url: 'http://ваш_сайт/api.php',
07 crossDomain: true,
08 dataType: 'json',
09 data: 'action=sum&param1=' + param1 + '&param2=' + param2,
10 success: function(json) {
11 // и вызываем функцию клиента
12 cfunction(json);
13 }
14 });
15 }
16
17 function do_sub(param1, param2, cfunction) {
18
19 // Отправляем AJAX ответ на сервер
20 $.ajax({
21 type: 'POST',
22 url: 'http://ваш_сайт/api.php',
23 crossDomain: true,
24 dataType: 'json',
25 data: 'action=sub&param1=' + param1 + '&param2=' + param2,
26 success: function(json) {
27 // и вызываем функцию клиента
28 cfunction(json);
29 }
30 });
31 }
32
33 function do_mul(param1, param2, cfunction) {
34
35 // Отправляем AJAX ответ на сервер
36 $.ajax({
37 type: 'POST',
38 url: 'http://ваш_сайт/api.php',
39 crossDomain: true,
40 dataType: 'json',
41 data: 'action=mul&param1=' + param1 + '&param2=' + param2,
42 success: function(json) {
43 // и вызываем функцию клиента
44 cfunction(json);
45 }
46 });
47 }
48
49 function do_div(param1, param2, cfunction) {
50
51 // Отправляем AJAX ответ на сервер
52 $.ajax({
53 type: 'POST',
54 url: 'http://ваш_сайт/api.php',
55 crossDomain: true,
56 dataType: 'json',
57 data: 'action=div&param1=' + param1 + '&param2=' + param2,
58 success: function(json) {
59 // и вызываем функцию клиента
60 cfunction(json);
61 }
62 });
63 }

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

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

Здесь показано, как можно использовать функции API. Вот единичный пример:
1 var param1 = 5;
2 var param2 = 10;
3 do_sum(param1, param2, function(data) {
4 $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '<br />');
5 });

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/javascript-cross-domain-api-for-your-website/
Перевел: Сергей Фастунов