Link Search Menu Expand Document
Philip Pages

AJAX

Встроенный объект в браузера XMLHttpRequest

const request = new XMLHttpRequest();

Первым методом вызывается open который собирает необходимые для запроса настройки.

request.open(method, url, async, login, pass);
  • Первый параметром задается метод (GET, POST и т.п.)
  • Вторым аргументом задается путь к серверу
  • Третьим параметром мы определяем асинхронность (true или false)
  • Последними двумя аргументами указываются логин и пароль

Затем указывается заголовок

request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

И отправляем запрос

request.send();

В качестве параметров send можно указать какие-то данные которые будут отпрвляться на сервер (например при POS запросе)

В качестве ответа от сервера мы получаем:

Вариант с readystatechange:

request.addEventListener('readystatechange', () => {
    if (request.readyState === 4 && request.status === 200) {
        const data = JSON.parse(request.response);
        inputUsd.value = (+inputRub.value / data.current.usd).toFixed(2); // Округляем до двух цифр после запятой
    } else {
        inputUsd.value = "Что-то пошло не так";
    }
});

Вариант с load: Данное событие срабатывает только один раз когда запрос уже полностью готов

request.addEventListener('load', () => {
    if (request.status === 200) {
        const data = JSON.parse(request.response);
        inputUsd.value = (+inputRub.value / data.current.usd).toFixed(2);
    } else {
        inputUsd.value = "Что-то пошло не так";
    }
});