Главная > Скрипты и коды > Кросс-доменный Javascript-API для вашего веб-сайта

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


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

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

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

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

* Скачать в архиве
Внимание! У вас нет прав для просмотра скрытого текста.


Удачи в работе!
Вернуться назад