Ajax означает асинхронный JavaScript и XML. В JavaScript есть способы выполнения асинхронных запросов. У нас есть метод старой школы XHR (XMLHttpRequest), популярный $.ajax() jQuery и потрясающее использование Fetch API. В этом посте мы рассмотрим эти три метода. Но прежде чем идти дальше, нам нужно понять, что означает асинхронный запрос.

Что мы рассмотрим -

  • Значение асинхронного запроса
  • Как сделать асинхронный запрос с помощью объекта XMLHttpRequest
  • Как сделать асинхронный запрос с помощью jQuery
  • Как сделать асинхронный запрос с помощью Fetch API
  • Заключительный, хотя и уберите часть фактов

Давайте начнем, не теряя времени 😊

Асинхронный запрос — это метод передачи данных, при котором клиент (машина пользователя) запрашивает некоторые данные на сервере или в некоторой базе данных. Но вместо того, чтобы ждать ответа, клиент продолжает заниматься другими делами.

Эти «другие» вещи, которые клиентская машина продолжает делать, не позволяют пользователю узнать, что что-то происходит под капотом.

Этот метод используется для решения проблемы перезагрузки страницы, тем самым обеспечивая приятный пользовательский опыт.

Если вы хотите узнать больше об асинхронных запросах, перейдите по этой ссылке. А если нет, то теперь давайте перейдем к главному бизнесу сегодняшнего дня.

Хорошо. Сначала мы рассмотрим метод старой школы — XHR, что означает XMLHttpRequest.

XHR — это объект JavaScript, который используется для выполнения синхронных и асинхронных операций.

Важный факт, который мы должны отметить, заключается в том, что XML — это тип файла, который изначально был вытеснен XMLHttpRequest Javascript.

XMLHttpRequest подобен другим объектам Javascript, таким как объект документа. Объект XMLHttpRequest поддерживает не только типы файлов XML. Он поддерживает другие типы файлов, такие как JSON, изображения и т. д.

Кроме того, как и другие объекты JavaScript, XHR имеет ряд методов. Самым важным из них является метод .open(), который используется для инициализации запроса. Он имеет несколько параметров, наиболее важными из которых являются первые два — метод HTTP и URL-адрес запроса.

Объект XHR имеет другие методы, такие как .onload , .onerror, метод .send и т. д.

Пример кода:

const cakeRequest = new XMLHttpRequest(); 
cakeRequest.onload = function bakeCake(){//Do something}; cakeRequest.onerror = function(err){//Log err message}; cakeRequest.open('GET', `https://mordernweb.com); cakeRequest.send();

Теперь считается, что идея ясна. Если вам интересно узнать больше об этих методах, использованных выше, посетите документ MDN XMLHttpRequest.

Пришло время поговорить о втором. Использование $.ajax() из jQuery для выполнения асинхронных запросов. Этот метод так популярен, потому что jQuery сама по себе является библиотекой, облегчающей жизнь разработчика.

При таком подходе для выполнения запроса требуется более короткий код. Одна вещь, которую мы должны здесь усвоить, заключается в том, что даже несмотря на то, что запрос выполняется с использованием библиотеки, XHR по-прежнему используется под капотом библиотеки.

Вы можете рассматривать использование объекта XHR как выполнение чего-то самостоятельно. Тогда использование jQuery рассматривается как плата профессионалу, который сделает то же самое за вас. Единственная разница здесь в том, что даже если вы знаете, как делать вещи лучше, чем профессионал, он (профессионал) делает работу быстрее. Почему бы и нет? Ведь это его специализация.

Пример кода:

$.ajax({ url: `https://mordernweb.com` }).done(addNewPost); 
function addNewPost(){ //do something here }

Теперь мы все видим, что использование $.ajax() делает код короче и проще.

.done() используется для выполнения каких-либо действий с результатом запроса (в данном случае с ответом).

Подробнее о запросе $.ajax

Пока все выглядит круто. Теперь пришло время поговорить об Fetch API.

Fetch API — это современный способ выполнения асинхронных запросов в JavaScript. В этом много всего из-за того, насколько это потрясающе.

Некоторые возможности Fetch API

  • Не требует HTTPS
  • Он поддерживает операцию CORS (обмен ресурсами между источниками)
  • Когда он используется с сервис-воркером, для него требуется HTTPS-соединение — хотя эта функция относится к сервис-воркеру.
  • Поскольку он не поддерживается несколькими браузерами, ему нужен полифилл.
  • Fetch API основан на промисах

Вау! Это слишком много для этого поста. Возможно, мы поговорим о Fetch API (и этих функциях) позже.

Я надеюсь, вы не считаете эти функции неинтересными для Fetch API. Тебе не следует. Потому что API такой классный. Именно эти особенности делают его таким потрясающим.

Пример кода:

fetch('https://mordernweb.com') .then(function(response) { 
    // Do stuff with the response })
.catch(function(error) { 
    console.log('Looks like there was a problem: \n', error); });

.then() — это «обещание», о котором мы говорили. .cache() используется для обработки ошибок, если запрос не был успешным.

Чтобы узнать больше о Fetch API, перейдите к разделу Работа с Fetch API. Конечно, вы бы увидели, насколько хорош API.

Убери кусочек факта 👌

Теперь, когда мы рассмотрели три способа выполнения асинхронного запроса, вам осталось выбрать тот, который вы предпочитаете. Лично я предпочитаю использовать Fetch API.

Три из этих методов могут позволить вам получить некоторые данные из некоторой базы данных или сервера и использовать данные так, чтобы пользователь не знал, что происходит в фоновом режиме.

Это повышает эффективность сайта и в то же время повышает удобство работы пользователей. Меньше перезагрузки страницы, качественный пользовательский опыт. Круто, не правда ли?

Нам всем предлагается попробовать любой из этих методов выполнения асинхронного запроса в JavaScript.

Спасибо за прочтение и обязательно вернитесь в следующий раз 😍

Первоначально опубликовано по адресу https://www.mordernweb.com/post/ajax-how-to-make-asynchronous-requests-in-javascript/.