Сайт о телевидении

Урок, в котором рассматривается, что такое JSON и какие он имеет преимущества по сравнению с другими форматами данных.

Понятие JSON

JSON (JavaScript Object Notation) - это текстовый формат представления данных в нотации объекта JavaScript.

Это означает то, что данные в JSON организованы, так же как и в объекте JavaScript. Но в отличие от последнего формат записи JSON имеет некоторые особенности, которые будут рассмотрены немного позже.

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

Структура формата JSON

Кто знаком с процессом создания объектов в JavaScript, не увидит ни чего нового в структуре формата JSON. Это связано с тем, что структура JSON соответствует структуре объекта JavaScript с некоторыми ограничениями.

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

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

В вышеприведенной записи видно, что ключ отделяется от значения с помощью знака двоеточия (:). При этом ключ в объекте JSON обязательно должен быть заключен в двойные кавычки. Это первая особенность JSON, которая его отличает от объекта JavaScript . Т.к. в объекте JavaScript ключ (свойство объекта) не обязательно должен быть заключён в двойные кавычки.

Например, структура объекта, которая является валидной с точки зрения JavaScript и не валидной с точки зрения JSON:

Var person = { name: "Иван"; } // объект JavaScript

Предупреждение: имя ключу старайтесь задавать так чтобы не усложнить доступ к данным, т.е. при составлении имени предпочтительно придерживаться верблюжьей нотации или использовать для соединения слов знак нижнего подчёркивания ("_").

Значение ключа в JSON может быть записано в одном из следующих форматов: string (строкой), number (числом), object (объектом), array (массивом), boolean (логическим значением true или false), null (специальным значением JavaScript).

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

Var person = { "name" : "Иван"; "setName": function() { console.log(this.name); } } // объект JavaScript

Для отделения одного элемента (пары ключ-значение) от другого используется знак запятая (,).

Например, рассмотрим JSON, состоящий из различных типов данных.

Внимание: формат представления данных JSON не допускает использование внутри своей структуры комментариев.

Работа с JSON в JavaScript

В отличие от объекта JavaScript JSON представляет собой строку.

Например:

// например переменная personData, содержит строку, которая представляет из себя JSON var personData = "{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog": null}";

Работа с JSON обычно ведётся в двух направлениях:

Парсинг - это перевод строки, содержащей JSON, в объект JavaScript.

Конвертирование объекта JavaScript в строку JSON. Другими словами, это действие выполняет преобразование обратное парсингу.

Парсинг JSON

Парсинг JSON, т.е. перевод строки JSON в объект JavaScript, осуществляется с помощью метода eval() или parse() .

Использование метода eval():

// переменная person - это объект JavaScript, который получен путём выполнения кода (строки) JSON var person= eval("("+personData+")");

Использование метода JSON.parse():

// переменная person - это объект JavaScript, который получен путём парсинга строки JSON var person = JSON.parse(personData);

Конвертирование объекта JavaScript в строку JSON

Перевод объекта JavaScript в строку JSON осуществляется с помощью метода JSON.stringify() . Данный метод осуществляет действие обратное методу JSON.parse() .

Var personString = JSON.strigify(person);

Преимущества формата JSON

Формат представления данных JSON имеет следующие преимущества:

• удобные и быстрые в работе методы, предназначенные для конвертации (парсинга) строки JSON в объект JavaScript и обратно;
• понятная и простая структура данных;
• очень маленький размер по сравнению с другими форматами данных (например XML). Это связано с тем, что формат JSON содержит минимальное возможное форматирование, т.е. при его написании используется всего несколько специальных знаков. Это очень важное преимущество, т.к. данные представленные в формате JSON будут быстрее загружаться, чем, если бы они были бы представлены в других форматах.

Из-за того что данный формат имеет очень много преимуществ он стал применяться не только в JavaScript, но и во многих других языках, таких как C, Ruby, Perl, Python, PHP и т.д.

Сравнение форматов JSON и XML

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

При передаче некоторых данных размер JSON будет значительно меньше, чем размер XML.

JSON имеет более удобные методы конвертации в структуры данных JavaScript, чем XML.

JSON более просто создавать, чем XML.

Работа с данными JSON после парсинга осуществляется как с объектом JavaScript.

//JSON var personData = "{"name":"Иван","age":37,"mother":{"name":"Ольга","age":58},"children":["Маша","Игорь","Таня"],"married": true,"dog": null}"; //Объект JavaScript person var person = JSON.parse(personData);

