Главная

Делаем информационный виджет для Drupal сайта

2012-11-07 в 7:22, admin, рубрики: ajax, cms, drupal, drupal 7, json, JSONP, виджеты сайтов, метки: ajax, cms, drupal 7, json, JSONP, виджеты сайтов

Недавно передо мной возникла задача — сделать информационный виджет для одного сервиса, что бы размещать его на сторонних сайтах.
Коротко о сервисе — Сайт «Умное слово на каждый день» — это первый образовательный ресурс подобного рода. Неизвестные широким массам слова появляются каждый день и составляют крупнейший в рунете словарь «умных» слов. Заходи на Everydayword.ru каждое утро и повышай словарный запас.

Перед созданием видждета передо мной встал вопрос, каким образом мне получать данные и в каком формате. Мой выбор пал на AJAX в связке с JSON.

Приступим

PHP

Первым делом нужно создать страницу на которую будет идти 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 "Drush cc all", переходим на страницу yoursite.ru/output
Вы должны увидеть вот такой текст и ничего кроме {"title":"Your title","body":"Your body"}

JS

Ну вроде 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() модернизируем наш код.

Итоговый, рабочий вариант.

JS

  $.ajax({
    url: 'http://yoursite.ru/output?callback=?',
    crossDomain: true,
    dataType: 'jsonp',
    success: function(data) {
      // your process with data.
    }
  });
});

PHP

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

Источник