Отправка данных формы с помощью POST и XMLHttpRequest в JS

Быстрый ответ

var xhr = new XMLHttpRequest();
xhr.open("POST", 'your-endpoint-url');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ param1: 'value1', param2: 'value2' }));

Когда вы используете XMLHttpRequest для отправки данных методом POST, вы должны сериализовать ваш запрос с помощью JSON.stringify(). Не забывайте задать Content-Type значение 'application/json', чтобы сервер мог корректно обработать передаваемые данные.

Разбираем код

Установка заголовков запроса

При отправке запросов методом POST важно явно указать серверу, какой тип содержимого передается через MIME-тип 'application/json'. Если вы передаете данные формы, тип можно изменить на 'application/x-www-form-urlencoded'.

Подробнее об этом расскажет наш спикер на видео

Кодирование URL и подготовка данных к отправке

Перед отправкой данных на сервер, они должны быть должным образом подготовлены. Этот процесс называется кодированием, в ходе которого данные конвертируются в строку, подходящую для POST запросов.

function convertParams(params) {
  return Object.keys(params)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
    .join('&');
}
// Вот так данные преобразуются в строку запроса.

Отслеживание изменений состояния

onreadystatechange позволяет отслеживать статус выполнения запроса. Завершение можно проверить по условию readyState == 4, после чего обрабатывать полученный ответ в зависимости от статуса this.status.

xhr.onreadystatechange = function() {
  if (this.readyState == 4) {
    if (this.status == 200) {
      // Отлично, запрос успешно выполнен!
    } else {
      // Во время выполнения запроса произошла ошибка.
    }
  }
};

Удобство использования FormData

С помощью объекта FormData можно упростить процесс сериализации данных, особенно при работе с формами в запросах POST. Добавление пар ключ-значение становится также простым, как при заполнении формы в браузере.

var formData = new FormData();
formData.append('param1', 'value1');
formData.append('param2', 'value2');
// Теперь данные готовы к отправке.
xhr.send(formData);

Не забывайте об обработке ошибок

Как в любом хорошем алгоритме, должны присутствовать как моменты успеха, так и неудач. В XMLHttpRequest предусмотрены обработчики событий для успешных операций и ошибок.

xhr.onload = function() { // Запрос успешно выполнен!
  console.log(this.responseText);
};

xhr.onerror = function() { // Произошла ошибка!
  console.error("Похоже, что-то пошло не так с подключением!");
};

Асинхронность XMLHttpRequest

XMLHttpRequest выполняется асинхронно и по умолчанию не ожидает завершения запроса, прежде чем продолжать выполнение кода.

Визуализация

🚀 Клиент (Браузер)
   |
   |  (1) Подготовка и инициализация POST-запроса с данными
   v
💻 Сервер
   |
   |  (2) Обработка полученных данных
   |
   |  (3) Отправка HTTP-ответа
   v
🚀 Клиент (Браузер) – (4) Обработка ответа

• (1) Подготовка данных: let data = JSON.stringify({ key: 'value' });
• (2) Внедрение запроса: let xhr = new XMLHttpRequest();
• (3) Настройка и отправка запроса:

xhr.open('POST', 'url', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(data);

• (4) Обработка ответа: xhr.onload = function() { /* обработать ответ */ };

Продвинутое применение

Давайте углубимся в возможности использования POST-запросов с помощью XMLHttpRequest, чтобы лучше понять и исследовать их практическое применение.

Работаем с JSON

При взаимодействии с API, которые ожидают данные в формате JSON, очень важно правильно сериализовать ваши данные.

xhr.send(JSON.stringify({ user: 'JohnDoe', password: '12345' }));

Не только для отправки данных

XMLHttpRequest — это не только инструмент для отправки данных. Он также может управлять процессом загрузки и в некоторых случаях позволять даже прервать запрос.

xhr.upload.onprogress = function(event) {
  console.log(`Загружено ${event.loaded} из ${event.total} байт`);
  // Статус загрузки данных.
};

xhr.abort(); // Прерывание отправки данных.

Слово о безопасности

Забота о безопасности — это неотъемлемая часть работы с XMLHttpRequest. Необходимо избегать передачи конфиденциальных данных и использовать безопасные токены или аутентификацию OAuth.

Полезные материалы

1. XMLHttpRequest – Web APIs | MDN — подробное руководство по использованию XMLHttpRequest.
2. javascript – Отправка POST-данных при помощи XMLHttpRequest – Stack Overflow — практические примеры использования на Stack Overflow.
3. XMLHttpRequest — хорошо структурированный гид по XMLHttpRequest.
4. Отправка форм с помощью JavaScript – Учебник по веб-разработке | MDN — информация об отправке форм при помощи JavaScript.
5. GitHub – axios/axios: HTTP клиент на основе промисов для браузера и node.js — рассмотрите использование Axios в качестве альтернативы XMLHttpRequest.