Освоение Ajax: Часть 10. Использование JSON для передачи данных (исходники)

Бретт МакЛафлин

Если вы внимательно читаете статьи этой серии, то уже имеете широкое представление о различных форматах данных. Так, сначала мы увидели, что обычный текст и пары "имя/значение" отлично подходят для большинства асинхронных приложений. Можно оформлять данные, например, так:

firstName=Brett&lastName=McLaughlin&email=brett@newInstance.com

И больше ничего не нужно делать. Опытные Web-пользователи и разработчики узнают в этой строке формат, который, вообще говоря, используется для передачи GET-запросов.

Затем мы обратили своё внимание на XML. Достоинства и недостатки этого формата широко обсуждаются, и неудивительно, что он появляется и в XML-приложениях. Если вы вернетесь к предыдущим статьям этой серии, то увидите, каким именно образом XML предоставляет альтернативный формат:

<request>
  <firstName>Brett</firstName>
  <lastName>McLaughlin</lastName>
  <email>brett@newInstance.com</email>
</request>

Это те же данные, что были представлены выше, но сейчас они сохранены в XML. Тут нет ничего выдающегося; это просто другой формат данных, который позволяет использовать XML вместо обычного текста и пар "имя/значение".

В этой статье мы возьмёмся за изучение ещё одного формата данных, называемого JavaScript Object Notation (система обозначений (нотация) объектов JavaScript), или сокращённо JSON. В JSON есть вещи, похожие на уже рассмотренные ранее форматы, и в то же время есть кое-что совершенно особое. Благодаря нему у вас появится ещё одна альтернатива в выборе форматов, а возможность выбора - это всегда хорошо.

Возможность выбора

Перед тем как углубиться в детали JSON, следует понять, зачем вообще нужно тратить ещё две статьи на изучение другого формата данных (да, следующая статья этой серии также будет посвящена JSON), особенно, когда вы уже освоили использование XML и обычного текста с парами "имя/значение". В двух словах это довольно просто: чем шире ваш выбор, тем больше вариантов решения той или иной проблемы вы можете найти, и тем выше шанс найти не просто какое-нибудь, а наилучшее решение.

Краткое резюме по XML и парам "имя/значение"

В этой серии статей мы уже рассмотрели довольно много различных ситуаций, с которыми вы могли бы столкнуться при программировании асинхронных приложений. Среди них были такие, когда наиболее верным решением было бы использовать пары "имя/значение", были также и те, в которых лучше применять XML. Коротко резюмируя изученное, первая мысль, которая должна приходить вам в голову, когда вы стоите перед дилеммой выбора формата - использовать пары "имя/значение". Этот подход почти всегда является самым простым решением для большинства асинхронных приложений и требует от вас только знаний элементарного JavaScript.

Не стоит даже нагружать свою голову мыслями об использовании другого формата, если на то нет веских причин. Понятно, что если вы посылаете информацию серверной программе, которая принимает только XML-формат, то свои данные вам тоже стоит оформлять как XML. В большинстве случаев XML может оказаться полезным, если сервер должен посылать приложению множественные фрагменты данных; другими словами, XML чаще используется для форматирования ответов от сервера к клиенту, чем для форматирования запросов клиента на сервер.

Добавление JSON

При использовании пар "имя/значение" или XML вы фактически с помощью JavaScript берёте данные из приложения и помещаете их в соответствующий формат. При этом JavaScript в основном работает как язык преобразования данных, извлекающий их из Web-форм и конвертирующий в формат, удобный для отправки серверной программе.

Однако иногда JavaScript используется не только как форматирующий язык. В этом случае данными для представления являются объекты JavaScript, а это уже не просто перемещение информации из Web-форм в запросы. В этом случае JavaScript приходится работать больше , так как сначала данные надо извлечь из объектов в JavaScript, а затем преобразовать их в пары "имя/значение" или XML. И вот тут на помощь приходит JSON: он позволяет легко конвертировать JavaScript-объекты в данные, которые можно отправлять как часть запроса (как синхронного, так и асинхронного).

