Эй, мяу! В этой статье я расскажу о рыночных тенденциях и действительно ли Fetch заменил старую школу, способ AJAX для выполнения вызовов API.

Просто чтобы прояснить ситуацию, вы всегда можете сделать все, что вам нужно, без AJAX, но обычно удобнее получать некоторые данные асинхронно.

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

В двух словах, это использование объекта XMLHttpRequest для связи с серверами. Он может отправлять и получать данные в различных форматах, таких как JSON, XML, HTML и текстовые файлы.

Мы можем интегрировать AJAX со многими технологиями, но для целей этого руководства мы придерживаемся JQuery

XML («x» в AJAX относится к XML) теперь заменяется JSON (нотация объектов JavaScript). Он имеет некоторые встроенные структуры, такие как массивы, но синтаксический анализ и запись выполняются намного быстрее. Несмотря на то, что разработчики используют AJAX с JSON вместо AJAX с XML, название концепции остается AJAX (AJAX означает асинхронный JavaScript и XML). Чтобы реализовать AJAX с JSON, мы обычно оборачиваем его в API, например $.get() в jQuery.

AJAX актуален и сегодня,

Существует много оболочек и модулей AJAX. Если вы хотите узнать больше об AJAX, попробуйте старый метод XMLHttpRequest. Fetch API , – это более новый и удобный способ вызовов Ajax.

Есть много фреймворков, которые уже оборачивают коды AJAX в короткие фрагменты. Одним из примеров может быть Axios Js.

Ajax постепенно заменяется функциями в рамках JavaScript и официальным стандартом Fetch API.

Давайте углубимся, чтобы понять трендовый сдвиг. Мы рассмотрим, чем выборка данных из AJAX отличается от данных, полученных из Fetch API(), разберем различия и почему выборка API() предпочтительнее.

Ajax — модное словечко, означающее «Выполнение HTTP-запроса из JavaScript, не покидая страницы». XMLHttpRequest используется AJAX, вы можете получить этот объект из XMLHttpRequest API.

XMLHttpRequest и fetch — это API-интерфейсы, предоставляемые браузерами, которые позволяют выполнять HTTP-запросы из JavaScript.

Теперь, как говорится, есть 2 встроенных способа совершать вызовы AJAX с сервера.

  • используя API XHR()
  • используя Fetch API()

Мы можем получать данные с помощью AJAX старой школы:

1. By implementing it in Jquery using these methods $.get(), $.post() (these are Jquery AJAX get and post methods)
2. By implementing AJAX in Jquery using XMLHttpRequest object

Приведенное ниже обсуждалось, эти два пункта

  1. Реализуя его в Jquery с помощью этих методов $.get(), $.post() (это методы Jquery AJAX get и post)

В приведенном ниже коде мы реализуем пример JQuery с использованием метода $get AJAX, код извлекает данные из конечной точки API и выводит данные JSON на консоль.

В приведенном ниже коде мы встраиваем setTimeout() внутрь функции Prom(), которая возвращает новый конструктор Promise, который возвращает объект обещания, содержащий параметры разрешения и отклонения, а функция setTimeout() отвечает за получение API-заполнителя JSON с использованием Метод $get (метод $.get() запрашивает данные с сервера с помощью HTTP-запроса GET), который затем передается в консоли в Promise.prototype.then()

2. Путем реализации AJAX в Jquery с использованием объекта XMLHttpRequest

АЯКС-синтаксис

Преимущества АЯКС:

  1. Мы можем добавить конкретное изменение на страницу, и оно будет интегрировано в страницу без внешней загрузки. Через AJAX мы можем получать данные из базы данных и вносить изменения в DOM без перезагрузки страницы.
  2. Асинхронные вызовы AJAX выполняет асинхронные вызовы веб-серверу. Это означает, что клиентские браузеры не ждут поступления всех данных перед началом процесса рендеринга.
  3. AJAX повышает скорость и производительность. Технологии Ajax позволяют приложениям выполнять рендеринг без данных, что снижает нагрузку на сервер внутри запросов. При этом веб-разработчики могут значительно сократить время, затрачиваемое на ответы обеих сторон.

Использование методов AJAX имеет ряд серьезных недостатков, таких как:

При интеграции методов AJAX с JQuery вы поймете, что вам нужно написать больше строк кода, что создает ненужную загрузку файлов и замедляет скорость загрузки.

Чтобы избавиться от этих недостатков, JSE6 представила fetch API(), теперь для выполнения вызовов AJAX в JS использовалась fetch.

Fetch() API

Fetch — это интерфейс для выполнения вызовов AJAX в JavaScript. Он широко реализован современными браузерами и используется для вызова API. Вызов fetch возвращает обещание с объектом Response.

Чего вы можете добиться с помощью выборки, чего нельзя достичь с помощью объекта XHR?

  • Вы можете выполнять no-cors запросов, т.е. можете получать ответ от сервера, который не поддерживает CORS. Вы не можете получить доступ к телу ответа напрямую из JavaScript, но вы можете использовать его с другими API (например, Cache API);

Синтаксис извлечения:

Мы будем извлекать данные из конечной точки API, используя метод fetch() и отображая данные JSON в консоли, в основном, тот же пример кода, который мы обсуждали выше, используя API fetch.

Отображение данных API в DOM с помощью метода GET в fetch API()

Уведомление? как мы достигли того же результата с меньшим количеством строк кода? в этом вся прелесть fetch(),

fetch() позволяет выполнять сетевые запросы, аналогичные XMLHttpRequest (XHR). Основное отличие состоит в том, что API Fetch использует промисы, что делает API более простым и понятным, позволяет избежать ада обратных вызовов и необходимости помнить о сложном API XMLHttpRequest.

Является ли API выборки лучше, чем AJAX?

Fetch совместим со всеми последними браузерами, включая Edge, но не с Internet Explorer. Вам нужно написать дополнительные функции полифилла для достижения совместимости со всеми браузерами. Все функции ES6 + JS не поддерживаются в IE.

Но если вы не хотите писать этот дополнительный полифилл, вы можете продолжать использовать Ajax для обновления веб-страницы. Кроме того, если вы также хотите взаимодействовать с сервером, используйте объект WebSocket.

Однако при выборке вам не нужно использовать какой-либо дополнительный объект для взаимодействия с сервером. Метод fetch() запрашивает сервер через метод fetch и загружает информацию на веб-страницы.

Fetch был попыткой предложить более чистый способ делать вещи, которые не нуждаются в библиотеке, обернутой вокруг XMLHttpRequest, чтобы сделать его приемлемым.

Согласно документации Google Developers, Fetch упрощает выполнение асинхронных запросов и обрабатывает ответы лучше, чем при использовании более старого XMLHttpRequest . Это улучшение по сравнению с XMLHttpRequest API.