Одноклассники кнопка мне нравится. Делаем кнопки социальных сетей самостоятельно

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) – формат для обмена данными в текстовом виде. Позволяющий передавать сложные структуры данных в сериализованном виде. Этот формат передачи данных стал настолько популярен, что уже в ядро PHP начиная с версии 5.2.0, были добавлены функции по обработке данных в этом формате. А это значит, что нет необходимости в подключении дополнительных расширений. Формат данных JSON хорошо понятен человеку. Кроме того данный тип обмена данными широко используется между различными API сервисами. А при корректной разработке алгоритмов для обмена информацией, можно получить очень высокий прирост скорости чем, к примеру, при работе с данными в формате XML .

Отправка данных

Отправить данные в формате JSON можно двумя способами: сформировать GET или POST запрос с закодированными данными расположенными в GET или POST переменной или же поместить данные в тело документа. На практике обычно используется второй вариант.

Для произведения отправки данных необходимы нижеперечисленные функции:

• string json_encode (mixed value [, int options = 0 ])

  В качестве параметра value указываются данные которые требуется закодировать. Поддерживается любой тип кроме типа resource . Параметр options содержит битовую маску из возможных предоставленных значений (см. таблицу с предоставленными JSON константами).

• resource stream_context_create (])

  Данная функция предназначена для создания и возврата контекста потока с опциями указанными в параметре options . Необязательный параметр options должен иметь тип ассоциативного массива. Изначально, он пуст. Второй необязательный параметр params также должен являться ассоциативным массивом в формате $data[‘имя’] = значение.

• string file_get_contents (string filename [, bool use_include_path [, resource context [, int offset [, int maxlen ]]]])

  Использование этой функции позволяет получить содержимое файла в виде строки. Параметр filename это имя считываемого файла. В параметре use_include_path начиная с версии PHP 5 можно использовать константу FILE_USE_INCLUDE_PATH для поиска файла в include path. Параметр context представляет ресурс контекста, созданный с помощью функции stream_context_create(). В случае неудавшейся попытки открытия файла, будет возвращено значение false . Параметр offset содержит смещение с которого начнется чтение данных. В параметре maxlen указывается размер получаемых данных.

  Примечание : смещение не указывается при работе, с удаленными потоками.

Ниже приведен пример отправки данных в формате JSON:

// Данные для отправки $request = array("StartDate" => "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 является частью стандарта 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 – обычные текстовые документы, которые могут обрабатывать не только описанные в статье программы, а и куча других, в том числе и его бесплатные аналоги и . Высокая вероятность того, что с такими файлами смогут справиться и .

ECMA-262 1999 года), формат считается языконезависимым и может использоваться практически с любым языком программирования. Для многих языков существует готовый код для создания и обработки данных в формате JSON . Использование

За счёт своей лаконичности по сравнению с XML , формат JSON может быть более подходящим для сериализации сложных структур. Если говорить о веб-приложениях, в таком ключе он уместен в задачах обмена данными как между браузером и сервером ( AJAX ), так и между самими серверами (программные HTTP-интерфейсы).

Поскольку формат JSON является подмножеством синтаксиса языка JavaScript, то он может быть быстро десериализован встроенной функцией eval (). Кроме того, возможна вставка вполне работоспособных JavaScript-функций. В языке PHP , начиная с версии 5.2.0, поддержка JSON включена в ядро в виде функций json_decode() и json_encode(), которые сами преобразуют типы данных JSON в соответствующие типы PHP и наоборот.

Синтаксис

JSON -текст представляет собой (в закодированном виде) одну из двух структур:

Набор пар ключ:значение . В различных языках это реализовано как объект, запись, структура, словарь, хэш-таблица, список с ключом или ассоциативный массив. Ключом может быть только строка, значением - любая форма.

Упорядоченный набор значений. Во многих языках это реализовано как массив, вектор, список или последовательность.

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

В качестве значений в JSON используются структуры:

Объект - это неупорядоченное множество пар ключ:значение, заключённое в фигурные скобки "{ }". Ключ описывается строкой, между ним и значением стоит символ ":". Пары ключ-значение отделяются друг от друга запятыми.

Массив (одномерный) - это упорядоченное множество значений. Массив заключается в квадратные скобки "". Значения разделяются запятыми.

Значение может быть строкой в двойных кавычках, числом, объектом, массивом, одним из литералов: true, false или null. Т.о. структуры могут быть вложены друг в друга.

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

Строка очень похожа на одноимённый тип данных в языках С и Java. Число тоже очень похоже на С- или Java-число, за исключением того, что используется только десятичный формат. Пробелы могут быть вставлены между любыми двумя синтаксическими элементами.

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

Основные методы для работы с JSON в JavaScript - это:

• JSON.parse - читает объекты из строки в формате JSON.
• JSON.stringify - превращает объекты в строку в формате JSON, используется, когда нужно из JavaScript передать данные по сети.

1. Знакомство с методом JSON.parse

Создадим базовое 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