Блоговод | JSON и AJAX в плагинах для WordPress

JSON и AJAX в плагинах для WordPress

При разработке плагинов WordPress использующих javascript, часто возникает необходимость в получении неких данных с сервера при исполнении скрипта JS. Как вариант, если мы имеем дело со статическими данными, можно использовать PHP-код в файле js (

source.js.php

), но такой вариант ведёт к неоправданным и весьма весомым “накладным расходам” в свете использования ресурсов сервера. Кроме того, некоторые данные становятся доступны только после загрузки страницы и их использование на этапе обработки запроса, не только нецелесообразно, но и невозможно. Исходя из вышесказанного можно сделать вывод, что AJAX запросы не только могут, но и должны быть в javascript плагина. В качестве примера испоьзования предлагаю рассмотреть передачу локализованных строк в js-скрипт.

Предположим, что наш скипт выдаёт некую информацию (ошибки, успешное выполнение) в ходе выполнения кода скрипта, например AJAX-загрузчика файлов, а заодно каким-то образом использует список рубрик блога.

Для того, чтобы получить что-то с сервера, надо это “что-то” иметь. Поэтому, для начала, напишем обработчик AJAX-запроса. Это обыкновенная функция, в данном случае, поскольку я пишу плагины с использованием ООП, метод класса плагина.

function getStringsHandler() {
  global $wpdb;
  $tTable = $wpdb->prefix . "terms";
  $ttTable = $wpdb->prefix . "term_taxonomy";
 
  $sql = "SELECT
            {$tTable}.name
          FROM
            {$tTable}
          INNER JOIN {$ttTable}
            ON {$tTable}.term_id = {$ttTable}.term_id
          WHERE
            {$ttTable}.taxonomy = 'category'";
 
  $cats = $wpdb->get_results($sql, ARRAY_A);
  $terms = array();
 
  foreach($cats as $value) array_push($terms, $value['name']);
 
  $output = array(
    'uploading' => __('Uploading', SAM_DOMAIN).' ...',
    'uploaded' => __('Uploaded.', SAM_DOMAIN),
    'status' => __('Only JPG, PNG or GIF files are allowed', SAM_DOMAIN),
    'file' => __('File', SAM_DOMAIN),
    'path' => WP_PLUGIN_DIR.'/sam-images',
    'url' => WP_PLUGIN_URL.'/sam-images',
    'cats' => $terms
  );
 
  header("Content-type: application/json; charset=UTF-8");
  exit(json_encode($output));
}

function getStringsHandler() {

global $wpdb;

$tTable = $wpdb->prefix . "terms";

$ttTable = $wpdb->prefix . "term_taxonomy";

$sql = "SELECT

{$tTable}.name

FROM

{$tTable}

INNER JOIN {$ttTable}

ON {$tTable}.term_id = {$ttTable}.term_id

WHERE

{$ttTable}.taxonomy = 'category'";

$cats = $wpdb->get_results($sql, ARRAY_A);

$terms = array();

foreach($cats as $value) array_push($terms, $value['name']);

$output = array(

'uploading' => __('Uploading', SAM_DOMAIN).' ...',

'uploaded' => __('Uploaded.', SAM_DOMAIN),

'status' => __('Only JPG, PNG or GIF files are allowed', SAM_DOMAIN),

'file' => __('File', SAM_DOMAIN),

'path' => WP_PLUGIN_DIR.'/sam-images',

'url' => WP_PLUGIN_URL.'/sam-images',

'cats' => $terms

);

header("Content-type: application/json; charset=UTF-8");

exit(json_encode($output));

}

Что делает эта функция? Сначала, с помощью нехитрого SQL-запроса получает список всех рубрик блога, а затем формирует массив, состоящий из локализованных строк, списка рубрик, а также URL и пути к некоей папке в папке плагинов WordPress.

Хочу обратить Ваше внимание на две важных вещи:

Первое. Обязательно задавайте тип контента. Тип контента может быть любым из следующего списка:

application/json
application/x-javascript
text/javascript
text/x-javascript
text/x-json

Вы можете использовать любой из вышеперечисленных, тем не менее общепринятым является application/json.

Второе. Несмотря на то, что буржуйские программисты рекомендуют производить вывод данных с помощью псевдофункции echo, я настоятельно рекомендую использовать функцию exit. На это есть свои причины. Дело в том, что при работе на сайте с ANSI-кодировкой, вывод будет производиться корректно, однако на сайтах с мультибайтовой кодировкой (UTF-8) завершающий мультибайт строки будет интерпретироваться как 0 и конец строки что приведёт к ошибке обработки передаваемого JSON-объекта в принимающем скрипте.

