Наверняка вы когда-нибудь слышали о JSON. Что же это такое? Что он может и как его использовать?
В данном уроке мы расскажем об основах JSON и раскроем следующие пункты:
- Что такое JSON?
- Для чего используется JSON?
- Как создать строку JSON?
- Простой пример строки JSON.
- Сравним JSON и XML.
- Как работать с JSON в JavaScript и PHP?
JSON - простой, основанный на использовании текста, способ хранить и передавать структурированные данные. С помощью простого синтаксиса вы можете легко хранить все, что угодно, начиная от одного числа до строк, массивов и объектов, в простом тексте. Также можно связывать между собой массивы и объекты, создавая сложные структуры данных.
После создания строки JSON, ее легко отправить другому приложению или в другое место сети, так как она представляет собой простой текст.
JSON имеет следующие преимущества:
- Он компактен.
- Его предложения легко читаются и составляются как человеком, так и компьютером.
- Его легко преобразовать в структуру данных для большинства языков программирования (числа, строки, логические переменные, массивы и так далее)
- Многие языки программирования имеют функции и библиотеки для чтения и создания структур JSON.
Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.
Для чего используется JSON?Наиболее частое распространенное использование JSON - пересылка данных от сервера к браузеру. Обычно данные JSON доставляются с помощью AJAX , который позволяет обмениваться данными браузеру и серверу без необходимости перезагружать страницу.
Также можно использовать 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": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true }
Рассмотрим строку подробно:
- Мы создаем объект с помощью фигурных скобок ({ и }).
- В объекте есть несколько пар имя/значение: "orderID": 12345 Свойство с именем "orderId" и целочисленным значением 12345 "shopperName": "Ваня Иванов" свойство с именем "shopperName" и строковым значением "Ваня Иванов" "shopperEmail": "[email protected]" Свойство с именем "shopperEmail" и строковым значением "[email protected]" "contents": [ ... ] Свойство с именем "contents" , значение которого является массивом "orderCompleted": true Свойство с именем "orderCompleted" и логическим значением true
- В массиве "contents" есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: productID , productName , и quantity .
Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:
var cart = { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true };
Сравнение JSON и XMLВо многих отношениях вы можете рассматривать JSON как альтернативу XML, по крайней мере, в сфере веб приложений. Концепция AJAX оригинально основывалась на использовании XML для передачи данных между сервером и браузером. Но в последние годы JSON становится все более популярным для переноса данных AJAX.
Хотя XML является проверенной технологией, которая используется в достаточном количестве приложений, преимуществами JSON являются более компактный и простой для распознавания формат данных.
Вот как будет выглядеть выше приведенный пример объекта на XML:
orderID 12345 shopperName Ваня Иванов shopperEmail [email protected] contents productID 34 productName Супер товар quantity 1 productID 56 productName Чудо товар quantity 3 orderCompleted true
Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON - только 323 символа. Версию XML также достаточно трудно воспринимать.
Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.
Работаем со строкой JSON в JavaScriptJSON имеет простой формат, но создавать строку JSON вручную достаточно утомительно. Кроме того, часто нужно взять строку JSON, конвертировать ее содержание в переменную, которую можно будет использовать в коде.
Большинство языков программирования имеют инструменты для простого преобразования переменных в строки JSON и наоборот.
Создаем строку JSON из переменнойJavaScript имеет встроенный метод JSON.stringify() , который берет переменную и возвращает строку JSON, представляющую ее содержание. Например, создадим объект JavaScript, который содержит сведения о заказе из нашего примера, а затем создадим из него строку JSON:
var cart = { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true }; alert (JSON.stringify(cart));
Данный код выдаст:
Обратите внимание, что метод JSON.stringify() возвращает строку JSON без пробелов. Ее сложнее читать, но зато она более компактна для передачи через сеть.
Существует несколько способов разобрать строку JSON в JavaScript, но самый безопасный и надежный - использовать встроенный метод JSON.parse() . Он получает строку JSON и возвращает объект или массив JavaScript, который содержит данные. Например:
var jsonString = " \ { \ "orderID": 12345, \ "shopperName": "Ваня Иванов", \ "shopperEmail": "[email protected]", \ "contents": [ \ { \ "productID": 34, \ "productName": "Супер товар", \ "quantity": 1 \ }, \ { \ "productID": 56, \ "productName": "Чудо товар", \ "quantity": 3 \ } \ ], \ "orderCompleted": true \ } \ "; var cart = JSON.parse (jsonString); alert (cart.shopperEmail); alert (cart.contents.productName);
Мы создали переменную jsonString , которая содержит строку JSON нашего примера с заказом. Затем мы передаем данную строку методу JSON.parse() , который создает объект, содержащий данные JSON и сохраняет его в переменной cart . Остается только осуществить проверку, выведя свойства объекта shopperEmail и productName массива contents .
В результате мы получим следующий вывод:
В реальном приложении ваш JavaScript код будет получать заказ в виде строки JSON в AJAX ответе от скрипта сервера, передавать строку методу JSON.parse() , а затем использовать данные для отображения на странице пользователя.
JSON.stringify() и JSON.parse() имеют другие возможности, такие как использование возвратных функций для пользовательской конвертации определённых данных. Такие опции очень удобны для конвертации различных данных в правильные объекты JavaScript.
Работаем со строкой JSON в PHPPHP, как и JavaScript, имеет встроенные функции для работы с JSON строками.
Создаем строку JSON из переменной PHPФункция json_encode() принимает переменную PHP и возвращает строку JSON, представляющую содержание переменной. Вот наш пример с заказом, написанный на PHP:
Данный код возвращает абсолютно такую же строку JSON, как и в примере с JavaScript:
{"orderID":12345,"shopperName":"Ваня Иванов","shopperEmail":"[email protected]","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:
Как и для JavaScript данный код выдаст:
[email protected] Чудо товар
По умолчанию функция json_decode() возвращает объекты JSON как объекты PHP. Существуют обобщенные объекты PHP класса stdClass . Поэтому мы используем -> для доступа к свойствам объекта в примере выше.
Если вам нужен объект JSON в виде ассоциированного массива PHP, нужно передать true в качестве второго аргумента функции json_decode() . Например:
$cart = json_decode($jsonString, true);
echo $cart["shopperEmail"] . "
";
echo $cart["contents"]["productName"] . "
";
Данный код выдаст такой же вывод:
[email protected] Чудо товар
Также функции json_decode() можно передавать другие аргументы для указания глубины рекурсии и способов обработки больших целых чисел.
ЗаключениеХотя JSON прост для понимания и использования, он является очень полезным и гибким инструментом для передачи данных между приложениями и компьютерами, особенно при использовании AJAX. Если вы планируете разрабатывать AJAX приложение, то нет сомнений, что JSON станет важнейшим инструментом в вашей мастерской.
JSON (JavaScript Object Notation) - простой формат обмена данными, удобный для чтения и написания как человеком, так и компьютером. Он основан на подмножестве языка программирования JavaScript , определенного в стандарте ECMA-262 3rd Edition - December 1999 . JSON - текстовый формат, полностью независимый от языка реализации, но он использует соглашения, знакомые программистам C-подобных языков, таких как C, C++, C#, Java, JavaScript, Perl, Python и многих других. Эти свойства делают JSON идеальным языком обмена данными.
JSON основан на двух структурах данных:
- Коллекция пар ключ/значение. В разных языках, эта концепция реализована как объект , запись, структура, словарь, хэш, именованный список или ассоциативный массив.
- Упорядоченный список значений. В большинстве языков это реализовано как массив , вектор, список или последовательность.
Это универсальные структуры данных. Почти все современные языки программирования поддерживают их в какой-либо форме. Логично предположить, что формат данных, независимый от языка программирования, должен быть основан на этих структурах.
В нотации JSON это выглядит так:
Объект - неупорядоченный набор пар ключ/значение. Объект начинается с { открывающей фигурной скобки и заканчивается } закрывающей фигурной скобкой. Каждое имя сопровождается: двоеточием, пары ключ/значение разделяются, запятой.
Массив - упорядоченная коллекция значений. Массив начинается с [ открывающей квадратной скобки и заканчивается ] закрывающей квадратной скобкой. Значения разделены, запятой.
Значение может быть строкой в двойных кавычках, числом , true , false , null , объектом или массивом . Эти структуры могут быть вложенными.
Строка - коллекция нуля или больше символов Unicode, заключенная в двойные кавычки, используя \ обратную косую черту в качестве символа экранирования. Символ представляется как односимвольная строка. Похожий синтаксис используется в C и Java.
Число представляется так же, как в C или Java, кроме того, что используется толко десятичная система счисления.
Пробелы могут использоваться между любыми лексемами.
Исключая некоторые детали кодирования, вышеизложенное полностью описывает язык.
Обозначение объектов JavaScript (JSON) - стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера на клиент, поэтому их можно отображать на веб-странице или наоборот). Вы столкнетесь с этим довольно часто, поэтому в этой статье мы даем вам все, что вам нужно для работы с JSON, используя JavaScript, включая разбор JSON, чтобы вы могли получить доступ к данным внутри него и создавать JSON.
Нет, действительно, что такое JSON?Мы собираемся загрузить его на нашу страницу и использовать некоторые изящные манипуляции DOM, чтобы отобразить их, например:
Получение JSONЧтобы получить JSON, мы будем использовать API, называемый XMLHttpRequest (часто называемый XHR ). Это очень полезный объект JavaScript, который позволяет нам делать сетевые запросы для извлечения ресурсов с сервера через JavaScript (например, изображения, текст, JSON, даже фрагменты HTML), что означает, что мы можем обновлять небольшие разделы контента без необходимости перезагрузки всей страницы. Это привело к более отзывчивым веб-страницам и звучит захватывающе, но, к сожалению, выходит за рамки этой статьи, чтобы учить его гораздо более подробно.
Это занимает не менее двух параметров - есть другие доступные параметры. Нам нужен только два обязательных для этого простого примера:
- Метод HTTP, который следует использовать при выполнении сетевого запроса. В этом случае прекрасен, так как мы просто извлекаем некоторые простые данные.
- URL-адрес для запроса - это URL-адрес файла JSON, который мы сохранили ранее.
Здесь мы сохраняем ответ на наш запрос (доступный в свойстве ) в переменной superHeroes ; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаем этот объект двум вызовам функций - первый из них заполнит правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет ее в .
Мы завернули код в обработчике событий, который запускается, когда событие загрузки запускается в объекте запроса (см. ) - это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; делая это таким образом, гарантирует, что request.response определенно будет доступен, когда мы приступим, чтобы попытаться что-то с этим сделать.
Заполнение заголовкаТеперь мы извлекли данные JSON и превратили его в объект JavaScript, давайте воспользуемся им, написав две функции, на которые мы ссылались выше. Прежде всего, добавьте следующее определение функции ниже предыдущего кода:
Function populateHeader(jsonObj) { var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara.textContent = "Hometown: " + jsonObj["homeTown"] + " // Formed: " + jsonObj["formed"]; header.appendChild(myPara); }
Мы назвали параметр jsonObj , чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаем элемент с , устанавливаем его равным свойству squadName объекта, а затем добавляем его в заголовок с помощью . Затем мы выполняем очень похожую операцию с абзацем: создаем его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан как конкатенированная строка, содержащая как homeTown , так и formed свойства объекта.
Создание информационных карт герояЗатем добавьте следующую функцию внизу кода, которая создает и отображает карты супергероев:
Function showHeroes(jsonObj) { var heroes = jsonObj["members"]; for (var i = 0; i < heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }
Для начала сохраним свойство members объекта JavaScript в новой переменной. Этот массив содержит несколько объектов, которые содержат информацию для каждого героя.
Затем мы используем для циклического прохождения каждого объекта в массиве. Для каждого из них мы:
И
- .
- (myList) с помощью appendChild() .
И
- внутри (myArticle), а затем добавляем в . Важное значение имеет порядок, в котором добавляются вещи, так как это порядок, который они будут отображать внутри HTML.
Примечание . Если у вас возникли проблемы после нотации точек / скобок, которые мы используем для доступа к объекту JavaScript, это может помочь открыть файл superheroes.json на другой вкладке или в текстовом редакторе и обратиться к ней, когда вы смотрите на наш JavaScript. Вы также можете обратиться к нашей статье для получения дополнительной информации о нотации точек и скобок.
Преобразование между объектами и текстомВышеприведенный пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя.
В этой статье я хочу рассказать о текстовом формате обмена данными — JSON, а именно — про работу с этим форматом в PHP.
JSON — компактный текстовый формат данных. Может применяться как в интернет-службах передачи данных, так и для хранения информации в структурированном виде.
JSON (англ. JavaScript Object Notation ) — текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком. Как и многие другие текстовые форматы, JSON легко читается людьми.
Несмотря на происхождение от JavaScript (точнее, от подмножества языка стандарта ECMA-262 1999 года), формат считается языконезависимым и может использоваться практически с любым языком программирования. Для многих языков существует готовый код для создания и обработки данных в формате JSON.
Практическая польза использования JSON открывается при использовании технологии AJAX . Формат JSON является более кратким и удобочитаемым по сравнению с XML , является «родным» для Javascript. Кроме того, в JSON-код возможна вставка вполне работоспособных функций.
Да, именно в технологии AJAX , на мой взгляд, его основное применение. Так как технология AJAX подразумевает отправку запроса клиентов на сервер. Далее на сервере запрос обрабатывается, и результат отправляется в ответ клиенту.
Вид данных в формате JSONJSON поддерживает все основные форматы данных: строки, числа, булевые значения, а так же массивы и объекты (комбинации ключ: значение, разделенные запятыми и заключающимися в фигурные скобки).
Приведем пример представления данных в формате JSON:
{"id":"1","name":"ivan","country":"Russia","office":["yandex","management"]}
Давайте разберем, что этой строкой можно передать: человек с именем «ivan», под идентификатором «1», проживающий в стране «Russia» работает в компании «yandex» в отделе «management».
Приведем еще один пример. На сайте имеется форма обратной связи, работающая по технологии AJAX . Посетитель заполняет информацию, далее она отправляется на сервер для проверки, если ошибок не найдено, информация сохраняется в базу данных и отправляется ответ об успешном сохранении. Но если найдены ошибки, то возвращается ответ с типами ошибок.
Пример ответа об ошибке в формате JSON:
{"error":"1","errorcode":["empty_pers","empty_mail","empty_phone","empty_letter","empty_scode"]}
Что, к примеру, означает:
- Необходимо заполнить поле «Контактное лицо»
- Необходимо заполнить поле «E-mail»
- Необходимо заполнить поле «Телефон»
- Введите текст сообщения
- Необходимо заполнить поле «Число на картинке»
В случае, если ошибок нет, то возвращается ответ:
{"error":"0"}
Что говорит об успешной отправке данных.
В PHP, для представления данных в формате JSON служит расширение JSON extension . В версиях PHP старше 5.2.0 поддержка JSON встроена в ядро, в более ранних версиях необходимо подключать к вашему скрипту дополнительный файл с функциями.
Итак в PHP, за работу с данными в формате JSON отвечают две функции: json_encode() и json_decode() .
Конвертация данных в формат JSON $json_data = array ("id"=>1,"name"=>"ivan","country"=>"Russia","office"=>array("yandex"," management")); echo json_encode($json_data); Обратное преобразование данных из формата JSON $json_string="{"id":1,"name":"ivan","country":"Russia","office":["yandex"," management"]} "; $obj=json_decode($json_string);Теперь в $obj будут содержаться JSON данные переведенные в PHP-объект, доступ к которым вы сможете получить следующим образом:
Echo $obj->name; //Отобразит имя ivan echo $obj->office; //Отобразит компанию yandex
Как видите, $obj->office является массивом.
Foreach($obj->office as $val) echo $val;
Работа с JSON позволяет обмениваться с сервером данными в «чистом виде» . Полностью отпадает необходимость пересылать громоздкие куски HTML кода.
Для работы с форматом JSON в JavaScript есть глобальный объект JSON. У объекта JSON есть два метода: stringify() и parse() . Кроме этих двух методов он не содержит больше никакой дополнительной функциональности.
Метод stringify()Метод stringify() преобразует значение JavaScript в строку JSON.
Особенности преобразования:
- Значение undefined , функция или значение типа symbol , встреченные во время преобразования, будут либо опущены (если они найдены в объекте), либо превращены в null (если они найдены в массиве).
- Члены прототипа и неперечислимые свойства игнорируются.
- Массив определяет набор свойств объекта, которые будут включены в JSON-строку. В качестве значений массива указываются строки, соответствующие именам свойств преобразуемого объекта.
- Функция позволяет заменить значения свойств объекта в JSON-строке. Функция должна содержать два параметра: имя свойства и значение свойства. Имя свойства является строкой. Функция должна возвращать новое значение свойства.
- Если значением параметра является null , то JSON-строка будет включать все свойства объекта.
- Число указывает количество пробелов, используемых в качестве отступа для каждого уровня вложенности. Каждый последующий уровень вложенности дополняется новыми отступами. Например, если в качестве значения параметра используется число 2, то на первом уровне вложенности отступ будет составлять два пробела, на последующем уровне вложенности отступ будет составлять 4 пробела и т. д. Максимальное количество пробелов, которое можно указать - 10. Если указать большее число, оно автоматически уменьшится до 10.
- Строка определяет символ, используемый в качестве отступа для каждого уровня вложенности. Длина строки ограничена 10 символами, если указать строку длиннее, она обрезается до 10 символов. Использование строки также позволяет использовать табуляцию ("\t") в качестве отступа. Каждый последующий уровень вложенности дополняется новыми символами отступа. Например, если в качестве значения параметра указан символ - (дефис), то на первом уровне вложенности в качестве отступа будет использоваться один дефис, на последующем уровне вложенности будет использоваться 2 дефиса и т. д.
JSON-строка.
Пример let person = { name: "Гомэр", age: 40, work: { place: "Атомная станция", location: "Спрингфилд" } } // Пример с одним параметром console.log(JSON.stringify(person)); // "{"name":"Гомэр","age":40,"work":{"place":"Атомная станция","location":"Спрингфилд"}}" // Пример с двумя параметрами (массив) console.log(JSON.stringify(person, ["name", "age"])); // "{"name":"Гомэр","age":40}" // Пример с двумя параметрами (функция) console.log(JSON.stringify(person, function (key, value) { switch (key) { case "name": return "Барт"; case "age": return 10; case "work": return undefined; default: return value; } })); // "{"name":"Барт","age":10}" // Пример с тремя параметрами console.log(JSON.stringify(person, null, 2)); /* { * "name": "Гомэр", * "age": 40, * "work": { * "place": "Атомная станция", * "location": "Спрингфилд" * } * } */ Метод parse()Метод parse() преобразует строку JSON в соответствующее значение JavaScript.
Особенности преобразования:
- Если во время преобразования в строке JSON встретиться значение undefined , то оно будет опущено (не будет включено в результат).
Соответствующее значение JavaScript (примитивное значение, объект или массив).
Пример JSON.parse("{}"); // {} JSON.parse("true"); // true JSON.parse(""); // JSON.parse("null"); // null