JSON: основы использования

Наверняка вы когда-нибудь слышали о JSON. Что же это такое? Что он может и как его использовать?

В данном уроке мы расскажем об основах JSON и раскроем следующие пункты:

  • Что такое JSON?
  • Для чего используется JSON?
  • Как создать строку JSON?
  • Простой пример строки JSON.
  • Сравним JSON и XML.
  • Как работать с JSON в JavaScript и PHP?

 

Что такое JSON?

JSON - простой, основанный на использовании текста, способ хранить и передавать структурированные данные. С помощью простого синтаксиса вы можете легко хранить все, что угодно, начиная от одного числа до строк, массивов и объектов, в простом тексте. Также можно связывать между собой массивы и объекты, создавая сложные структуры данных.

После создания строки JSON, ее легко отправить другому приложению или в другое место сети, так как она представляет собой простой текст.

JSON имеет следующие преимущества:

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

Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.

 

Для чего используется JSON?

Наиболее частое распространенное использование JSON - пересылка данных от сервера к браузеру. Обычно данные JSON доставляются с помощью AJAX, который позволяет обмениваться данными браузеру и серверу без необходимости перезагружать страницу.

Пример:

  1. Пользователь нажимает миниатюру продукта в онлайн магазине.
  2. JavaScript, выполняющийся на браузере, генерирует запрос AJAX к скрипту PHP, запущенному на сервере, передавая ID выбранного продукта.
  3. Скрипт PHP получает название продукта, описание, цену и другую информацию из базы данных. Затем составляет из данных строку JSON и отсылает ее браузеру.
  4. JavaScript, выполняющийся на браузере, получает строку JSON, декодирует ее и выводит информацию о продукте на странице для пользователя.

Также можно использовать JSON для отправки данных от браузера на сервер, передавая строку JSON в качестве параметра запросов GET или POST. Но данный метод имеет меньшее распространение, так как передача данных через запросы AJAX может быть упрощена. Например, ID продукта может быть включен в адрес URL как часть запроса GET.

Библиотека jQuery имеет несколько методов, например,  getJSON() и parseJSON(), которые упрощают получение данных с помощью JSON через запросы AJAX.

 

Как создать строку JSON?

Есть несколько основных правил для создания строки JSON:

  • Строка JSON содержит либо массив значений, либо объект (ассоциативный массив пар имя/значение).
  • Массив заключается в квадратные скобки ([ и ]) и содержит разделенный запятой список значений.
  • Объект заключается в фигурные скобки ({ и }) и содержит разделенный запятой список пар имя/значение.
  • Пара имя/значение состоит из имени поля, заключенного в двойные кавычки, за которым следует двоеточие (:) и значение поля.
  • Значение в массиве или объекте может быть:
    • Числом (целым или с плавающей точкой)
    • Строкой (в двойных кавычках)
    • Логическим значением (true или false)
    • Другим массивом (заключенным в квадратные скобки)
    • Другой объект (заключенный в фигурные скобки)
    • Значение null

Чтобы включить двойные кавычки в строку, нужно использовать обратную косую черту: \". Так же, как и во многих языках программирования, можно помещать управляющие символы и шестнадцатеричные коды в строку, предваряя их обратной косой чертой. Смотрите детали на сайте JSON.

 

Простой пример строки JSON

Ниже приводится пример оформления заказа в формате JSON:

{
  "orderID": 12345,
  "shopperName": "Ваня Иванов",
  "shopperEmail": "ivanov@example.com",
  "contents": [
    {
      "productID": 34,
      "productName": "Супер товар",
      "quantity": 1
    },
    {
      "productID": 56,
      "productName": "Чудо товар",
      "quantity": 3
    }
  ],
  "orderCompleted": true
}

Рассмотрим строку подробно:

  • Мы создаем объект с помощью фигурных скобок  ({ и }).
  • В объекте есть несколько пар имя/значение:
    "orderID": 12345
    Свойство с именем "orderId" и целочисленным значением  12345
    "shopperName": "Ваня Иванов"
    свойство с именем "shopperName" и строковым значением "Ваня Иванов"
    "shopperEmail": "johnsmith@example.com"
    Свойство с именем "shopperEmail" и строковым значением "ivanov@example.com"
    "contents": [ ... ]
    Свойство с именем "contents", значение которого является массивом
    "orderCompleted": true
    Свойство с именем "orderCompleted" и логическим значением true
  • В массиве "contents" есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: productID, productName, и quantity.

Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:

<script type="text/javascript">
var cart = {
  "orderID": 12345,
  "shopperName": "Ваня Иванов",
  "shopperEmail": "ivanov@example.com",
  "contents": [
    {
      "productID": 34,
      "productName": "Супер товар",
      "quantity": 1
    },
    {
      "productID": 56,
      "productName": "Чудо товар",
      "quantity": 3
    }
  ],
  "orderCompleted": true
};
</script>

 

