В чем разница между форматом запроса и ответа?

Форматы запроса и ответа в HTTP

В веб-разработке формат запроса и формат ответа определяют, как данные кодируются и передаются между клиентом и сервером.

Форматы данных

JSON (JavaScript Object Notation) — самый популярный формат для API:

// Запрос
const request = {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Иван",
    email: "ivan@example.com"
  })
};

fetch("/api/users", request)
  .then(response => response.json()) // Парсим JSON из ответа
  .then(data => console.log(data));

XML — устаревший формат, но всё ещё используется в корпоративных системах:

<?xml version="1.0" encoding="UTF-8"?>
<user>
  <name>Иван</name>
  <email>ivan@example.com</email>
</user>

FormData — для отправки файлов и классических HTML форм:

const formData = new FormData();
formData.append("name", "Мария");
formData.append("file", fileInput.files[0]);

fetch("/api/upload", {
  method: "POST",
  body: formData
  // Не устанавливаем Content-Type — браузер сделает это автоматически
});

HTTP Headers — управление форматом

Content-Type — указывает формат данных в теле запроса:

// JSON
fetch("/api/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ key: "value" })
});

// Form URL-encoded (классические HTML формы)
fetch("/api/form", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "name=John&age=30"
});

// Файлы (multipart/form-data)
fetch("/api/upload", {
  method: "POST",
  body: new FormData(form) // Content-Type установится автоматически
});

Accept — указывает, какой формат ответа ожидает клиент:

fetch("/api/data", {
  headers: {
    "Accept": "application/json" // Я хочу получить JSON
  }
});

Структура HTTP запроса

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json
Content-Length: 27

{"name":"Иван","email":"ivan@example.com"}

Части запроса:

• Request Line — метод, путь, версия HTTP
• Headers — метаинформация (Content-Type, Authorization и т.д.)
• Body — данные в формате, указанном в Content-Type

Структура HTTP ответа

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 35

{"id":1,"name":"Иван","email":"ivan@example.com"}

Части ответа:

• Status Line — версия, код (200, 404, 500), описание
• Headers — метаинформация
• Body — ответные данные

Практические примеры

1. Отправка JSON, получение JSON

async function createUser(userData) {
  const response = await fetch("/api/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(userData)
  });

  if (!response.ok) {
    throw new Error(`Server error: ${response.status}`);
  }

  return await response.json();
}

2. Загрузка файлов

function uploadFile(file) {
  const formData = new FormData();
  formData.append("file", file);
  formData.append("description", "My document");

  return fetch("/api/upload", {
    method: "POST",
    body: formData
  }).then(res => res.json());
}

3. Отправка сложных данных

const complexData = {
  user: {
    name: "Петр",
    email: "petr@example.com"
  },
  metadata: {
    source: "web",
    timestamp: new Date().toISOString()
  },
  tags: ["important", "verified"]
};

fetch("/api/submissions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(complexData)
});

Основные различия

Вывод

Выбор формата зависит от задачи:

• JSON — для современных REST API
• FormData — для загрузки файлов
• XML — если требует интеграция с legacy системами

Понимание различий между форматами критично для работы с API и обработки данных на фронте.