Для наглядности, ниже я привожу пример вывода данных, приведённым выше обработчиком запросов:

{
  uploading: "Загружается ...",
  uploaded: "загружен.",
  status: "Разрешается загрузка файлов формата JPG, PNG или GIF",
  file: "Файл",
  path: "/home/vhosts/blogcoding.ru/subdomains/tests/httpdocs/wp-content/plugins/sam-images/",
  url: "//tests.blogcoding.ru/wp-content/plugins/sam-images/",
  cats: ["Без рубрики", "Wordpress", "Blogger", "Блоггинг", "Плагины"]
}

{

uploading: "Загружается ...",

uploaded: "загружен.",

status: "Разрешается загрузка файлов формата JPG, PNG или GIF",

file: "Файл",

path: "/home/vhosts/blogcoding.ru/subdomains/tests/httpdocs/wp-content/plugins/sam-images/",

url: "//tests.blogcoding.ru/wp-content/plugins/sam-images/",

cats: ["Без рубрики", "Wordpress", "Blogger", "Блоггинг", "Плагины"]

}

Теперь, когда мы написали обработчик AJAX-запроса, пришло время сообщить системе, что он есть, т.е. зарегистрировать его. В WordPress существует механизм регистрации AJAX-запросов через определение действий (actions), в частности, через action “wp_ajax” или “wp_ajax_nopriv“. При определении action необходимо к имени action (wp_ajax) добавить имя запроса и определить функцию-обработчик запроса:

add_action('wp_ajax_get_strings', array(&amp;$this, 'getStringsHandler'));

1	add_action('wp_ajax_get_strings', array(&$this, 'getStringsHandler'));

или

add_action('wp_ajax_nopriv_get_strings', array(&amp;$this, 'getStringsHandler'));

1	add_action('wp_ajax_nopriv_get_strings', array(&$this, 'getStringsHandler'));

В данном случае мы определили функцию запроса для варианта ООП, для процедурного программирования обработчик задаётся не массивом, а обыкновенной строковой переменной, содержащей имя функции-обработчика.

Внимание! Если папка wp-admin закрыта паролем, при запросе из Face Side пользователю будет предложено ввести имя пользователя и пароль для входа в папку. А оно Вам надо?

Что это значит на самом деле? Всё просто – при вызове из скрипра URL типа
url_блога/wp-admin/admin-ajax.php?action=get_strings
будет произведён вызов обработчика AJAX-запроса. В качестве параметра, если Вы заметили, используется имя action, которое мы только что зарегистрировали. Не торопитесь запоминать этот адрес URL – в этом нет необходимости. Но об этом чуть позже.

Ну вот мы и добрались до AJAX-запроса:

(function($) {
  $(document).ready(function() {
    var options = $.parseJSON($.ajax({
      url: ajaxurl,
      data: {action: 'get_strings'},
      async: false,
      dataType: 'jsonp'
    }).responseText);
 
    // Пример использования полученных данных
    var status = $("#uploading");
    status.text(options.uploading);
 
    return false;
  });
})(jQuery)

(function($) {

$(document).ready(function() {

var options = $.parseJSON($.ajax({

url: ajaxurl,

data: {action: 'get_strings'},

async: false,

dataType: 'jsonp'

}).responseText);

// Пример использования полученных данных

var status = $("#uploading");

status.text(options.uploading);

return false;

});

})(jQuery)

Как видите запрос выполнен в скрипте для jQuery, надеюсь у Вас не возникнет проблем организовать подобный запрос под управлением другого фреймворка или с помощью XMLHttpRequest.

На что хотелось бы обратить внимание:

Переменная ajaxurl задаётся самим WordPress и специального определения не требует (для административных страниц). Это тот самый URL о котором мы говорили, как об URL зарегистрированного AJAX-запроса. В качестве дополнительных данных используется имя зарегистрированного запроса как переменная action.

Внимание! Для Face Side переменную ajaxurl необходимо задавать самостоятельно! Воспользуйтесь функцией wp_customize_script …

Если, как в этом, случае Вы хотите, чтобы данные загрузились до того как загрузится весь скрипт, установите параметр запроса async в значение false. Это приостановит загрузку скрипта браузером до того момента, когда сервер вернёт запрошенные данные.