Главная > Скрипты и коды > Кросс-доменный Javascript-API для вашего веб-сайта
Кросс-доменный Javascript-API для вашего веб-сайта3 сентября 2012, 14:30. Разместил: Design FactoRy |
Сегодня мы хотим предложить вам маленький, но очень важный урок, в рамках которого вы научитесь создавать собственные кросс-доменные javascript-API. Нам кажется, что многие из вас уже пробовали реализовать нечто подобное, и, вероятно, некоторые сталкивались с проблемой работы с функциями API, размещенным на других доменах. В целом, вы просто не можете создать нормальный AJAX-запрос к удаленному серверу, и получить ответ в javascript-функции. И все это происходит из-за настроек безопасности. Но сегодня мы хотим научить вас решать эту проблему. Если вы готовы, давайте приступать к разработке кода! Этап 1. PHP Сначала нам нужно подготовить всё на серверной стороне: api.php
Вам следует обратить внимание на первую строку кода, где используется пользовательский заголовок с «Access-Control-Allow-Origin». Он позволяет нам отправлять ответ на любой сервер (имеется в виду любой домен). Если вы хотите запретить использование API на определенном домене, то сделать это можно здесь. Далее мы совершаем простые действия, в зависимости от действия $_POST, мы производим различные действия с полученными параметрами. В качестве самого простого примера мы решили проделать простое математическое вычисление: суммирование, вычитание, умножение и разделение. В дальнейшем мы можем получить результаты в JSON-формате. Пришло время подготовить нашу JS-библиотеку на стороне сервера: Этап 2. javascript api.js
Это нечто вроде оболочки для серверной стороны. Мы подготовили 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, мы подготовили пример:
В данном примере мы можем видеть, как используются javascript-функции нашего сервера. Посмотрите на пример еще раз:
Мы внесли всего 3 параметра в нашу функцию: 2 цифры и одну функцию. В этой функции мы получим ответ сервера. И мы можем отобразить этот результат где-нибудь (как пример – мы можем поместить его в элемент #results). Надеемся, что здесь все довольно ясно и просто. Теперь вы можете скопировать код нашего примера с результатами в новый HTML-документ на вашем компьютере, и открыть его через браузер, чтобы увидеть результаты. * Скачать в архиве Внимание! У вас нет прав для просмотра скрытого текста. Удачи в работе! Вернуться назад |