В этой статье мы обсудим наиболее распространенные способы отправки запросов 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.