Каким образом отправлять запросы с front на back на чистом js?

Отправка запросов с front-end на back-end с использованием чистого JavaScript может быть выполнена с помощью объекта XMLHttpRequest или с использованием Fetch API. В обоих случаях запросы могут быть отправлены синхронно или асинхронно.

1. Использование объекта XMLHttpRequest:
Объект XMLHttpRequest предоставляет функциональность для создания и отправки XMLHTTP запросов. Чтобы отправить запрос на сервер, нужно выполнить следующие шаги:

- Создать экземпляр объекта XMLHttpRequest:

   var xhr = new XMLHttpRequest();

- Установить метод запроса (GET или POST), URL сервера и асинхронность запроса:

   xhr.open('GET', 'http://www.example.com/api/data', true);

- Установить заголовки, если необходимо:

   xhr.setRequestHeader('Content-Type', 'application/json');

- Установить обработчик события для ответа сервера:

   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       // Обработка успешного ответа от сервера
     }
   };

- Отправить запрос на сервер:

   xhr.send();

2. Использование Fetch API:
Fetch API - новый стандарт в JavaScript, предоставляющий более удобный способ отправки запросов на сервер. Чтобы отправить запрос на сервер, нужно выполнить следующие шаги:

- Вызвать функцию fetch, передавая URL сервера:

   fetch('http://www.example.com/api/data')
     .then(function(response) {
       if (response.ok) {
         return response.json();
       } else {
         throw new Error('Ошибка HTTP: ' + response.status);
       }
     })
     .then(function(data) {
       // Обработка успешного ответа от сервера
     })
     .catch(function(error) {
       // Обработка ошибки
     });

Дополнительные параметры, такие как метод запроса, заголовки и параметры запроса, можно указать вторым аргументом функции fetch.

- Метод запроса и заголовки могут быть указаны следующим образом:

   fetch('http://www.example.com/api/data', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     }
     // дополнительные параметры запроса
   })

В обоих случаях можно использовать различные методы запросов (GET, POST, PUT, DELETE и т.д.), указать необходимые заголовки (Content-Type, Authorization и т.д.), а также передать данные в теле запроса.

Важно отметить, что при отправке запросов с front-end на back-end с использованием JavaScript, вы должны обращать внимание на политику безопасности браузера (CORS) и настройки сервера.