Кросс-доменная API для сайта
В данном уроке мы сделаем собственный кросс-доменный 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).
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/wZR_AWt9WMs/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Одного яйца два раза не высидишь. К. Прутков |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.