В этой статье мы обсудим наиболее распространенные способы отправки запросов AJAX, которые вы часто будете видеть в рабочей среде.

Что такое AJAX?

AJAX расшифровывается как Aсинхронный, JavaScript, Aи XML. Это метод, который позволяет веб-приложениям загружать данные с серверов и выполнять быстрые и поэтапные обновления пользовательского интерфейса без перезагрузки всей страницы браузера. Это делает приложение более быстрым и более отзывчивым на действия пользователя.

Распространенные способы отправки AJAX-запроса

Вот 4 наиболее распространенных способа отправки запросов AJAX.

  • XMLHttpRequest (XHR)
  • jQuery
  • Получить API
  • Аксиос

XMLHttpRequest (XHR)

Объекты XMLHttpRequest используются для связи с сервером. Это самый старый и самый утомительный метод отправки запроса на HTTP-сервер. Он был доступен с тех пор, как в июле 2000 года был выпущен Internet Explorer 5.5, но не был полностью открыт до тех пор, пока в 2005 году не стали популярными AJAX и Web 2.0.

Несмотря на свое название, XHR не привязан конкретно к XML. Его можно использовать для получения данных в других форматах, например. JSON или даже обычный текст.

Как использовать XHR
Отправка XHR включает 5 шагов

  • Создать объект XMLHttpRequest
  • Настройте onload слушателей
  • Откройте запрос
  • Послать запрос

Пример

Вот простой пример отправки запроса GET

const xhr = new XMLHttpRequest();
xhr.onload = function () {
  const data = JSON.parse(this.responseText);
  console.log(data);
}
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1");
xhr.send();

jQuery:

jQuery — одна из самых популярных библиотек JavaScript. Он был выпущен в 2006 году и предназначен для упрощения обхода и манипулирования деревом HTML DOM, а также обработки событий, анимации CSS и Ajax.

jQuery предоставляет множество методов, позволяющих отправлять запросы AJAX на сервер. Он проще, чем XHR, и используется чаще всего. Вы будете часто видеть это в производственной среде.

Пример:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.get("https://jsonplaceholder.typicode.com/todos/1", function(data, status) {
  console.log(data);
});
</script>

Получить API

Fetch API был выпущен в 2015 году как современный преемник XMLHttpRequest. Это довольно просто и использует Promise API для обработки ответов от сервера.

Пример:

fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(function(res) {
  return res.json();
})
.then(function(data) {
  console.log(data);
});

Со стрелочными функциями все выглядит очень просто

fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(res => res.json())
.then(data => console.log(data));

Аксиос:

Axios — это современная библиотека JavaScript, которая использует Promise API для обработки ответа от сервера. Это современная альтернатива ajax-методу jQuery и Fetch API. Он широко используется в современных приложениях.

Пример:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get("https://jsonplaceholder.typicode.com/todos/1")
     .then(res => console.log(res.data));
</script>

Заключение

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

  • Если вы поддерживаете старый веб-сайт, магазин Shopify или сайт WordPress, вам следует использовать метод jQuery потому что, скорее всего, этот сайт уже будет использовать jQuery для других целей, поэтому вы не будете включать какую-либо другую библиотеку
  • Если вы разрабатываете новый веб-сайт с использованием современных библиотек, таких как React или Vue, вам следует использовать Axios, потому что он проще, очень мощен, имеет большую поддержку сообщества, и вы не столкнется с проблемами совместимости браузера.

Я надеюсь, что вы найдете эту статью полезной. Похлопайте ему, чтобы другие тоже его нашли! Не забудьте подписаться на меня на Medium, чтобы ничего не пропустить. Также давайте дружить в LinkedIn.