Надо понимать, что JSON не является панацеей; но он, тем не менее, представляет собой отличное решение в некоторых очень специфических ситуациях. Изучите JSON, прочитав эту и следующую статьи, и, если вы в дальнейшем столкнётесь с подобной ситуацией, то у вас уже будет инструмент для её решения.

Основы JSON

В простейшем случае JSON позволяет преобразовывать данные, представленные в объектах JavaScript, в строку, которую можно легко передавать от одной функции к другой или - в случае асинхронного приложения - от Web-клиента к серверной программе. Строка выглядит немного замысловато (скоро вы увидите несколько примеров), но зато её легко может интерпретировать JavaScript. JSON также позволяет формировать более сложные структуры, чем простые пары "имя/значение". Например, можно представлять массивы и сложные объекты, а не только простые списки ключей и значений.

Простой пример JSON

Всё почти элементарно. Например, пара "имя/значение" в JSON выглядит так:

{ "firstName": "Brett" } 

Этот довольной простой пример на самом деле занимает немного больше места, чем при использовании пары "имя/значение":

firstName=Brett

Однако удобство JSON проявляется тогда, когда необходимо объединить несколько пар "имя/значение" в одну строку. Во-первых, вы, по сути, можете создавать своего рода записи с данными, содержащие несколько пар "имя/значение", вот так:

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

Здесь преимущества в синтаксисе JSON по сравнению с парами "имя/значение" проявляются ещё не так явно, но теперь данные значительно проще использовать, да и читаются они немного легче. Например, понятно, что все три пары являются частью одной записи; на связь элементов внутри записи указывают ограничивающие их фигурные скобки.

Массивы значений

Если же вам нужно сформировать некий список значений, то JSON становится не только более удобным для чтения, но и более компактным. Допустим, вы хотите создать список людей. В XML вы столкнулись бы с большим количеством открывающих и закрывающих тэгов, а при использовании обычных пар "имя/значение", которые мы рассматривали в предыдущих статьях этой серии, изобрели бы в итоге свой собственный формат данных, или, возможно, просто преобразовали бы имена ключей, например, к такому виду: person1-firstName.

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

{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
]}

Здесь тоже нет ничего особо сложного. Мы просто получили одну переменную people, а ее значением является массив, содержащий три элемента, каждый из которых - запись о человеке, в которой указаны его имя, фамилия и адрес электронной почты. Этот пример иллюстрирует, как можно объединять записи вместе и как с помощью фигурных скобок можно группировать элементы в одно целое. Конечно, мы можем использовать такой же синтаксис и для описания структуры данных, в которой каждый элемент сам является списком:

{ "programmers": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
 ],
