Что такое JSON и как веб-приложения обмениваются данными

JSON в двух словах

JSON (JavaScript Object Notation) — текстовый формат для передачи данных. Он похож на объекты JavaScript, но это просто строка, которую умеет читать практически любой язык: Python, PHP, Go, Java, C#.

Когда интернет-магазин показывает список товаров, браузер чаще всего получает его с сервера именно в JSON:

{
  "id": 42,
  "name": "Рюкзак",
  "price": 349000,
  "inStock": true,
  "tags": ["школа", "спорт"],
  "discount": null
}

Синтаксис и типы данных

В JSON всего шесть типов:

Строгие правила, которые отличают JSON от JavaScript:

• Ключи — только в двойных кавычках: {"name": "Ali"}, а не {name: 'Ali'}.
• Строки — только в двойных кавычках.
• Нет висячих запятых после последнего элемента.
• Нет комментариев.
• Нет undefined, функций, дат и NaN. Даты передают строкой, обычно в формате ISO 8601: "2026-03-15T10:00:00Z".

Как фронтенд и бэкенд обмениваются JSON

Типичный цикл выглядит так:

1. Фронтенд превращает объект в строку: JSON.stringify().
2. Отправляет её в теле HTTP-запроса с заголовком Content-Type: application/json.
3. Сервер разбирает строку обратно в объект, обрабатывает и отвечает тоже JSON.
4. Фронтенд разбирает ответ: response.json() или JSON.parse().

const res = await fetch('/api/orders', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ productId: 42, qty: 2 }),
});

if (!res.ok) {
  throw new Error(`HTTP ${res.status}`);
}

const order = await res.json();

На сервере в Express то же самое делает одна строка app.use(express.json()): она читает тело запроса с нужным заголовком и кладёт результат в req.body.

Типичные ошибки парсинга

• Unexpected token < in JSON — вместо JSON пришёл HTML. Обычно это страница ошибки 404 или 500, неправильный URL API или редирект на страницу входа. Проверьте вкладку Network в DevTools.
• Unexpected end of JSON input — пустой ответ, например статус 204, или обрезанное тело. Не вызывайте res.json(), если тела нет.
• Одинарные кавычки или висячая запятая — JSON собран вручную строкой. Всегда используйте JSON.stringify, а не конкатенацию.
• Сервер не видит тело запроса — забыли заголовок Content-Type: application/json или middleware для разбора.
• Потеря точности больших чисел — числа больше Number.MAX_SAFE_INTEGER в JavaScript округляются. Большие идентификаторы безопаснее передавать строками.
• Даты приходят строками — это нормально. Преобразуйте их в Date там, где они нужны.

Хорошая привычка — проверять res.ok и Content-Type ответа перед разбором, а входящие данные на сервере валидировать схемой.

JSON, XML и form data

Как выбрать:

• Обычный API — JSON.
• Загрузка файлов — multipart/form-data, а метаданные можно положить в соседнее поле.
• Интеграция со старой системой, которая говорит только на XML, — XML, тут выбора нет.