- PVSM.RU - https://www.pvsm.ru -
Недавно передо мной возникла задача — сделать информационный виджет для одного сервиса, что бы размещать его на сторонних сайтах.
Коротко о сервисе — Сайт «Умное слово на каждый день» — это первый образовательный ресурс подобного рода. Неизвестные широким массам слова появляются каждый день и составляют крупнейший в рунете словарь «умных» слов. Заходи на Everydayword.ru [1] каждое утро и повышай словарный запас.
Перед созданием видждета передо мной встал вопрос, каким образом мне получать данные и в каком формате. Мой выбор пал на AJAX [2] в связке с JSON [3].
Первым делом нужно создать страницу на которую будет идти ajax запрос. Поэтому в файле модуля объявляем hook_menu() и функцию в которой мы будем возвращать данные:
function mymodule_menu() {
$items['output'] = array(
'page callback' => 'mymodule_output', //функция для вывода данных
'access callback' => TRUE,
);
return $items;
}
function mymodule_output() {
$data = array(
'title' => t('Your title'),
'body' => t('Your body'),
);
drupal_json_output($data);
}
Чистим кэш с помощью инструмента Drush [4] "Drush cc all
", переходим на страницу yoursite.ru/output [5]
Вы должны увидеть вот такой текст и ничего кроме {"title":"Your title","body":"Your body"}
Ну вроде json формируется и отдается по определенному url, все хорошо, можно и js начинать писать.
$(document).ready(function () {
$.ajax({
url: 'http://yoursite.ru/output',
dataType: "json",
success: function(data) {
console.log(data)
}
});
});
К сожалению, вместо наших данных в консоли нас поджидает вот такая вот ошибка:
XMLHttpRequest cannot load http://yoursite.ru/output. Origin http://your-test-site.ru is not allowed by Access-Control-Allow-Origin.
Можно конечно просто разрешить ajax для домена yoursite.ru, но это же не будет делать каждый кто хочет установить наш виджет.
Однако у метода .ajax есть такая настройка как crossDomain
, но работает она только с типом данных jsonp (dataType: 'jsonp')
Модернизируем наш скрипт:
$(document).ready(function() {
$.ajax({
url: 'http://yoursite.ru/output',
crossDomain: true,
dataType: 'jsonp',
success: function(data) {
console.log(data)
}
});
});
На этом дело не заканчивается и мы встречаем новую ошибку:
Uncaught SyntaxError: Unexpected token :
Оказывается браузер подключает нашу страницу как JS и пытается её исполнить. Немого изучив теорию jQuery.ajax() [6] модернизируем наш код.
$.ajax({
url: 'http://yoursite.ru/output?callback=?',
crossDomain: true,
dataType: 'jsonp',
success: function(data) {
// your process with data.
}
});
});
function mymodule_output() {
drupal_add_http_header('Content-Type', 'application/x-javascript');
$data = array(
'title' => t('Your title'),
'body' => t('Your body'),
);
$json = drupal_json_encode($data);
echo $_GET['callback'] . "($json);";
exit;
}
Автор: dkiselev
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/cms/19359
Ссылки в тексте:
[1] Everydayword.ru: http://everydayword.ru
[2] AJAX: http://ru.wikipedia.org/wiki/AJAX
[3] JSON: http://ru.wikipedia.org/wiki/JSON
[4] Drush: http://drush.ws/
[5] yoursite.ru/output: http://yoursite.ru/output
[6] jQuery.ajax(): http://api.jquery.com/jQuery.ajax/
[7] Источник: http://habrahabr.ru/post/154117/
Нажмите здесь для печати.