Сравнение JSON и XML

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

Хотя XML является проверенной технологией, которая используется в достаточном количестве приложений, преимуществами JSON являются более компактный  и простой для распознавания формат данных.

Вот как будет выглядеть выше приведенный пример объекта на XML:

<object>
  <property>
    <key>orderID</key>
    <number>12345</number>
  </property>
  <property>
    <key>shopperName</key>
    <string>Ваня Иванов</string>
  </property>
  <property>
    <key>shopperEmail</key>
    <string>ivanov@example.com</string>
  </property>
  <property>
    <key>contents</key>
    <array>
      <object>
        <property>
          <key>productID</key>
          <number>34</number>
        </property>
        <property>
          <key>productName</key>
          <string>Супер товар</string>
        </property>
        <property>
          <key>quantity</key>
          <number>1</number>
        </property>       
      </object>
      <object>
        <property>
          <key>productID</key>
          <number>56</number>
        </property>
        <property>
          <key>productName</key>
          <string>Чудо товар</string>
        </property>
        <property>
          <key>quantity</key>
          <number>3</number>
        </property>
      </object>
    </array>
  </property>
  <property>
    <key>orderCompleted</key>
    <boolean>true</boolean>
  </property> 
</object>

Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON - только 323 символа. Версию XML также достаточно трудно воспринимать.

Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.

 

Работаем со строкой JSON в JavaScript

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

Большинство языков программирования имеют инструменты для простого преобразования переменных в строки JSON и наоборот.

Создаем строку JSON из переменной

JavaScript имеет встроенный метод JSON.stringify(), который берет переменную и возвращает строку JSON, представляющую ее содержание. Например, создадим объект JavaScript, который содержит сведения о заказе из нашего примера, а затем создадим из него строку JSON:

<script type="text/javascript">
 
var cart = {
  "orderID": 12345,
  "shopperName": "Ваня Иванов",
  "shopperEmail": "ivanov@example.com",
  "contents": [
    {
      "productID": 34,
      "productName": "Супер товар",
      "quantity": 1
    },
    {
      "productID": 56,
      "productName": "Чудо товар",
      "quantity": 3
    }
  ],
  "orderCompleted": true
};
 
alert ( JSON.stringify( cart ) );
 
</script>

Данный код выдаст:

{"orderID":12345,"shopperName":"Ваня Иванов","shopperEmail":"ivanov@example.com","contents":[{"productID":34,"productName":"Супер товар","quantity":1},{"productID":56,"productName":"Чудо товар","quantity":3}],"orderCompleted":true}

Обратите внимание, что метод JSON.stringify() возвращает строку JSON без пробелов. Ее сложнее читать, но зато она более компактна для передачи через сеть.

Создаем переменную из строки JSON

Существует несколько способов разобрать строку JSON в JavaScript, но самый безопасный и надежный - использовать встроенный метод JSON.parse(). Он получает строку JSON и возвращает объект или массив JavaScript, который содержит данные. Например:

<script type="text/javascript">
 
var jsonString = '                          \
{                                           \
  "orderID": 12345,                         \
  "shopperName": "Ваня Иванов",             \
  "shopperEmail": "ivanov@example.com",     \
  "contents": [                             \
    {                                       \
      "productID": 34,                      \
      "productName": "Супер товар",         \
      "quantity": 1                         \
    },                                      \
    {                                       \
      "productID": 56,                      \
      "productName": "Чудо товар",          \
      "quantity": 3                         \
    }                                       \
  ],                                        \
  "orderCompleted": true                    \
}                                           \
';
 
var cart = JSON.parse ( jsonString );
 
alert ( cart.shopperEmail );
alert ( cart.contents[1].productName );
 
</script>

Мы создали переменную jsonString, которая содержит строку JSON нашего примера с заказом. Затем мы передаем данную строку методу JSON.parse(), который создает объект, содержащий данные JSON и сохраняет его в переменной cart. Остается только осуществить проверку, выведя свойства объекта shopperEmail и productName массива contents.

В результате мы получим следующий вывод:

ivanov@example.com
Чудо товар

В реальном приложении ваш JavaScript код будет получать заказ в виде строки JSON в AJAX ответе от скрипта сервера, передавать строку методу JSON.parse(), а затем использовать данные для отображения на странице пользователя.

JSON.stringify() и JSON.parse() имеют другие возможности, такие как  использование возвратных функций для пользовательской конвертации определённых данных. Такие опции очень удобны для конвертации различных данных в правильные объекты JavaScript.

 

Работаем со строкой JSON в PHP

PHP, как и JavaScript, имеет встроенные функции для работы с JSON строками.

