В этой статье мы рассмотрим важность JSON и почему мы должны использовать его в наших приложениях. Мы увидим, что jQuery снабдил нас очень удобной удобной функцией .
Что такое JSON?
JSON означает JavaScript Object Notation. Проще говоря, JSON — это способ форматирования данных, например, для его передачи по сети. В этой статье мы рассмотрим загрузку данных JSON с помощью HTTP-запроса GET (мы также можем использовать другие глаголы, такие как POST).
Почему мы выбрали бы JSON, скажем, XML? Основным преимуществом использования JSON является эффективность. JSON менее многословен и загроможден, что приводит к уменьшению количества байтов и ускорению процесса анализа Это позволяет нам обрабатывать больше сообщений, отправленных в формате JSON, чем в формате XML. Более того, JSON имеет очень эффективное и естественное представление объектов, что приводит к таким форматам, как BSON , где JSON-подобные объекты хранятся в двоичном формате.
Теперь давайте посмотрим, как jQuery может помочь нам загрузить данные в JSON-коде из удаленного источника. Для нетерпеливых среди вас есть демоверсия к концу статьи.
JSON jQuery Синтаксис
Метод $.getJSON() — это удобный помощник для работы с JSON напрямую, если вам не требуется много дополнительных настроек. По сути, это сводится к более общему помощнику $ .ajax () с неявным использованием правильных опций. Подпись метода:
$.getJSON(url, data, success);
Помимо обязательного параметра URL мы можем передать два необязательных параметра. Один представляет данные для отправки на сервер, другой — обратный вызов для запуска в случае успешного ответа.
Таким образом, три параметра соответствуют:
- Параметр
url— это строка, содержащая URL, на который отправляется запрос. - Необязательный параметр
data— это либо объект, либо строка, которая отправляется на сервер вместе с запросом. - Необязательный параметр
success(data, textStatus, jqXHR)является функцией обратного вызова, выполняемой только в случаеsuccess(data, textStatus, jqXHR)выполнения запроса.
В простейшем случае мы заботимся только о возвращенном объекте. В этом случае потенциальный обратный вызов success будет выглядеть так:
function success(data) { // do something with data, which is an object }
Как уже упоминалось, тот же запрос может быть вызван более подробным $.ajax() . Здесь мы будем использовать:
$.ajax({ dataType: 'json', url: url, data: data, success: success });
Давайте посмотрим на это на практике, используя небольшое демо.
Образец заявки
Мы запустим локальный сервер, который обслуживает статический файл JSON. Объект, представленный этим файлом, будет выбран и обработан нашим кодом JavaScript. В целях нашей демонстрации мы будем использовать Node.js для предоставления сервера (хотя подойдет любой сервер). Это означает, что нам понадобятся следующие три вещи:
- Рабочая установка Node.js.
- Диспетчер пакетов узла (npm).
- Глобальная установка пакета http-сервера .
Первые два пункта зависят от платформы. Если вам нужна помощь в настройке любого из них, вы можете обратиться к нашему руководству: Руководство для начинающих по npm — менеджер пакетов Node или страница загрузки Node (npm поставляется в комплекте с Node).
Третий момент можно достичь, запустив следующее из своего терминала:
npm install http-server -g
Если вам требуется префикс sudo (-nix systems) или командная строка с повышенными привилегиями для выполнения этой глобальной установки, вам следует рассмотреть возможность изменения местоположения глобальных пакетов .
После выполнения этих требований мы можем поместить следующие три файла в новую папку:
-
example.js— это файл JavaScript для запроса данных. -
example.json— это пример файла JSON для представления нашего объекта. -
index.html— это HTML-страница для вызова JavaScript и отображения данных.
Из командной строки мы можем просто вызвать http-server в новой папке. Теперь http: // localhost: 8080 должен запустить демо.
Образец JavaScript
Следующий код является полной логикой на стороне клиента. Он ожидает загруженного события DOMContentLoaded перед тем, как присоединить обработчик события к событию click элемента с идентификатором get-data . При щелчке по этому элементу мы пытаемся загрузить JSON с сервера, используя $.getJSON() , перед обработкой ответа и его отображением на экране.
$(document).ready(function () { $('#get-data').click(function () { var showData = $('#show-data'); $.getJSON('example.json', function (data) { console.log(data); var items = data.items.map(function (item) { return item.key + ': ' + item.value; }); showData.empty(); if (items.length) { var content = '<li>' + items.join('</li><li>') + '</li>'; var list = $('<ul />').html(content); showData.append(list); } }); showData.text('Loading the JSON file.'); }); });
Помимо преобразования частей объекта в неупорядоченный список, полный объект также печатается в консоли отладки браузера. Выходные данные генерируются в элементе <div> с идентификатором show-data . Даже если элемент сбрасывается для каждого запроса, мы заполняем его только в том случае, если результирующий объект JSON вообще содержит какие-либо элементы. Конечно, для нашего примера данные являются фиксированными, однако в целом возможен любой ответ.
Обратите внимание, что мы также установили некоторый текст для вывода <div> . Если мы вставим некоторую (искусственную) задержку для извлечения JSON, мы увидим, что это фактически выполняется до того, как отобразится какой-либо результат запроса $.getJSON . Причина проста: по умолчанию $.getJSON является неблокирующим, то есть асинхронным. Поэтому обратный вызов будет выполнен в некоторый (неизвестный) более поздний момент времени.
Дистилляция источника для получения важной информации дает следующий блок:
$('#get-data').click(function () { $.getJSON('example.json', function (data) { console.log(data); }); });
Здесь мы только связываем ссылку для запуска запуска помощника $.getJSON перед печатью возвращенного объекта в консоли отладки.
Образец JSON
Пример файла JSON намного больше, чем подмножество, о котором мы заботимся. Тем не менее, образец был построен таким образом, чтобы показать большую часть грамматики JSON. Файл читает:
{ "items": [ { "key": "First", "value": 100 },{ "key": "Second", "value": false },{ "key": "Last", "value": "Mixed" } ], "obj": { "number": 1.2345e-6, "enabled": true }, "message": "Strings have to be in double-quotes." }
В примере JavaScript мы используем только массив, связанный с ключом items . В отличие от обычного JavaScript, JSON требует от нас помещать ключи в двойные кавычки. Кроме того, мы не можем использовать запятые для указания объектов или массивов. Однако, как и в случае обычных массивов JavaScript, нам разрешено вставлять объекты разных типов.
Образец веб-страницы
Мы уже рассмотрели скрипт и пример файла JSON. Все, что осталось, — это веб-страница, которая предоставляет части, используемые файлом JavaScript для запуска и отображения файла JSON.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Request JSON Test</title> </head> <body> <a href="#" id="get-data">Get JSON data</a> <div id="show-data"></div> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="example.js"></script> </body> </html>
Здесь особо нечего сказать. Мы используем уменьшенную версию jQuery (старая версия 1.9.1, которая, безусловно, достаточна для наших целей) с официальной веб-страницы. Затем мы включаем наш скрипт, который отвечает за внедрение логики.
Примечание . Поскольку мы включаем наши файлы JavaScript в правильном месте (непосредственно перед закрывающим </body> ), больше нет необходимости использовать обратный вызов $(document).ready() , поскольку на этом этапе документ будет готов по определению.
демонстрация
И это то, чем мы заканчиваем.
Более общий метод
Как уже упоминалось, метод $.ajax является реальным предложением для любого (не только связанного с JSON) веб-запроса. Этот метод позволяет нам явно установить все параметры, которые нас интересуют. Мы можем настроить async на true если мы хотим, чтобы этот вызов выполнялся одновременно, т. Е. Запуск выполнялся одновременно с другим кодом. Установка его в false предотвратит запуск другого кода во время загрузки.
$.ajax({ type: 'GET', url: filename, data: data, async: false, beforeSend: function (xhr) { if (xhr && xhr.overrideMimeType) { xhr.overrideMimeType('application/json;charset=utf-8'); } }, dataType: 'json', success: function (data) { //Do stuff with the JSON data } });
Метод overrideMimeType (который переопределяет тип MIME, возвращаемый сервером) вызывается только для демонстрационных целей. Как правило, jQuery достаточно умен, чтобы настроить MIME-тип в соответствии с используемым типом данных.
Прежде чем мы перейдем к введению концепции проверки JSON, давайте кратко рассмотрим более реалистичный пример. Обычно мы не запрашиваем статический файл JSON, но загружаем JSON, который генерируется динамически (например, в результате вызова API). Генерация JSON зависит от некоторых параметров, которые должны быть предоставлены заранее.
var url = 'https://api.github.com/v1/...'; var data = { q: 'search', text: 'my text' }; $.getJSON(url, data, function (data, status) { if (status === 200) { //Do stuff with the JSON data } });
Здесь мы проверяем состояние, чтобы убедиться, что результатом действительно является объект, возвращенный из успешного запроса, а не какой-либо объект, содержащий сообщение об ошибке. Точный код состояния зависит от API, однако для большинства запросов GET обычно используется код состояния 200.
Данные предоставляются в форме объекта, что оставляет задачу создания строки запроса (или передачи тела запроса) до jQuery. Это самый лучший и самый надежный вариант.
Проверка JSON
Мы не должны забывать проверять наши данные JSON! Существует онлайновый инструмент JSON Validator под названием JSONLint , который можно использовать для проверки файлов JSON. В отличие от JavaScript, JSON очень строг и не имеет допусков, например, вышеупомянутые запятые или несколько способов написания ключей (с / , без кавычек).
Итак, давайте обсудим некоторые из наиболее распространенных ошибок при работе с JSON.
Распространенные ошибки в $ .getJSON
- Тихие сбои при вызовах
$.getJSON: это может произойти, если, например, был использованjsoncallback=json1234, а функцияjson1234()не существует. В таких случаях$.getJSONавтоматически выдаст ошибку. Поэтому мы всегда должны использоватьjsoncallback=?позволить jQuery автоматически обрабатывать начальный обратный вызов. - В лучшем случае используется реальный JSON (вместо JSONP ) (либо общаясь с нашим собственным сервером, либо через CORS). Это исключает ряд ошибок, которые могут возникнуть при использовании JSONP. Важный вопрос: поддерживает ли сервер / API JSONP? Есть ли какие-либо ограничения на использование JSONP?
-
Uncaught syntax error: Unexpected token(в Chrome) илиinvalid label(в Firefox). Последнее можно исправить, передав данные JSON в обратный вызов JavaScript. В целом, однако, это сильный индикатор того, что JSON искажен. Попробуйте использовать JSONLint, как указано выше.
Большой вопрос сейчас: как мы можем определить, действительно ли ошибка лежит в переданном JSON?
Как исправить ошибки JSON
Перед началом любой отладки, связанной с JSON, необходимо рассмотреть три важных момента:
- Мы должны убедиться, что JSON, возвращаемый сервером, имеет правильный формат с правильным MIME-типом.
- Мы можем попытаться использовать $ .get вместо
$.getJSONпоскольку наш сервер может возвращать неверный JSON. Также, еслиJSON.parse()завершается с ошибкой в возвращаемом тексте, мы сразу же узнаем, что виноват JSON. - Мы можем проверить возвращаемые данные, зарегистрировав их на консоли. Это должно быть входом для дальнейших исследований.
Отладка должна начинаться с ранее упомянутого инструмента JSONLint.
Вывод
JSON — это стандартный формат де-факто для обмена текстовыми данными. Метод $.getJSON() jQuery дает нам небольшой помощник для решения практически любого сценария, связанного с запросом данных в формате JSON. В этой статье мы исследовали некоторые методы и возможности, которые идут с этим удобным помощником.
Есть ли другие лучшие практики для $.getJSON() вы не можете жить?