Представим, что нам нужно сделать на сайте кнопку «Показать еще». Она должна загружать дополнительных пользователей к уже имеющемуся списку. Чтобы сделать это, нам нужно обратиться на другой сервер, запросить данные и отобразить их на странице без ее перезагрузки
Для решение такой задачи уже есть специальные механизмы. Они умеют делать запрос на сервер для получение данных. Так они помогают оживить страницу, сделать ее производительнее и улучшить пользовательский опыт.
В этой статье мы ознакомимся с технологий Ajax, которая делает запросы на сервер для получение или отправки данных.
Предыстория
До появления Ajax, для загрузки данных на веб-страницу использовался синхронный подход. При этом, если требовалось загрузить новые данные с сервера, веб-страница полностью перезагружалась.
На примере это выглядело так: на странице есть список пользователей, и мы хотим увидеть дополнительных(обновленных) пользователей. В таком случае, при использовании синхронного подхода, пользователь должен был нажать на кнопку "Показать еще" или перезагрузить страницу, чтобы получить обновленных пользователей. Это вызывало задержку и мигание экрана, что могло негативно сказываться на пользовательском опыте.
С появлением Ajax все изменилось. С помощью асинхронных запросов JavaScript может отправлять запросы на сервер без перезагрузки страницы и получать обновленные данные.
Затем при помощи Javascript можно обновить только соответствующую часть страницы, добавив новых пользователей без перезагрузки всей страницы. Таким образом, пользователь может видеть обновленные данные по мере их загрузки, без необходимости выполнения дополнительных действий или перезагрузки страницы.
Рассмотрим на примере.
Этот новый подход значительно улучшил пользовательский опыт, делая веб-приложения более динамичными и отзывчивыми. Ajax стал широко применяемым и позволяющей разработчикам создавать интерактивные приложения, которые обновляются и загружают данные асинхронно, без прерывания работы пользователя на странице.
Ajax
Чтобы показать список пользователей и загрузить дополнительных пользователей, нам понадобятся способы для отправки и получения данных с сервера или как еще говорят сделать HTTP запрос. В таких случаях мы используем технологию AJAX.
Ajax (Asynchronous JavaScript and XML) - позволяет веб-страницам взаимодействовать с сервером без необходимости обновления всей страницы.
Чтобы загрузить дополнительных пользователей, нужно сделать Ajax-запрос из браузера на бекэнд-сервер, получить пользователей и отобразить их на странице.
Процесс выполнения запроса на сервер выглядит так.
При запуске страницы, браузер делает HTTP запрос на сервер чтобы получить пользователей
Сервер получает запрос от браузера, обрабатывает его и посылает HTTP ответ, т.е наших пользователей
Если ответ успешный то мы получаем пользователей и показываем их на странице, без ее перезагрузки
Если сервер ответил ошибкой, то выводим соответствующее сообщение на странице. Например: “Извините, мы не можем показать список пользователей по техническим причинам. Попробуйте позже.”
Для осуществления вышеуказанных шагов, веб-разработчики используют различные технологии, включая объект XMLHttpRequest.
Объект XMLHttpRequest умеет делать HTTP запросы на сервер при помощи Ajax.
XMLHttpRequest
XMLHttpRequest умеет делать запросы на сервер асинхронно, то есть без блокировки выполнения других операций веб-страницы. Это означает что отправка запроса на сервер не задерживает выполнение остальных операций на странице.
Вместо остановки и блокировки остальных операций на странице, асинхронные запросы работают в фоновом режиме. Это означает, что страница может продолжать свою работу и не останавливается в ожидании ответа от сервера.
Объект XMLHttpRequest встроен в браузер.
Посмотрим, как используется XMLHttpRequest, на примере с пользователями.
// 1. Создаём новый XMLHttpRequest объект
let xhr = new XMLHttpRequest();
// 2. Настраиваем его: GET-запрос по URL /users
xhr.open('GET', 'https://hexlet.io/users');
// 3. Отсылаем запрос на получение пользователей
xhr.send();
// 4. Этот код сработает после того, как мы получим ответ сервера
xhr.onload = function() {
if (xhr.status != 200) { // анализируем HTTP-статус ответа, если статус не 200, то произошла ошибка
alert(`Ошибка ${xhr.status}: ${xhr.statusText}`); // Например, 404: Not Found
} else { // если всё прошло хорошо, выводим пользователей
alert(`Готово, список пользователей: ${xhr.response}`); // response -- это ответ сервера
}
};Подход с использованием XMLHttpRequest считается устаревшим и не используется разработчиками в настоящее время.
Его применение связано с рядом недостатков, таких как сложность использования и необходимость написания большого объема кода для выполнения даже простых запросов.
Это может быть неудобно и затратно, особенно для начинающих разработчиков.
С появлением новых стандартов, разработчики внедрили новый метод который выполняет запросы более гибче и удобнее - метод Fetch.
Fetch
Метод fetch позволяет асинхронно отправлять сетевые запросы на сервер и получать ответы. Этот подход не блокирует основной поток выполнения, что означает, что во время отправки запроса и ожидания ответа приложение может продолжать работу без задержек. Fetch предоставляет более современный и гибкий способ выполнения HTTP-запросов и обработки полученных данных.
Например для выполнение простейшего запроса с использованием XMLHttpRequest нам необходимо написать минимум десять строчек кода, в то время как с fetch всего несколько.
Метод fetch предоставляет более простой и лаконичный синтаксис для выполнения HTTP запросов.
Базовый пример:
let promise = fetch(URL, [options])
URL - URL адрес для отправки запроса
options - дополнительные параметры, где можно указать метод отправки: GET, POST, DELETE, PATCH и заголовки
По умолчанию fetch выполняет GET запрос, если в параметре не указывать его явно, а просто передаем URL адрес.
let promise = fetch(‘https://hexlet.io’)
Теперь когда мы знакомы с базовым синтаксисом, посмотрим как fetch работает. Ниже будет объяснение по каждой строчке кода.
Работа fetch
fetch('https://hexlet.io/users') (1)
.then(response => response.json()) // (2)
.then(users => console.log(users)) // (3)
.catch(error => console.log('Произошла ошибка:', error)); //(4)Пройдемся по каждой строчке кода и посмотрим более детально как оно работает.
fetch('https://hexlet.io/users'):
(1) В данной строке кода мы отправляем HTTP-запрос на сервер, указав URL-адрес 'https://hexlet.io/users'. Эта операция выполняется асинхронно.
Функция fetch возвращает промис(promise) — объект с внутренним состоянием ответа от сервера. Ответ внутри прописа может быть успешным либо выполнен с ошибкой.
.then(response => response.json()):
(2) После успешного выполнения запроса, мы вызываем функцию .then, которая принимает в качестве аргумента результат предыдущей операции. Затем мы используем метод .json() для извлечения данных в формате JSON из полученного ответа.
.then(data => console.log(data)):
(3) В этом шаге мы снова используем .then (шаг 2), чтобы обработать результат предыдущей операции. Здесь мы передаем извлеченные данные в функцию, которая просто выводит их в консоль наших пользователей
.catch(error => console.log('Произошла ошибка:', error));
(4) Если в любом из предыдущих шагов произошла ошибка, мы переходим к блоку .catch. Здесь мы передаем объект ошибки в функцию, которая выводит сообщение об ошибке вместе с самой ошибкой в консоль
Теперь когда мы знаем как сделать простой запрос на сервер, чтобы получить данные, давайте посмотрим как отправить данные на сервер.
Отправка данных на сервер происходит похожим способом, только необходимо указать дополнительные параметры, который мы рассмотрим ниже.
POST запрос на примере добавление нового пользователя.
const dataUser = {
name: 'Olga',
email: 'olga@hexlet.io'
};
fetch('https://hexlet.io/postData', {
method: 'PUT', // Указываем метод PUT для добавления
headers: {
'Content-Type': 'application/json' // Необходимо указать формат json в заголовке
},
body: JSON.stringify(dataUser)// В теле запроса преобразуем объект в JSON и передаем во внутрь
})
.then(response => response.json()) // Вызываем метод json для получения ответа от сервера
.then(result => console.log(result)) // После выполнении запроса(добавление нового пользователя)получаем ответ от сервера о выполнении нашего запроса
.catch(error => console.log('Произошла ошибка:', error)); // Если запрос выполнился не успешно, то сообщаем об этомВ этом примере мы указали метод вставки данных method: 'PUT', так как в этом запросе мы добавляем нового пользователя в базу и дополнительные заголовки 'Content-Type': 'application/json, поскольку отправляем данные(пользователя) в формате JSON
Выводы
Сегодня мы узнали про технологию, которая позволяет асинхронно выполнять HTTP запросы на сервер, без перезагрузки страницы.
Познакомились с устаревшим подходом выполнения запросов через XMLHttpRequest и современным методом fetch.
В целом fetch представляет более удобный и гибкий подход к выполнению HTTP запросов, особенно при использовании современных браузеров.
Благодаря fetch мы можем гибко обрабатывать асинхронные операций и при этом не писать большого количества кода.