Создаем строку JSON из переменной PHP

Функция json_encode() принимает переменную PHP и возвращает строку JSON, представляющую содержание переменной. Вот наш пример с заказом, написанный на PHP:

<?php
$cart = array(
  "orderID" => 12345,
  "shopperName" => "Ваня Иванов",
  "shopperEmail" => "ivanov@example.com",
  "contents" => array(
    array(
      "productID" => 34,
      "productName" => "Супер товар",
      "quantity" => 1
    ),
    array(
      "productID" => 56,
      "productName" => "Чудо товар",
      "quantity" => 3
    )
  ),
  "orderCompleted" => true
);
 
echo json_encode( $cart );
?>

Данный код возвращает абсолютно такую же строку JSON, как и в примере с JavaScript:

{"orderID":12345,"shopperName":"Ваня Иванов","shopperEmail":"ivanov@example.com","contents":[{"productID":34,"productName":"Супер товар","quantity":1},{"productID":56,"productName":"Чудо товар","quantity":3}],"orderCompleted":true}

В реальном приложении ваш скрипт PHP пришлет данную строку JSON как часть AJAX ответа браузеру, где JavaScript код с помощью метода JSON.parse() преобразует ее обратно в переменную для вывода на странице пользователя.

Вы может передавать различные флаги в качестве второго аргумента функции json_encode(). С их помощью можно изменять принципы кодирования содержания переменных в строку JSON.

Создаем переменную из строки JSON

Для преобразования строки JSON в переменную PHP используется метод json_decode(). Заменим наш пример для JavaScript с методом JSON.parse() на код PHP:

<?php
$jsonString = '
{                                          
  "orderID": 12345,                        
  "shopperName": "Ваня Иванов",             
  "shopperEmail": "ivanov@example.com", 
  "contents": [                            
    {                                      
      "productID": 34,                     
      "productName": "Супер товар",        
      "quantity": 1                       
    },                                     
    {                                      
      "productID": 56,                     
      "productName": "Чудо товар",       
      "quantity": 3                        
    }                                      
  ],                                       
  "orderCompleted": true                   
}                                          
';
 
$cart = json_decode( $jsonString );
echo $cart->shopperEmail . "<br>";
echo $cart->contents[1]->productName . "<br>";
?>

Как и для JavaScript данный код выдаст:

ivanov@example.com
Чудо товар

По умолчанию функция json_decode() возвращает объекты JSON как объекты PHP. Существуют обобщенные объекты PHP класса stdClass. Поэтому мы используем -> для доступа к свойствам объекта в примере выше.

Если вам нужен объект JSON в виде ассоциированного массива PHP, нужно передать true в качестве второго аргумента функции json_decode(). Например:

$cart = json_decode( $jsonString, true );
echo $cart["shopperEmail"] . "<br>";
echo $cart["contents"][1]["productName"] . "<br>";

Данный код выдаст такой же вывод:

ivanov@example.com
Чудо товар

Также функции json_decode() можно передавать другие аргументы для указания глубины рекурсии и способов обработки больших целых чисел.

 

Заключение

