На этом шаге мы рассмотрим особенности использования этого формата л\для получения данных.
Идея использования тегов <script> для получения файлов JavaScript из удаленных источников также может быть распространена на получение файлов в формате JSON. Однако для этого нужно немного изменить файл JSON на сервере. Для этого имеется несколько механизмов, один из которых поддерживается библиотекой jQuery: JSON with Padding (JSON с дополнением), или JSONP.
Файл формата JSONP содержит в себе стандартный файл в формате JSON, окруженный круглыми скобками, которым предшествует произвольная текстовая строка. Эта строка, или "padding" (дополнение), определяется клиентом, запрашивающим данные. Благодаря круглым скобкам клиент может либо организовать вызов функции, либо установить значение переменной, в зависимости от того, какой вид имеет строка дополнения.
Реализация приема JSONP на языке РНР выглядит очень просто:
<?php
print($_GET ['callback'] .'('. $data .')');
?>
где $data - это переменная, хранящая строковое представление содержимого файла JSON. Когда этот сценарий вызывается, он вставляет перед данными параметр callback из строки запроса и возвращает получившийся файл обратно клиенту.
Для демонстрации этого приема нам достаточно будет лишь немного изменить предыдущий пример использования файлов JSON, чтобы обеспечить возможность получения этих данных из удаленного источника. Чтобы добиться желаемого эффекта, в функции $.getJSON() используется специальный символ-заполнитель ?.
$(document).ready(function() {
var url = 'http://examples.learningjquery.com/jsonp/g.php';
$('#letter-g a').click(function() {
$.getJSON(url + '?callback=?', function(data) {
$('#dictionary').empty();
$.each(data, function(entryIndex, entry) {
var html = '<div class="entry">';
html += '<h3 class="term">' + entry['term']
+ '</h3>';
html += '<div class="part">' + entry['part']
+ '</div>';
html += '<div class="definition">';
html += entry['definition'];
if (entry['quote']) {
html += '<div class="quote">';
$.each(entry['quote'], function(lineIndex, line) {
html += '<div class="quote-line">' + line
+ '</div>';
});
if (entry['author']) {
html += '<div class="quote-author">'
+ entry['author'] + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#dictionary').append(html);
});
});
return false;
});
});
Рис.1. Использование формата JSONP
Полный текст этого примера можно взять здесь.В обычных условиях нам не было бы позволено получить файл JSON от удаленного сервера (в данном случае - examples.learningjquery.com). Однако так как запрашиваемый файл содержит данные в формате JSONP, мы можем получить данные, добавив в конец адреса URL строку запроса, используя символ-заполнитель ? для значения аргумента callback. При выполнении запроса jQuery заменит символ ?, обработает результат и передаст его функции обратного вызова, как если бы был выполнен запрос на получение локального файла JSON.
Обратите внимание: в этом случае справедливыми остаются те же самые предостережения, что и прежде, - все, что сервер решит вернуть браузеру, будет выполнено на компьютере пользователя. Прием, основанный на использовании формата JSONP, должен использоваться только для получения данных из доверенных источников.
Со следующего шага мы начнем рассматривать дополнительные возможности AJAX.
