Урок 1.8: Асинхронный JavaScript и AJAX

Асинхронный JavaScript

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

Асинхронный JavaScript позволяет выполнять операции без блокировки интерфейса пользователя. Вместо того, чтобы ждать завершения операции, JavaScript продолжает работу и уведомляет вас, когда операция завершена.

Примеры асинхронного кода

setTimeout - это асинхронная функция, которая ожидает одну секунду перед вызовом переданной ей функции. В то время как она ждет, JavaScript продолжает работу и вызывает другой код.

console.log('Начало');

setTimeout(function() {
 console.log('Таймер сработал');
}, 1000);

console.log('Конец');

setInterval - это асинхронная функция, которая вызывает переданную ей функцию через определенный интервал времени.

let counter = 0;

const interval = setInterval(function() {
 console.log(counter);
 counter++;
}, 1000);

// остановить интервал через 5 секунд
setTimeout(function() {
 clearInterval(interval);
}, 5000);

fetch - это асинхронная функция, которая отправляет запрос на сервер и возвращает Promise. Promise - это объект, который представляет результат асинхронной операции, которая может быть успешно завершена или завершена с ошибкой.

fetch('https://api.github.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

XMLHttpRequest - это объект, который позволяет отправлять HTTP-запросы и получать ответы без перезагрузки страницы.

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.github.com/users', true);

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error(xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error('Произошла ошибка');
};

xhr.send();

AJAX

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

Пример запроса AJAX с использованием библиотеки jQuery

$.ajax({
  url: 'https://example.com/data',
  method: 'GET',
  success: function(response) {
    console.log('Данные получены:', response);
  },
  error: function(error) {
    console.error('Произошла ошибка:', error);
  }
});

Пример использования Fetch

Fetch API - это новый стандарт для отправки запросов на сервер. Он также позволяет обмениваться данными с сервером без перезагрузки страницы. В отличие от AJAX, Fetch API возвращает объект Promise, что делает его более гибким и удобным в использовании.

Пример запроса Fetch

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log('Данные получены:', data))
  .catch(error => console.error('Произошла ошибка:', error));

Fetch API

Fetch API - это интерфейс JavaScript, который позволяет отправлять запросы на сервер и получать ответы. Он предоставляет более гибкий и удобный способ работы с AJAX.

Fetch API возвращает объект Promise, что делает его более гибким и удобным в использовании. Promise - это объект, который представляет результат асинхронной операции, которая может быть успешно завершена или завершена с ошибкой.

Пример использования Fetch API:

fetch('https://api.github.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Пример использования Fetch API с методом POST

fetch('https://example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Пример использования async/await

async/await - это новый способ работы с асинхронным кодом в JavaScript, который делает его более читаемым и удобным в использовании.

Пример запроса Fetch с использованием async/await

async function getData() {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    console.log('Данные получены:', data);
  } catch (error) {
    console.error('Произошла ошибка:', error);
  }
}

getData();

Заключение

Асинхронный JavaScript и AJAX - это мощные технологии, которые позволяют создавать более динамические и отзывчивые веб-приложения. При использовании этих технологий важно понимать, как они работают, и следовать правилам и лучшим практикам. Fetch API - это новый стандарт для обмена данными с сервером, который делает работу с AJAX более удобной и гибкой. async/await - это способ работы с асинхронным кодом, который делает его более читаемым и удобным в использовании.