
Если вы готовы, давайте приступать к разработке кода!
Этап 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¶m1=' + param1 + '¶m2=' + 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¶m1=' + param1 + '¶m2=' + 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¶m1=' + param1 + '¶m2=' + 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¶m1=' + param1 + '¶m2=' + 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-документ на вашем компьютере, и открыть его через браузер, чтобы увидеть результаты.
* Скачать в архиве
Внимание! У вас нет прав для просмотра скрытого текста.
Удачи в работе!