Рассмотрим основные моменты:

//получить значения ключа (свойства) name person.name; person["name"]; //получить значения ключа (свойства) name, находящегося в объекте mother person.mother.name; //удалить элемент age delete(person.age) //добавить (или обновить) ключ (свойство) person.eye = "карие"; //при работе с массивами необходимо использовать методы, предназначенные для работы именно с массивами //удалить 1 элементиз массива (метод splice) person.children.splice(1,1) //добавить элемент в массив (метод push) person.children.push("Катя");

Для перебора элементов в объекте можно использовать цикл for..in:

For (key in person) { if (person.hasOwnProperty(key)) { //ключ = key //значение = person console.log("Ключ = " + key); console.log("Значение = " + person); } // если объект person имеет key (если у person есть свойство key) } // перерабрать все ключи (свойства) в объекте

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

For (var i=0; i

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 .

Создание объекта placeholder

Давайте создадим более реалистичный пример: вставим наши 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+="

"; document.getElementById("placeholder").innerHTML=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+="

"; document.getElementById("placeholder").innerHTML=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) – легкий формат представления данных, основанный на подмножестве синтаксиса 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 является частью стандарта ECMAScript начиная с 1999 года, когда ECMA определила функцию eval() воспринимающую формат. Он стал набирать популярность вместе с нарастающим успехом Ajax. Слово JSON часто появляется когда кто-нибудь заводит речь об Ajax. Известно, что JSON является другим форматом данных, что он замещает XML, и что многие программисты активно поддерживают его. Но что такое в действительности JSON и в чем его преимущества?

Почему JSON?

Преимущество JSON заключается в том, что он распознается в JavaScript. Нет необходимости разбирать документ, как это происходит с XML, для передачи данных через интернет.

JSON и XML

Преимущества JSON:

• Простой для чтения и понимания.
• Простой для использования.

Преимущества XML:

• Имеет возможности расширения

И XML и JSON имеют возможность интегрировать большой объем данных в бинарной форме.

Синтаксис JSON

Компоненты JSON:

• Объекты: содержат объекты или атрибуты.
• Скалярные переменные: число, строка, логическая переменная.
• Массив.
• Литеральные значения: null , true , false , "строка символов ", и числовые значения.

Объект

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

"имя" : "значение"

Синтаксис объекта:

{ элемент, элемент, .... }

Массив

Набор значений, разделенных запятой.

[ значение, значение, ....]

Значение

Значение может быть: объектом, массивом, литеральным значением (строка, число, true , false , null ).

Для создания JSON файла больше ничего не нужно!

Пример JSON файла

Простой пример структура меню. В данном объекте содержатся атрибуты и массив, который включает другие объекты строки меню.

{ "menu": "Файл", "commands": [ { "title": "Новый", "action":"CreateDoc" }, { "title": "Открыть", "action": "OpenDoc" }, { "title": "Закрыть", "action": "CloseDoc" } ] } Эквивалент на XML: Файл Новый CreateDoc Открыть OpenDoc Закрыть CloseDoc

Как использовать формат

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

Клиентская часть (браузер)

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

Серверная часть

Файл JSON используется различными программными языками, включая PHP и Java , благодаря наличию парсеров, которые позволяют получать содержимое и даже конвертировать его в классы и атрибуты языка. На сайте JSON можно найти парсеры для многих языков программирования.

Обмен данными

• с использованием XMLHttpRequest.

Файл JSON обрабатывается функцией JavaScript eval() . Отправка файла на сервер может быть выполнена с помощью XMLHttpRequest . Файл отправляется как текстовый и обрабатывается парсером языка программирования, который используется на сервере.

Пример

Код XMLHttpRequest:

Var req = new XMLHttpRequest(); req.open("GET", "file.json", true); req.onreadystatechange = myCode; // обработчик req.send(null);

Обработчик JavaScript:

Function myCode() { if (req.readyState == 4) { var doc = eval("(" + req.responseText + ")"); } } Использование данных: var menuName = document.getElementById("jsmenu"); // ищем поле menuName.value = doc.menu.value; // назначаем значение полю Как получать данные: doc.commands.title // читаем значение поля "title" в массиве doc.commands.action // читаем значение поля "action" в массиве

Знакомые с программированием люди сразу узнают файлы с расширением 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 – обычные текстовые документы, которые могут обрабатывать не только описанные в статье программы, а и куча других, в том числе и его бесплатные аналоги и . Высокая вероятность того, что с такими файлами смогут справиться и .