run-dev

AJAX в JavaScript: как отправить запрос в JS

AJAX (Asynchronous JavaScript and XML) — это технология, которая позволяет веб-страницам обмениваться данными с сервером в фоновом режиме без полной перезагрузки страницы. Несмотря на устаревшее название, XML сейчас почти не используется, а основным форматом данных стал JSON.

Основные способы отправки запросов в JavaScript

В современном JavaScript существует несколько способов отправки AJAX-запросов:

  • XMLHttpRequest — классический метод, поддерживаемый всеми браузерами.
  • fetch — более современный и удобный API.
  • Библиотеки (например, Axios) — сторонние решения с дополнительными функциями.

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

XMLHttpRequest — это старый, но все еще рабочий способ отправки запросов.

Пример GET-запроса

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

Пример POST-запроса

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onload = function() {
    if (xhr.status === 201) {
        console.log(JSON.parse(xhr.responseText));
    }
};
const data = JSON.stringify({ title: 'foo', body: 'bar', userId: 1 });
xhr.send(data);

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

fetch предоставляет более современный и удобочитаемый способ работы с запросами.

Пример GET-запроса

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));

Пример POST-запроса

fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 })
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));

Обработка ошибок

При работе с AJAX-запросами важно обрабатывать сетевые ошибки и ошибки сервера. В случае с fetch ошибки сети не приводят к отклонению промиса, поэтому проверка response.ok становится обязательной.

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        if (!response.ok) {
            throw new Error(`Ошибка HTTP: ${response.status}`);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Ошибка:', error));

Особенности работы с CORS

При отправке запросов на сторонние домены может возникнуть ошибка, связанная с политикой CORS (Cross-Origin Resource Sharing). Сервер должен явно разрешать выполнение таких запросов с помощью специальных заголовков, например:

Access-Control-Allow-Origin: *

AJAX в JavaScript — это гибкий способ взаимодействия клиента с сервером. Для простых задач подойдет fetch, а для максимальной совместимости — XMLHttpRequest. Выбор метода зависит от требований проекта, уровня поддержки браузеров и удобства работы с кодом.

Больше записей