"authors": [
  { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
  { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
  { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
 ],
"musicians": [
  { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
 ]
}

Из примера хорошо видно, что можно создавать структуры данных, в которой каждый элемент основного списка также является списком. Ещё следует отметить, что ключи в парах "имя/значение" различны для каждого элемента основного списка (ключи пар в programmers отличаются от ключей для authors, которые в свою очередь отличаются от ключей для musicians). JSON полностью динамичен и позволяет изменять способ представления данных прямо внутри JSON-структуры.

Если вы захотите сформировать эту структуру данных как-то по-другому, то вам не нужно следовать какой-нибудь предопределённой системе ограничений по работе с JSON-отформатированными данными, так как её просто-напросто нет. Таким образом, в JSON можно не только представлять данные различными способами, но даже использовать несколько способов представления внутри одной структуры.

Использование JSON в JavaScript

После того как мы разобрались с форматом, его можно легко использовать в JavaScript-коде. JSON - это родной формат для JavaScript. Это значит, что для работы с JSON-данными в JavaScript нам не нужен какой-нибудь специальный инструментарий (toolkit) или API.

Присваивание переменной JSON-данных

Например, можно довольно легко создать новую JavaScript-переменную и затем непосредственно присвоить ей строку с данными, отформатированными в JSON. Вот так:

var people =
  { "programmers": [
    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
   ],
  "authors": [
    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
   ],
  "musicians": [
    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
   ]
  }

Здесь нет ничего сложного; переменная people содержит те же самые JSON-отформатированные данные, что мы уже видели. Однако данный пример пока почти бесполезен, так как удобство использования JSON-формата ещё не очевидно.

Доступ к данным

Хотя это может показаться неочевидным, но эта длинная строка сверху - обычный массив, и если вы когда-нибудь работали с массивами в JavaScript, то сможете легко получить доступ к данным. Фактически компоненты имени массива можно разделить просто точками. Так, для доступа к фамилии (lastname) первого элемента в списке программистов (programmers) в JavaScript-программе можно использовать такой код:

people.programmers[0].lastName;

Заметьте, что индексация массива начинается с нуля. Доступ к искомому полю данных осуществляется примерно так: мы начинаем с people; затем движемся к элементу programmers и указываем, что нас интересует первая запись ([0]); наконец, мы получаем доступ к значению по ключу lastName. В результате мы получаем строку "McLaughlin".

Ниже представлено еще несколько примеров для этой же переменной.

people.authors[1].genre			// возвратит строку "fantasy"

people.musicians[3].lastName		// результат не определён (undefined).
  Код ссылается на 4-й элемент в массиве, которого не существует

people.programmers.[2].firstName	//возвратит строку "Elliotte"

Пользуясь этим простым синтаксисом, можно работать с любыми структурами JSON-форматированных данных, и всё это без привлечения каких-либо дополнительных инструментариев (toolkit'ов) или API для JavaScript.

Модификация JSON-данных

Так же как мы получили доступ к данным с помощью точек и скобок, как показано выше, мы можем легко модифицировать данные в нашей переменной:

people.musicians[1].lastName = "Rachmaninov";

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

Обратное преобразование в строку

Конечно же, наши изменения были бы почти бесполезными, если бы мы не могли легко конвертировать данные обратно в текстовый формат. К счастью, в JavaScript это также довольно тривиальная задача:

String newJSONtext = people.toJSONString();

И всё! Мы получили строку, которую можно использовать где угодно - например, мы могли бы использовать её для формирования запроса из Ajax-приложении.

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

String myObjectInJSON = myObject.toJSONString();

В этом заключается самое большое отличие JSON от всех ранее рассмотренных форматов данных. Пользуясь JSON, вы просто вызываете функцию и получаете ваши данные уже отформатированными и готовыми к дальнейшему применению. При использовании же других форматов данных форматирование возлагается на вас. Причём даже если вы решите использовать API типа DOM (Объектная модель документа), который предоставляет функции для преобразования его собственной структуры данных в текст, то вам придётся изучать этот API и использовать его объекты вместо родных объектов и родного синтаксиса JavaScript.

Таким образом, если необходимо работать с большим количеством объектов JavaScript, то JSON определённо будет полезен, так как позволяет легко преобразовывать данные в формат, удобный для отправки их в качестве запросов на сервер.

Заключение

В этой серии статей мы много внимания уделяем различным форматам данных, так как асинхронные приложения по большей части заключают в себе именно работу с данными. Если вы владеете различными инструментами и техниками, позволяющими отправлять и получать любые данные - и делать это наиболее эффективным методом для каждого отдельного типа данных - то можете считать, что вы уже уверенно стоите на пути к профессионализму в Ajax. Добавьте JSON к тому, что вы уже умеете использовать (XML и обычный текст), и вы получите инструментарий для работы с более сложными структурами данных в JavaScript.

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


Страница сайта http://185.71.96.61
Оригинал находится по адресу http://185.71.96.61/home.asp?artId=18552