Освоєння 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 в запитах і відповідях і перетворювати їх один в одного. Головна мета тут – домогтися гнучкості. Скоро ви зможете використовувати всі ці інструменти спільно, практично в будь мислимій комбінації.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*