Что такое AJAX и как он работает в JavaScript

AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML»)(по-английски произносится как эй-джэкс, по-русски довольно распространено аякс). Для многих объект XMLHttpRequest и Ajax являются синонимами.

AJAX – не самостоятельная технология, а концепция использования нескольких смежных технологий. В технологии AJAX построена на двух принципах:

• использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью с использованием XMLHttpRequest в JavaScript: свойства, методы и асинхронные запросы
• использование DHTML для динамического изменения содержания страницы;

В качестве формата передачи данных обычно используются Как использовать JSON в JavaScript, PHP или xml.

Читайте также:

• XMLHttpRequest в JavaScript: свойства, методы и асинхронные запросы
• Как использовать JSON в JavaScript, PHP
• jQuery AJAX
• PHP и JavaScript
• Как использовать метод Fetch API в JS

async…await является синтаксическим сахаром над Promise, что делает код асинхронного JavaScript более понятным и удобным для написания. Ключевое слово async указывает, что функция возвращает Promise, а await используется для ожидания выполнения Promise и его результата.

Ключевое слово async используется для определения функции, возвращающей обещание (Promise). Функция, которая имеет async перед своей декларацией, автоматически возвращает Promise.

async function fetchData() { 
return 'Data fetched!';
}

Оператор await работает только в пределах async функций. Он приостанавливает выполнение функции до тех пор, пока переданное обещание не будет выполнено или отклонено, и возвращает его результат.

Вот пример с промисом, выполняемым за 1 секунду:

async function testPromise() { 
 
let promise = new Promise((resolve, reject) => { 
setTimeout(() => resolve("готово!"), 1000) 
}); 
 
let result = await promise; // будет ждать, пока промес не выполнится (*) 
 
alert(result); // "готово!"
}
 
testPromise();

Выполнение функции "приостанавливается" в строке (*) и восстанавливается, когда промес выполнится, а результатом становится result.

Подчеркнем: await буквально приостанавливает выполнение функции до тех пор, пока промес не выполнится, а затем восстанавливает ее с результатом промеса.

Это просто более элегантный синтаксис получения результата промиса, чем promise.then. В частности, так это легче читать и писать.

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