AJAX загрузка
home

JSON простой и универсальный формат передачи данных.

Что такое JSON?

JSON расшифровывается JavaScript Object Notation.

Формат JSON может использоваться с AJAX вместо XML. Поддержка формата JSON встроена в JavaScript.

Многие сервисы предоставляют свои услуги через JSON интерфейс, к примеру Flickr.com предоставляет API, с помощью которого Вы сможете отображать на Вашем сайте картинки имеющиеся у них.

JSON или XML?

Каждый формат имеет свои недостатки и преимущества:

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

  • Простота использования;
  • Упрощенный синтаксис обеспечивающий легкость прочтения кода.

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

  • XML поддерживается почти всеми языками программирования;
  • XML расширяем.

Синтаксис JSON

JSON включает в себя следующие структуры:

Массив

Массив - это список упорядоченных значений. Массив в JSON обозначается квадратными скобками [].

Синтаксис:

[значение1, значение2, значениеN]

Массив в JSON может содержать неограниченное количество значений.

Объект

Синтаксис:

{имя1:значение1, имя2:значение2, имяN:значениеN}

Объект может содержать неограниченное количество пар имя/значения. Каждое из значений само может являться объектом или массивом. Такие объекты или массивы называются вложенными.

{имя1:значение1, 
 имя2:
    {имя2_1:значение2_1,имя2_2:значение2_2}
}

Литералы

Объекты и массивы в JSON являются конструкциями, а литералы непосредственно данными, которые группируются этими конструкциями.

Литералы JSON:

  • Строка;
  • Число;
  • Логическое значение;
  • Значение null.

Синтаксис:

{имя1:"строка", имя2:13, имя3:true, имя4:false, имя5:null}

Сравнение файлов XML и JSON

Файл JSON должен иметь расширение .json.

Ниже приведем сравнение файлов XML и JSON bookbase.json и bookbase.xml содержащих описание книг в книжном магазине.

{
bookbase:[
{
title:"Гарри Поттер и философский камень",
author:"Джоан Ролинг",
cost:500,
quantity:15
},
{
title:"Дракула",
author:"Брэм Стокер",
cost:430,
quantity:5
},
{
title:"Преступление и наказание",
author:"Федор Достоевский",
cost:400,
quantity:10
},
........
]
}

Аналогичный XML файл:

<?xml version="1.0" encoding="UTF-8" ?>
<bookstore>
<book id='1'>
<title>Гарри Поттер и философский камень </title>
<author>Джоан Ролинг</author>
<cost>500</cost>
<quantity>15</quantity>
</book>
<book id='2'>
<title>Дракула</title>
<author>Брэм Стокер</author>
<cost>430</cost>
<quantity>5</quantity>
</book>
<book id='3'>
<title>Преступление и наказание</title>
<author>Федор Достоевский</author>
<cost>400</cost>
<quantity>10 </quantity>
</book>
........
</bookstore>

Обратите внимание: длинна файла bookbase.json 1457, а файла bookbase.xml 2137 символов.

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

Запросим содержимое нескольких тэгов файла bookbase.json из JavaScript.

Пример 

xhttp=new XMLHttpRequest();
xhttp.open('GET','bookbase.json',true);
xhttp.send();
xhttp.onreadystatechange=function()
{
   if (xhttp.readyState==4)
      {
      //Принятое содержимое json файла должно быть вначале обработано функцией eval 
      var json=eval( '('+xhttp.responseText+')' );
      //Далее мы можем спокойно использовать данные
      document.getElementById('wrap').style.dislay='block';
      document.getElementById('res1').innerHTML=json.bookbase[1].title;
      document.getElementById('res2').innerHTML=json.bookbase[1].author;
      document.getElementById('res3').innerHTML=json.bookbase[1].cost;
      document.getElementById('res4').innerHTML=json.bookbase[1].quantity;
      }
}
Попробовать в редакторе

Сделайте сами

Задание 1 обратитесь с помощью AJAX к файлу bookbase.json, считайте его содержимое и:

  • выведите содержимое 4-го тэга author на страницу
  • выведите содержимое 6-го, 7-го и 8-го тэга title на страницу.
  • выведите сумму содержимого 4-го, 7-го, 10-го и 14-го тэга quantity на страницу.

Пример 

<html>
<head>
<script type='text/javascript'>
/* Пишите код здесь */
</script>
</head>
<body>
<!-- Пишите код здесь -->
</body>
</html>
Попробовать в редакторе