Хотя JSON прост для понимания и использования, он является очень полезным и гибким инструментом для передачи данных между приложениями и компьютерами, особенно при использовании AJAX.  Если вы планируете разрабатывать AJAX приложение, то нет сомнений, что JSON станет важнейшим инструментом в вашей мастерской.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/json-basics/
Перевел: Сергей Фастунов
Урок создан: 12 Августа 2011
Просмотров: 401735
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 12 Августа 2011 15:40
    kesha_php
    Несомненно прочесть это стоит. И в дальнейшем с этим работать тоже стоит. Удобно и современно, куда лучше XML'ля!
    • 12 Августа 2011 16:56
      Constantine
      Мдаа..))
    • 12 Августа 2011 18:56
      ermak
      Чем он лучше XML? Этим не возможно заменить XML, или придётся просто я не знаю как вывернуться, чтобы всё работало. Так или иначе Json существует давно, но он не всеми признан, я имею в виду программами (например тупо таже RSS лента). На мой взгляд это скорее всего метод передачи, а не для того, что бы в нём что-то хранить.
      • 12 Августа 2011 21:24
        budzin
        XML - это XML, JSON - это JSON. У каждого свои плюсы и минусы. Вопрос не в том лучше он или не лучше, а в том в каком случае было бы удобно их применять. JSON использовать при передачи данных, а XML для ее хранения.
  • 12 Августа 2011 15:56
    budzin
    Читаю!
  • 12 Августа 2011 17:24
    dream707
    а ещё JSON это один из немногих способов кроссдоменной передачи данных, было бы кстати интересно почитать об этом
    • 12 Августа 2011 19:42
      xakepmega
      json не метод а формат передачи
  • 12 Августа 2011 17:55
    Deonis
    Помню, как я ворвался в эту тему впервые, и как обломался тогда... Сделал сайт полностью без перезагрузок. По сути, он состоял из одного php-файла, а всё остальное JS. Оказалось, что Гугл не понимает сгенерированный контент, возникают проблемы с индексацией и пришлось дописывать альтернативу, что убило большую часть времени на создание сайта. Поэтому, сейчас использую активно в админках, но редко и выборочно на самом сайте.
    • 12 Августа 2011 19:44
      xakepmega
      отдавать страницу сайта для аякса или полной загрузки очень просто, а при использовании нового History API будут еще и реальные адреса.
      • 12 Августа 2011 21:27
        budzin
        А можете подробней рассказать!?
        • 27 Августа 2011 12:12
          notbot
          плюс один
  • 12 Августа 2011 18:24
    mevr
    Почему нету в комментах поставить плюс комментируемому!? +1 Deonis
    • 12 Августа 2011 19:44
      xakepmega
      я бы поставил -1
      • 13 Августа 2011 11:24
        ppaull
        Поддерживаю!
      • 14 Августа 2011 10:46
        Deonis
        Да сколько угодно можно минусовать, если не знать, что на данный момент history API работает только в Mozilla Firefox с версии выше 3.7 и во всех версиях Google Chrome. Если нет уважения к пользователям, которые пользуются другими браузерами, то вперёд и с песней. Хотя у нас достаточно го*нокодеров, которые игнорирую кроссбраузерность и создают сайты так, как нравится лично им.
        • 14 Августа 2011 22:15
          tyareg
          Это можно обойти, было бы желание. Есть плагин для этого.
  • 13 Августа 2011 09:12
    alexsave
    Использовать LINQ to XML в ASP, намного удобней и производительней чем AJAJ и AJAX вместе взятые ИМХО
  • 13 Августа 2011 14:08
    atorian
    Несомненно JSON рулит. В дополнение хотелось бы заметить, что существует библиотека для работы с JSON в FLASH AS3.
  • 27 Августа 2011 12:10
    notbot
    "к скрипту PHP, запущенному на сервере" - как всё запущено... "запущенному" - лишнее. И ещё: php json_encode|decode не всегда совместимы с русскими буквами (конкретного примера сейчас не помню). А вот что у меня получилось (Юникод):
    {"orderID":12345,"shopperName":"\u0412\u0430\u043d\u044f \u0418\u0432\u0430\u043d\u043e\u0432","shopperEmail":"ivanov@example.com","contents":[{"productID":34,"productName":"\u0421\u0443\u043f\u0435\u0440 \u0442\u043e\u0432\u0430\u0440","quantity":1},{"productID":56,"productName":"\u0427\u0443\u0434\u043e \u0442\u043e\u0432\u0430\u0440","quantity":3}],"orderCompleted":true}
  • 3 Января 2012 01:24
    [Арчи]
    Нет, ну что происходит... в который раз уже часами ищу ответа и нахожу его именно здесь... Спасибо Вам, что еще сказать.
  • 11 Января 2012 22:13
    [Tratotui]
    Да на самом деле в PHP не особо хорошо проработан JSON. И с кириллицей не хочет дружить.
  • 4 Февраля 2012 16:21
    salexys
    Прошу помощи, объясните мне на примере: есть таблица http://pentathlon.org/results/competition-results/results/pentathlon/737-uipm-junior-world-championships она же представлена в JSON http://pentathlon.org/results/competition-results/results/pentathlon/737-uipm-junior-world-championships/junior/men/final?display=json как мне в PHP файле зная URL c JSON собрать такую же таблицу. Прошу пример кода.
  • 9 Мая 2013 16:55
    ashashasha
    спасибо))
  • 1 Июня 2013 22:28
    goilo
    Создание переменной из строки JSon описано ужасно и с ошибками.
  • 31 Июля 2013 17:52
    Leninka
    Да, было бы неплохо увидеть архив с примером формы с отправкой данных в таком формате
  • 15 Марта 2014 07:59
    Александр Крюков
    Всем привет, у меня есть две ссылки с базой всех предметов, и есть ссылка с товаром, например в базе всех предметов находиться {"id":-2112801928,"name":"Kevlar Vest","category":5,"desc":"This is an piece of armor. Drag it to it's corresponding slot in the armor window and it will provide additional protection","splittable":false}, а в базе с товаром {"price":2500,"uses":3,"mod_slots":0,"item_mods":[],"condition":1,"owner_id":166475777,"owner_name":"KillerProst","sold":true,"auction":true,"barcode":"1215028364","userdata":[],"item_id":-1475223177} как мне к определенному товару вывести название из базы всех предметов? помогите пожалуйста.
^ Наверх ^