Json данные через обычную форму. Основы работы с JSON
За счёт своей лаконичности по сравнению с XML , формат JSON может быть более подходящим для сериализации сложных структур. Если говорить о веб-приложениях, в таком ключе он уместен в задачах обмена данными как между браузером и сервером ( AJAX ), так и между самими серверами (программные HTTP-интерфейсы).
Поскольку формат JSON является подмножеством синтаксиса языка JavaScript, то он может быть быстро десериализован встроенной функцией eval (). Кроме того, возможна вставка вполне работоспособных JavaScript-функций. В языке PHP , начиная с версии 5.2.0, поддержка JSON включена в ядро в виде функций json_decode() и json_encode(), которые сами преобразуют типы данных JSON в соответствующие типы PHP и наоборот.
СинтаксисJSON -текст представляет собой (в закодированном виде) одну из двух структур:
Это универсальные структуры данных: как правило, любой современный язык программирования поддерживает их в той или иной форме. Они легли в основу JSON , так как он используется для обмена данными между различными языками программирования.
В качестве значений в JSON используются структуры:
Строка очень похожа на одноимённый тип данных в языках С и Java. Число тоже очень похоже на С- или Java-число, за исключением того, что используется только десятичный формат. Пробелы могут быть вставлены между любыми двумя синтаксическими элементами.
Следующий пример показывает JSON - представление объекта, описывающего человека. В объекте есть строковые поля имени и фамилии, объект , описывающий адрес , и массив , содержащий список телефонов.
Основные методы для работы с JSON в JavaScript - это:
- JSON.parse - читает объекты из строки в формате JSON.
- JSON.stringify - превращает объекты в строку в формате JSON, используется, когда нужно из JavaScript передать данные по сети.
Создадим базовое web-приложение Tizen и назовем его json1 .
Введем в файле index.html следующий код:
Рис.
27.2.
Немного изменим код нашего сценария:
var numbers = ""; numbers = JSON.parse(numbers); document.write(numbers);
Рис. 27.3.
Рассмотрим более интересный случай:
var user = "{ "name": "Вася", "age": 35, "isAdmin": true, "friends": ["Миша","Маша","Гриша","Гульшат"] }";
user = JSON.parse(user);
strMessage = "Имя: " + user.name + "
" + "Возраст: " + user.age + "
" + "Администратор: " + user.isAdmin + "
" + "Друзья: " + user.friends + "
";
document.write(strMessage);
Рис. 27.4. 2. Создание объекта из строки JSON
Этот пример был позаимствован с сайтаhttp://www.w3schools.com/js/js_validation.asp . Создадим проект json2 . В файле index.tml введем следующий код.
Create Object from JSON String var text = "{"employees":[" + "{"firstName":"John","lastName":"Doe" }," + "{"firstName":"Anna","lastName":"Smith" }," + "{"firstName":"Peter","lastName":"Jones" }]}"; obj = JSON.parse(text); var n=obj.employees.length; strMessage=""; for(i=0;i "2013-10-10", "EndDate" => "2013-10-10", "IDS" => array(1,2,3,4,5,6,7)); // Указание опций для контекста потока $options = array ("http" => array ("method" => "POST", "header" => "Content-Type: application/json; charset=utf-8\r\n", "content" => json_encode($request))); // Создание контекста потока $context = stream_context_create($options); // Отправка данных и получение результата echo file_get_contents("http://test.ru/json.php", 0, $context);
Здесь используется импровизированная структура данных, состоящая из начальной и конечной даты, а также массива номеров некоторых условных записей. Обратите внимание на то, что в заголовке запроса Content-Type указывается тип “application/json”.
Получение данныхДля того чтобы получить переданные данные вышеописанным способом требуется произвести чтение данных из потока ввода “php://input ”.
Используемые функции для принятия данных:
- mixed json_decode
(string json
[, bool assoc
= false [, int depth
= 512 [, int options
= 0 ]]])
Данная функция декодирует строку в формате JSON . В параметре json указывается строка для декодирования. Параметр assoc отвечает за то, будут ли возвращаемые данные преобразованы в ассоциативный массив. Если таковая необходимость имеется, то необходимо указать в качестве значения этого параметра true . Параметр depth указывает на глубину рекурсии. И последний четвертый параметр options содержит битовую маску опций для декодирования. На сегодняшний день поддерживается только JSON_BIGINT_AS_STRING (по умолчанию большие целые числа приводятся к числам с плавающей запятой (float))
- resource fopen
(string filename
, string mode
[, bool use_include_path
[, resource context
]])
Открывает файл и возвращает его дескриптор. Параметр filename это именованный ресурс, указывающий на файл. В параметре mode указывается тип доступа к файлу (см. таблицу со списком возможных режимов для fopen()). Далее идут два необязательных параметра это: use_include_path и context . При установке параметра use_include_path в значение true или 1 и при условии, что в качестве именованного ресурса задан относительный путь, будет осуществлен поиск открываемого файла в списке директорий используемом функциями include и require . На практике этот параметр практически не используется. Параметр context используется для указания контекста ресурса.
- string stream_get_contents
(resource handle
[, int maxlen
= -1 [, int offset
= -1 ]])
Эта функция позволяет получить содержимое потока в виде строки. Параметр handle является ресурсом потока. Параметр maxlen содержит максимальное количество байт для чтения. По умолчанию он установлен в -1, что указывает на получение всех данных. Параметр offset содержит смещение, с которого начнется чтение данных. По умолчанию он также установлен в -1, что означает, что чтение будет произведено с начальной позиции.
Ниже приведен пример получения данных в формате JSON на стороне сервера:
// Открываем на чтение поток ввода $f = fopen("php://input", "r"); // Получаем содержимое потока $data = stream_get_contents($f); if ($data) { // Код обработки print_r(json_decode($data)); }
Полученная структура данных:
StdClass Object ( => 2013-10-10 => 2013-10-10 => Array ( => 1 => 2 => 3 => 4 => 5 => 6 => 7))
Примечание : необходимо учитывать тот момент, что для работы с форматом JSON, данные должны быть в кодировке utf-8.
Предоставленные JSON константы для функции json_encode()
| JSON_HEX_TAG (integer) | Все кодируются в \u003C и \u003E. Доступна начиная с PHP 5.3.0. |
| JSON_HEX_AMP (integer) | Все & кодируются в \u0026. Доступна начиная с PHP 5.3.0. |
| JSON_HEX_APOS (integer) | Все символы ‘ кодируются в \u0027. Доступна начиная с PHP 5.3.0. |
| JSON_HEX_QUOT (integer) | Все символы " кодируются в \u0022. Доступна начиная с PHP 5.3.0. |
| JSON_FORCE_OBJECT (integer) | Выдавать объект вместо массива при использовании неассоциативного массива. Это полезно, когда принимающая программа или код ожидают объект или же массив пуст. Доступна начиная с PHP 5.3.0. |
| JSON_NUMERIC_CHECK (integer) | Кодирование строк, содержащих числа, как числа. Доступна начиная с PHP 5.3.3. |
| JSON_BIGINT_AS_STRING (integer) | Кодирует большие целые числа в виде их строковых эквивалентов. Доступна начиная с PHP 5.4.0. |
| JSON_PRETTY_PRINT (integer) | Использовать пробельные символы в возвращаемых данных для их форматирования. Доступна начиная с PHP 5.4.0. |
| JSON_UNESCAPED_SLASHES (integer) | Не экранировать /. Доступна начиная с PHP 5.4.0. |
| JSON_UNESCAPED_UNICODE (integer) | Не кодировать многобайтные символы Unicode (по умолчанию они кодируются как \uXXXX). Доступна начиная с PHP 5.4.0. |
Список возможных режимов для fopen() используя mode
| ‘r’ | Открывает файл только для чтения; помещает указатель в начало файла. |
| ‘r+’ | Открывает файл для чтения и записи; помещает указатель в начало файла. |
| ‘w’ | Открывает файл только для записи; помещает указатель в начало файла и обрезает файл до нулевой длины. Если файл не существует — пробует его создать. |
| ‘w+’ | Открывает файл для чтения и записи; помещает указатель в начало файла и обрезает файл до нулевой длины. Если файл не существует — пытается его создать. |
| ‘a’ | Открывает файл только для записи; помещает указатель в конец файла. Если файл не существует — пытается его создать. |
| ‘a+’ | Открывает файл для чтения и записи; помещает указатель в конец файла. Если файл не существует — пытается его создать. |
| ‘x’ | Создаёт и открывает только для записи; помещает указатель в начало файла. Если файл уже существует, вызов fopen() закончится неудачей, вернёт FALSE и выдаст ошибку уровня E_WARNING. Если файл не существует, попытается его создать. Это эквивалентно указанию флагов O_EXCL|O_CREAT для внутреннего системного вызова open(2). |
| ‘x+’ | Создаёт и открывает для чтения и записи; иначе имеет то же поведение что и’x’. |
| ‘c’ | Открывает файл только для записи. Если файл не существует, то он создается. Если же файл существует, то он не обрезается (в отличии от ‘w’), и вызов к этой функции не вызывает ошибку (также как и в случае с ‘x’). Указатель на файл будет установлен на начало файла. Это может быть полезно при желании заблокировать файл (смотри flock()) перед изменением, так как использование ‘w’ может обрезать файл еще до того как была получена блокировка (если вы желаете обрезать файл, можно использовать функцию ftruncate() после запроса на блокировку). |
| ‘c+’ | Открывает файл для чтения и записи; иначе имеет то же поведение, что и ‘c’. |
Урок, в котором рассматривается, что такое JSON и какие он имеет преимущества по сравнению с другими форматами данных.
Понятие JSONJSON (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, т.е. перевод строки 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 после парсинга осуществляется как с объектом 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 .
Давайте создадим более реалистичный пример: вставим наши 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 реально легко читается, и как только вы привыкните в скобкам, вам станет легко кодировать.