JavaScript позволяет нам не только для добавлять интерактивность веб-страницам, но делает возможным выполнять задачи, которые когда-то принадлежали серверам. JSON обеспечивает простой способ для создания и хранения структурированных данных на JavaScript. JSON очень популярен и является отличной альтернативой XML. JSON (объектная нотация JavaScript), как следует из названия, основан на создании объектов javascript. Объектами JavaScript можно легко манипулировать, разбирать, используя тот же JavaScript.
В отличие от XML, JSON предложения легко составляются как человеком, так и компьютером. Данные в JSON формате можно, например, присвоить переменной (этим мы создаем объект); затем эти данные можно прочитать посредством вновь созданного объекта.
var data={ "firstName" : "Ray" }; alert(data.firstName);
Во-первых, мы создаем переменную для хранения наших данных, и затем мы, используя JSON, определяем объект. Наш объект довольно прост: поле firstName и значение Ray . Строки в JSON обязательно заключать в кавычки. Если вы используете числа, кавычки необязательны.
Данный пример выведет в браузере значение свойства firstName .
Давайте создадим более реалистичный пример: вставим наши JSON данные в объект DOM.
var data={"firstName":"Ray"}; document.getElementById("placeholder").innerHTML=data.firstName;
Сейчас мы, вместо вывода предупреждения, помещаем данные внутрь элемента HTML. JSON данные, конечно, могут быть намного сложнее. Давайте попытаемся добавить еще несколько полей.
data={ "firstName":"Ray", "lastName":"Villalobos", "joined":2012 }; document.getElementById("placeholder").innerHTML=data.firstName+" "+data.lastName+" "+data.joined;
Отметьте, что данные JSON, для лучшего понимания, отформатированы определенным образом. Поле "joined" имеет значение 2012, которому не требуются кавычки, так как это число. Давайте рассмотрим что-то более сложное.
Добавляем массивыЧто если мы хотим ввести группу людей...тогда необходимо использовать массивы. Массив в JSON можно создать при помощи квадратных скобок. Давайте посмотрим, как наши данные будут смотреться для нескольких пользователей.
Var data={"users":[ { "firstName":"Ray", "lastName":"Villalobos", "joined":2012 }, { "firstName":"John", "lastName":"Jones", "joined":2010 } ]} document.getElementById("placeholder").innerHTML=data.users.firstName + " " + data.users.lastName+" "+ data.users.joined;
Выглядит немного сложнее, но в действительности не сложно для понимания. Объект JSON создается при помощи фигурных скобок; массив создается при помощи квадратных скобок. Итак, чтобы организовать наши данные, мы создали объект users , в который поместили массив. В массиве располагаются другие объекты. Каждая пара (имя/значение) разделяются запятой.
Обратите внимание, как изменился код для вставки имени. Мы подключили новый объект users и затем при помощи квадратных скобок указали на первый элемент в массиве. Добавим еще один уровень к структуре наших данных.
Var data={"users":[ { "firstName":"Ray", "lastName":"Villalobos", "joined": { "month":"January", "day":12, "year":2012 } }, { "firstName":"John", "lastName":"Jones", "joined": { "month":"April", "day":28, "year":2010 } } ]} document.getElementById("placeholder").innerHTML=data.users.firstName + " " + data.users.lastName+"--"+ data.users.joined.month;
Теперь свойство joined содержит объект с несколькими полями; использовать массив нет необходимости, поэтому мы используем объектную нотацию. Теперь у нас есть данные на нескольких пользователей, пришло время пройтись по каждому пользователю и вывести их в списке.
Реализуем список из пользователей (проходим по объекту JSON)Итак, воспользуемся javascript"ом и создадим список пользователей.
Var data = { "users":[ { "firstName":"Ray", "lastName":"Villalobos", "joined": { "month":"January", "day":12, "year":2012 } }, { "firstName":"John", "lastName":"Jones", "joined": { "month":"April", "day":28, "year":2010 } } ]} var output="
- ";
}
output+="
Для перебора всех свойств объекта существует конструкция for..in :
For(var key in object) { // key - название свойства // object - значение свойства... }
Здесь мы, проходимся по всем элементам массива; сохраняем данные в переменной output и помещаем данные в элемент с id равным placeholder . вы можете сказать, что наши данные строятся немного медленно.
Читаем JSON из внешнего файлаБыло бы неплохо сохранить данные на внешний файл и прочитать их по мере надобности. Я собираюсь использовать библиотеку jQuery и поэтому для начала нам потребуется подключить библиотеку jQuery; затем вызовем функцию getJSON . Вот как выглядит наш код:
JSON Sample $.getJSON("data.json", function(data) { var output="
- ";
for (var i in data.users) {
output+="
- " + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+" "; } output+="
В значительной степени это тот же самый код, но данные выведены наружу. Мы просто обернули все функцией getJSON , которая делает всю тяжелую работу по чтению файла. Файл с данными data.json, предположим, находится в том же каталоге и выглядит следующим образом:
{"users":[ { "firstName":"Ray", "lastName":"Villalobos", "joined": { "month":"January", "day":12, "year":2012 } }, { "firstName":"John", "lastName":"Jones", "joined": { "month":"April", "day":28, "year":2010 } } ]}
Как видите, JSON реально легко читается, и как только вы привыкните в скобкам, вам станет легко кодировать.
Знакомые с программированием люди сразу узнают файлы с расширением JSON. Этот формат – аббревиатура терминов JavaScript Object Notation, и является он по сути текстовым вариантом обмена данными, использующемся в языке программирования JavaScript. Соответственно, справиться с открытием таких файлов поможет либо специализированное ПО, либо текстовые редакторы.
Основной особенностью скриптов в формате JSON является взаимозаменяемость его на формат XML. Оба типа представляют собой текстовые документы, которые можно открывать текстовыми процессорами. Однако начнем мы со специализированного ПО.
Способ 1: Altova XMLSpyДостаточно известная среда разработки, которую используют в том числе и веб-программисты. Эта среда также генерирует файлы JSON, следовательно способна и открывать сторонние документы с таким расширением.
Недостатков у данного ПО два. Первый – платная основа распространения. Пробная версия активна 30 дней, однако для её получения необходимо указать имя и почтовый ящик. Второй – общая громоздкость: человеку, которому просто нужно открыть файл, она может показаться чересчур навороченной.
Способ 2: Notepad++Многофункциональный текстовый редактор — первый из списка подходящих для открытия скриптов в формате JSON.
Плюсов у Notepad++ изрядно – тут и отображение синтаксиса многих языков программирования, и поддержка плагинов, и малый размер… Однако в силу некоторых особенностей работает программа неторопливо, особенно если открыть в ней объемный документ.
Способ 3: AkelPadНевероятно простой и в то же время богатый на возможности текстовый редактор от российского разработчика. В число поддерживаемых им форматов входит и JSON.
Как и Notepad++, этот вариант блокнота также бесплатен и поддерживает плагины. Он работает шустрее, однако большие и сложные файлы может не открыть с первого раза, так что имейте в виду такую особенность.
Способ 4: Komodo EditБесплатное ПО для написания программного кода от компании Komodo. Отличается современным интерфейсом и широкой поддержкой функций для программистов.
В программе, к сожалению, отсутствует русский язык. Однако рядового пользователя скорее отпугнет избыточный функционал и непонятные элементы интерфейса – все-таки этот редактор ориентирован в первую очередь на программистов.
Способ 5: Sublime TextЕще один представитель code-oriented текстовых редакторов. Интерфейс проще, чем у коллег, однако возможности те же. Доступна и портативная версия приложения.
К сожалению, Sublime Text недоступен на русском языке. Недостатком можно назвать и условно-бесплатную модель распространения: свободная версия ничем не ограничена, но время от времени появляется напоминание о необходимости покупки лицензии.
Способ 6: NFOPadПростой блокнот, однако для просмотра документов с расширением JSON тоже подойдет.
NFOPad подходит для просмотра JSON-документов, однако есть нюанс – при открытии некоторых из них программа намертво зависает. С чем связана такая особенность – неизвестно, но будьте внимательны.
Способ 7: БлокнотИ наконец, стандартный текстовый процессор, встроенный в ОС Windows, также способен открывать файлы с расширением JSON.
В завершение скажем следующее: файлы с расширением JSON – обычные текстовые документы, которые могут обрабатывать не только описанные в статье программы, а и куча других, в том числе и его бесплатные аналоги и . Высокая вероятность того, что с такими файлами смогут справиться и .
JSON (JavaScript Object Notation – представление объектов JavaScript) – легкий формат представления данных, основанный на подмножестве синтаксиса JavaScript, а точнее на литералах массивов и объектов. JSON – это альтернатива традиционным форматам (обычный текст или XML), которые используются при обмене данными между сервером и клиентом. В отличие от XML и XML-совместимых языков, которые требуют синтаксического анализа, определения JSON могут быть просто включены в сценарии JavaScript. Формат JSON предложен программистом Дугласом Крокфордом (Douglas Crockford).
Может я зайду издалека, но для того чтобы действительно понять JSON, сначала поймем (вспомним) синтаксис массивов и объектов в литеральной нотации JavaScript.
Массивы как литералы
Массив в JavaScript можно определить с помощью конструктора Array, например так:
Var aData = new Array("строка", true, 43, null);
В JavaScript массивы нетипизированные, поэтому в них можно хранить различные типы данных. В примере массив содержит строку, логическое значение, число и значение null.
Массив же, описываемый как литерал, можно определить с помощью квадратных скобок, внутри – значения элементов массива, через запятую. Вот как будет выглядеть тот же самый массив, но в литеральной нотации:
Var aData = ["строка", true, 43, null];
Обращаться к отдельным элемента массива можно указывая имя массива и номер элемента:
Alert(aData); alert(aData);
Объекты как литералы
Объекты в JavaScript определяются с помощью конструктора Object, например так:
Var oAuto = new Object(); oAuto.firm = "Audi"; oAuto.model = "A6"; oAuto.year = 2008; oAuto.price = 78000;
Тот же самый код, но в литеральной нотации будет выглядеть так:
Var oAuto = { "firm":"Audi", "model":"A6", "year":2008, "price":78000 };
Этот код создает объект со свойствами firm, model, year и price и обращаться к ним можно таким образом:
Alert(oAuto.model); alert(oAuto.year);
но можно использовать и синтаксис массивов обращаясь к свойствам объекта таким образом:
Alert(oAuto["model"]); alert(oAuto["year"]);
В литеральной нотации описания массивов и объектов можно вкладывать друг в друга, создавая таким образом объект массивов или массив объектов . Посмотрите этот код:
Var aAuto = [ { "firm":"BMW", "model":"X5", "year":2007, "price":99000 }, { "firm":"Audi", "model":"A6", "year":2008, "price":78000 }, { "firm":"Volkswagen", "model":"Touareg 7L", "year":2006, "price":45000 } ];
Мы создали массив aAuto, который содержит три объекта. Комбинируя синтаксис обращения к массивам с синтаксисом обращения к объектам попробуем получить год выпуска второго автомобиля:
Alert(aAuto.year); // получаем 2008
Можно сделать наоборот, и описать объект массивов:
Var oAuto = { "firm":["BMW", "Audi", "Volkswagen"], "model":["X5", "A6", "Touareg 7L"], "year":, "price": };
в этом случае обращаемся сначала к объекту, а затем к массиву внутри него:
Alert(oAuto.year); // получаем 2008
Вот такое длинное получилось предисловие, но зато теперь будет гораздо понятнее при чем здесь вообще JSON …
JSON – комбинация массивов и объектов и предназначен только для хранения данных. Как следствие, JSON не может иметь переменных и не допускает никаких операций над ними. Давайте попробуем записать предыдущий пример, используя синтаксис JSON :
{ "firm":["BMW", "Audi", "Volkswagen"], "model":["X5", "A6", "Touareg 7L"], "year":, "price": }
Обратите внимание
, что пропали имя переменной и точка-запятая. Передача такого объекта с использованием HTTP-протокола будет происходить очень быстро, поскольку содержит минимум символов. Получив такие данные на стороне клиента и записав ее в какую-либо переменную (например sData) мы получаем строку информации.
Обратите внимание
: именно строку, а совсем не объект или объект с вложенными в него массивами. Преобразуем строку в объект, используя функцию eval()
.
Var oAuto = eval("(" + sData + ")");
В результате этого получится объект, который мы описали чуть выше.
Преимущество JSON перед XML
Так в чем же все-таки состоит преимущество JSON перед XML?
Здесь речь идет исключительно о преимуществах и недостатках только лишь с точки зрения организации обмена данными в Сети.
В том, что язык XML оказывается очень избыточным при сравнении с JSON. Давайте убедимся в этом на простом примере. Одни и те же данные представим в формате XML и в формате JSON.
BMW X5 2007 99000 Audi A6 2008 78000 Volkswagen Touareg 7L 2006 45000
так это выглядит в формате XML, а ниже – в формате JSON:
{ "general": { "cars":[ { "firm":"BMW", "model":"X5", "year":2007, "price":99000 }, { "firm":"Audi", "model":"A6", "year":2008, "price":78000 }, { "firm":"Volkswagen", "model":"Touareg 7L", "year":2006, "price":45000 } ] } }
При использовании формата JSON выигрыш составит 42 байта, а без учета пробелов и вовсе 86 байт. А если вспомнить еще и о том, что данные в формате JSON не требуют дополнительного синтаксического анализа на стороне клиента – преимущество JSON перед XML в аспекте передачи данных от сервера клиенту становится очевидным…
В этой статье я хочу рассказать о текстовом формате обмена данными — 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 Object Notation) – это формат передачи данных. Из названия видно, что формат основан на языке программирования JavaScript, однако он доступен и в других языках (Python, Ruby, PHP, Java).
JSON использует расширение.json. При использовании его в других файловых форматах (например, .html) строка JSON берётся в кавычки или присваивается переменной. Этот формат легко передаётся между веб-сервером и клиентом или браузером.
Легковесный и простой для восприятия JSON – отличная альтернатива XML.
Данное руководство ознакомит вас с преимуществами, объектами, общей структурой и синтаксисом JSON.
Синтаксис и структура JSONОбъект JSON имеет вид «ключ-значение» и обычно записывается в фигурных скобках. При работе с JSON все объекты хранятся в файле.json, но также они могут существовать как отдельные объекты в контексте программы.
Объект JSON выглядит так:
"first_name" : "John",
"last_name" : "Smith",
"location" : "London",
"online" : true,
"followers" : 987
Это очень простой пример. Объект JSON может содержать множество строк.
Как видите, объект состоит из пар «ключ-значение», которые заключены в фигурные скобки. Большая часть данных в JSON записывается в виде объектов.
Между ключом и значением ставится двоеточие. После каждой пары нужно поставить запятую. В результате получается:
"key" : "value", "key" : "value", "key": "value"
Ключ в JSON находится слева. Ключ нужно помещать в двойные кавычки. В качестве ключа можно использовать любую валидную строку. В рамках одного объекта все ключи должны быть уникальны. Ключ может содержать пробел («first name»), но при программировании могут возникнуть проблемы с доступом к такому ключу. Потому вместо пробела лучше использовать подчеркивание («first_name»).
Значения JSON находятся в правой части столбца. В качестве значения можно использовать любой простой тип данных:
- Строки
- Числа
- Объекты
- Массивы
- Логические данные (true или false)
Значения могут быть представлены и сложными типами данных (например, объектами или массивами JSON).
JSON поддерживает индивидуальный синтаксис каждого из перечисленных выше типов данных: если значение представлено строкой, то оно будет взято в кавычки, а если числом, то нет.
Как правило, данные в файлах.json записываются в столбик, однако JSON можно записать и в строку:
{ "first_name" : "John", "last_name": "Smith", "online" : true, }
Так обычно записываются данные JSON в файлы другого типа.
Записывая данные JSON в столбец, вы повышаете удобочитаемость файла (особенно если данных в файле много). JSON игнорирует пробелы между столбцами, потому с их помощью вы можете разделить данные на удобное для восприятия количество столбцов.
"first_name" : "John",
"last_name" : "Smith",
"online" : true
Обратите внимание: объекты JSON очень похожи на объекты JavaScript, но это не один и тот же формат. К примеру, в JavaScript можно использовать функции, а в JSON нельзя.
Главным преимуществом JSON является то, что данные в этом формате поддерживают многие популярные языки программирования, потому их можно быстро передать.
Теперь вы знакомы с базовым синтаксисом JSON. Но файлы JSON могут иметь сложную, иерархическую структуру, включающую в себя вложенные массивы и объекты.
Сложные типы в JSONJSON может хранить вложенные объекты и массивы, которые будут передаваться в качестве значения присвоенного им ключа.
Вложенные объектыНиже вы найдёте пример – файл users.json, в котором содержатся данные о пользователях. Для каждого пользователя
(«john», «jesse», «drew», «jamie») в качестве значения передаётся вложенный объект, который, в свою очередь, тоже состоит из ключей и значений.
Примечание : Первый вложенный объект JSON выделен красным.
" john" : {
"username" : " John",
"location" : "London",
"online" : true,
"followers" : 987
"jesse" : {
"username" : "Jesse",
"location" : "Washington",
"online" : false,
"followers" : 432
"drew" : {
"username" : "Drew",
"location" : "Paris",
"online" : false,
"followers" : 321
"jamie" : {
"username" : "Jamie",
"location" : "Berlin",
"online" : true,
"followers" : 654
Обратите внимание: фигурные скобки используются и во вложенном, и в основном объекте. Запятые во вложенных объектах используются так же, как и в обычных.
Вложенные массивыДанные можно вкладывать в JSON с помощью массивов JavaScript, которые будут передаваться как значения. В JavaScript в начале и в конце массива используются квадратные скобки (). Массив – это упорядоченный набор данных, который может содержать данные различных типов.
Массив используют для передачи большого количества данных, которые можно сгруппировать. Для примера попробуем записать данные о пользователе.
{
"first_name" : "John",
"last_name" : "Smith",
"location" : "London",
"websites" : [
"description" : "work",
"URL" : "https://www.johnsmithsite.com/"
},
{
"desciption" : "tutorials",
"URL" : "https://www.johnsmithsite.com/tutorials"
"social_media" : [
"description" : "twitter",
"link" : "https://twitter.com/johnsmith"
"description" : "facebook",
"link" : "https://www.facebook.com/johnsmith"
"description" : "github",
"link" : "https://github.com/johnsmith"
Ключам «websites» и «social_media» в качестве значений присвоены массивы, которые помещаются в квадратные скобки.
При помощи вложенных массивов и объектов можно создать сложную иерархию данных.
JSON или XML?XML (eXtensible Markup Language) позволяет хранить данные в удобном для восприятия человека и машины виде. Формат XML поддерживается большим количеством языков программирования.
У XML и JSON очень много общего. Однако XML требует гораздо больше текста, следовательно, такие файлы объёмнее и их сложнее читать и писать. Более того, XML обрабатывается только с помощью интерпретатора XML, а JSON можно обработать с помощью простой функции. В отличие от JSON, XML не может хранить массивы.
Давайте сравним два файла: они содержат одинаковые данные, но первый написан в формате XML, а второй в JSON.
users.xml
John London
Jesse Washington
Drew Paris
Jamie Berlin
users.json
{"users": [
{"username" : "John", "location" : "London"},
{"username" : "Jesse", "location" : "Washington"},
{"username" : "Drew", "location" : "Paris"},
{"username" : "JamieMantisShrimp", "location" : "Berlin"}
JSON – очень компактный формат, и он не требует такого количества тегов, как XML. Кроме того, XML, в отличие от JSON, не поддерживает массивы.
Если вы знакомы с HTML, вы заметили, что формат XML очень похож на него (в частности тегами). JSON проще, требует меньше текста и его проще использовать, например, в приложениях AJAX.
Конечно, формат нужно выбирать в зависимости от потребностей приложения.
Инструменты для JSONJSON обычно используется в JavaScript, однако этот формат широко применяется в других языках программирования.
Больше информации о совместимости и обработке JSON можно найти на сайте проекта и в библиотеке jQuery .
Писать JSON с нуля приходится редко. Обычно данные загружаются из исходников или преобразовываются в JSON. Вы можете преобразовать CSV или данные с разделителями табуляцией в JSON с помощью открытого инструмента Mr. Data Converter . Чтобы преобразовать XML в JSON и наоборот, используйте utilities-online.info . При работе с автоматическими инструментами обязательно проверяйте результат.
Файлы JSON (в том числе и преобразованные данные) можно проверить с помощью сервиса JSONLint . Чтобы протестировать JSON в контексте веб-разработки, обратитесь к JSFiddle .
ЗаключениеJSON – простой и легковесный формат данных. Файлы JSON легко передавать, хранить и использовать.
Сегодня JSON часто используется в API.
