Кросс-доменная 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-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.