Реализация AJAX запросов без jQuery: примеры на чистом JavaScript

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

// Применяем XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open("GET", "your/endpoint", true);

// Ожидаем ответ
xhr.onload = () => {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.response);
    console.log(data);
  } else {
    console.error("Произошла ошибка");
  }
};
xhr.send();

Ключевые понятия здесь — XMLHttpRequest, open(), onload, status и response. Вам необходимо заменить "your/endpoint" на актуальный URL API. Работа с ответом response лежит на ваших плечах.

Старомодный но удобный XMLHttpRequest

Старожил XMLHttpRequest (XHR) сосватывает JavaScript и сервер, передавая HTTP-запросы и получая в замен данные. Это настоящая "магическая сова" в доставке сообщений.

С ветерком readyState

Обработчики событий дают возможность отслеживать изменения в запросе:

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText));
    } else {
      console.error("Ошибка запроса");
    }
  }
};

Здесь мы видим проверку на состояния status и readyState с возможностью обработки ошибок.

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

XHR против класса йоги

Преимущества XMLHttpRequest:

• Большое количество возможностей для управления запросом.
• Полный контроль над процессом обмена данными.

Недостатки:

• Сложность в применении.
• Обработка ошибок может вызывать трудности.

Современность в лице Fetch API

Fetch API – это новейший инструмент запросов, явно превосходящий своего предшественника:

// Пример использования fetch
fetch('your/endpoint')
  .then(response => {
    if (!response.ok) throw new Error('Fetch не удался');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка с Fetch:', error));

Пример с использованием async/await:

// Улучшенный fetch с async/await
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Проблема с fetch');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Ошибка fetch:', error);
  }
}

fetchData('your/endpoint');

Fetch API обеспечивает ясность и читаемость кода.

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

Аналогия AJAX-запроса с отправкой бутылки в море:

 Обычный метод (без jQuery):
 ----------------------------
| Бутылка | Перевозчик | Остров   |
|---------|------------|-----------|
| Запрос  | 🌊 HTTP     | Сервер 🏝️ |
 ----------------------------

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.island.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const treasure = JSON.parse(xhr.responseText);
    // Можно использовать полученные данные
  }
};
xhr.send();

Общие рекомендации

Важные аспекты при работе с AJAX

1. Обязательно работайте над обработкой ошибок.
2. Проводите тестирование в разных браузерах.
3. Учитывайте особенности соединения пользователей.
4. Берегите данные пользователей.
5. Отменяйте ненужные запросы.

Возможные подводные камни!

• CORS: Изучите правила сервера или используйте прокси.
• Обработка данных: Будьте внимательны при приведении типов данных.
• Проблемы с сетью: Будьте готовы к непредвиденным обстоятельствам.

Великолепные сторонние HTTP-библиотеки

Axios – это функциональный инструмент для работы с HTTP-запросами:

axios.get('your/endpoint')
  .then(response => console.log(response.data))
  .catch(error => console.error('Ошибка запроса:', error));

Преимущества Axios:

• Автоматическая обработка JSON.
• Перехват запросов и ответов.
• Возможность отмены запросов.
• Удобное управление ошибками.

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

1. Использование Fetch API – MDN — детальное руководство по Fetch API.
2. XMLHttpRequest – MDN — документация по XMLHttpRequest.
3. Введение в fetch() | web.dev — статья-вводная о Fetch API.
4. GitHub – axios/axios — репозиторий Axios на GitHub.
5. Как оформить XHR в промис? – Stack Overflow — пример наделения XMLHttpRequest свойствами промиса.
6. Возможно, вам и не нужен jQuery — альтернативы для jQuery.
7. Async/await – javascript.info — асинхронность в современном JavaScript.