Разработка сайтов в Зоринске, ЛНР. Простой пример Ajax/jQuery.getJSON

В этой статье мы исследуем важность JSON и почему мы должны использовать его в наших приложениях. Мы увидим, что jQuery предоставил нам очень удобную функцию.

Что такое JSON?

JSON расшифровывается как J ava S cript Object Notation. Это независимый от языка текстовый формат, который обычно используется для передачи данных в веб-приложениях. В этой статье мы рассмотрим загрузку данных 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обратный вызов будет выглядеть так:

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)

глобальная установка пакета live-server

Первые два пункта зависят от платформы. Чтобы установить Node, перейдите на страницу загрузки проекта и скачайте соответствующие двоичные файлы для вашей системы. В качестве альтернативы вы можете рассмотреть возможность использования диспетчера версий, как описано в разделе «Установка нескольких версий Node.js с помощью nvm «.

npm поставляется вместе с Node, поэтому ничего устанавливать не нужно. Однако, если вам нужна помощь в установке и запуске, обратитесь к нашему руководству «Руководство для начинающих по npm — диспетчеру пакетов Node «.

Третий пункт можно выполнить, запустив в терминале следующее:

npm install -g live-server

Если вам нужен sudoпрефикс (системы -nix) или командная строка с повышенными привилегиями для выполнения этой глобальной установки, вам следует подумать об изменении местоположения глобальных пакетов.

Как только эти требования будут выполнены, мы можем создать следующие три файла в новой папке:

main.js, который является файлом JavaScript для запроса данных

example.json, который является примером файла JSON

index.html, которая представляет собой HTML-страницу для вызова JavaScript и отображения данных.

Из командной строки мы можем просто вызвать live-serverновую папку. Это откроет нашу демонстрацию в новой вкладке браузера по адресу http: //localhost:8080.

Пример JavaScript

Следующий код представляет собой полную логику на стороне клиента. Он ожидает DOMContentLoadedзапуска события load, прежде чем получить ссылку на два элемента DOM — $showData, где мы будем отображать проанализированный ответ, и $raw, где мы будем отображать полный ответ.

Затем мы присоединяем обработчик события к clickсобытию элемента с идентификатором get-data. При нажатии на этот элемент мы пытаемся загрузить JSON с сервера с помощью $.getJSON (), прежде чем обработать ответ и отобразить его на экране:

$ (document).ready (() => {

const $showData = $ ('#show-data’) ;

const $raw = $ ('pre’) ;

$ ('#get-data’).on ('click’, (e) => {

e.preventDefault () ;

$showData.text ('Loading the JSON file.') ;

$.getJSON ('example.json’, (data) => {

const markup = data.items

.map (item => `

• ${item.key}: ${item.value}
• `)

  .join ('') ;

  const list = $ ('

  • ').html (markup) ;

     

    $showData.html (list) ;

    $raw.text (JSON.stringify (data, undefined, 2));

    }) ;

    }) ;

    }) ;

    Помимо преобразования частей объекта в неупорядоченный список, весь объект также преобразуется в строки и отображается на экране. Ненумерованный список добавляется к

    элементу с идентификатором show-data, строкой JSON и

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

    . Если мы вставим некоторую (искусственную) задержку для получения JSON (например, в инструментах разработки вашего браузера), мы увидим, что это действительно выполняется до того, как $.getJSONотобразится какой-либо результат запроса. Причина проста: по умолчанию $.getJSONнеблокирующий — то есть асинхронный. Следовательно, обратный вызов будет выполнен в какой-то (неизвестный) более поздний момент времени. Извлечение источника для получения важной информации дает следующий блок: $('#get-data').on('click', () => { $.getJSON('example.json', (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:

    Get JSON data

    Здесь особо нечего сказать. Мы используем уменьшенную версию jQuery с официальной веб-страницы. Затем включаем наш скрипт, который отвечает за внедрение логики.

    Примечание: поскольку мы включаем наши файлы JavaScript в правильном месте (непосредственно перед закрывающим тегом), больше нет необходимости использовать $ (document).ready () обратный вызов, потому что в этот момент документ будет готов по определению.

    Демо

    И вот что у нас получается.

    Более общий метод

    Как упоминалось ранее, этот $.ajaxметод подходит для любого (не только связанного с JSON) веб-запроса. Этот метод позволяет нам явно установить все параметры, которые нас интересуют. Мы можем настроить async, trueесли хотим, чтобы этот вызов выполнялся одновременно, то есть потенциально выполнялся одновременно с другим кодом. Установка этого параметра на falseпредотвратит запуск другого кода во время загрузки:

    $.ajax ({

    type: 'GET’,

    url: filename,

    data: data,

    async: false,

    beforeSend: (xhr) => {

    if (xhr && xhr.overrideMimeType) {

    xhr.overrideMimeType ('application/json; charset=utf-8') ;

    }

    },

    dataType: 'json’,

    success: (data) => {

    //Do stuff with the JSON data

    }

    }) ;

    Метод overrideMimeType (который переопределяет тип MIME, возвращаемый сервером) вызывается только в демонстрационных целях. Как правило, jQuery достаточно умен, чтобы настроить MIME-тип в соответствии с используемым типом данных.

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

    const url = 'https: //api.github.com/v1/...';

    const data = {

    q: 'search’,

    text: 'my text’

    };

    $.getJSON (url, data, (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? Подробнее о работе с 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 — это де-факто стандартный формат для обмена текстовыми данными. Метод jQuery $.getJSON () дает нам неплохой помощник для работы практически с любым сценарием, связанным с запросом данных в формате JSON. В этой статье мы рассмотрели некоторые методы и возможности этого удобного помощника.

    Если вам нужна помощь в реализации выборки JSON в вашем коде (используя $.getJSON () или что-то еще), посетите нас на форумах SitePoint.