Материалы к уроку
Ресурсы: XMLHttpRequest Использование XMLHttpRequest Объект FormData Из FormData в JSON Заголовки HTTP Список кодов состояния HTTP XMLHttpRequest.readyState
Готовый калькулятор
Одним из самых наглядных примеров работы технологии ajax - это фильтры в интернет-магазинах. Активируя, к примеру, фильтр товара на странице, сама страница не обновляется, а обновляетсяя лишь часть её, контент, связанный, к примеру, с товаром.
Страница сайта делает запрос к серверу и получает часть страницы, только необходимую информацию.
За счёт этого происходит ускорение реакции интерфейса, ведь мы не перезагружаем страницу полностью, уменьшается нагрузка на сервер и экономится траффик пользователя.
Недостатки:
У пользователя должен быть обязательно включен JavaScript и стабильный интернет.
Калькулятор валют с приходящим с сервера курсом
Суть калькулятора: есть два поля, в одно из которых мы вводим числовое значение в рублях, во втором поле будет выводиться результат - числовое значение в долларах.
И мы будем сейчас рассматривать самый первый вариант технологии ajax, где будет реализация с помощью объекта
XMLHttpRequest, он не столь актуален на данный момент, но с ним нужно уметь работать.
За "серверную" часть у нас будет отвечать файлик
current.json, внутри него у нас задан курс валют:
Код
{
"current": {
"usd": 74
}
}
Первым делом получаем данные со страницы:
Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
Вешаем обработчик события
input на первое поле калькулятора (можно как вариант использовать событие
change, когда инпут уходит из фокуса):
Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
});
Далее, при срабатывании события
input (когда пользователь ввел в первое поле какие-то данные), нам нужно сделать запрос на сервер, получить данные о курсе валют от него
Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
});
позволяет собрать нам настройки, которые помогут нам для будущего запроса:
Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
request.open(method, url, async, login, pass);
});
Его первым аргументом будет
method - метод, используемый при запросе (
post, get итд)
Второй аргумент
url это путь к нашему серверу, по которому делается запрос
Третий аргумент
async отвечает за асинхронность (по умолчанию стоит в позиции
true, но если изменить на
false, то пока вам сервер не ответит на ваш запрос, весь следующий код работать не будет)
Ajax-запросы по умолчанию являются асинхронным кодом, поскольку мы посылаем на сервер запросы и совершенно не знаем, сколько времени сервер нам будет отвечать.
Последние два аргумента это логин и пароль, которые в некоторых случаях необходимы для запроса.
Заменим наши аргументы какими-то реальными данными:
Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
request.open('GET', url, async, login, pass);
});
Так как нам нужно получить какую-то информацию с сервера, мы используем тип запроса
get.
Так как мы работаем с локальным проектом, мы будем формировать запрос к нашему файлу
current.json, при этом путь будем прописывать относительно файла
index.html Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
request.open('GET', 'js/current.json');
});
Остальные три аргумента нам в данном случае не понадобятся.
В целом наш запрос настроен, осталось его немного донастроить в плане того, что нам нужно указать что именно мы отправляем, какая это информация, в чём она закодирована и т.п.
Это делается для того, чтобы сервер понимал, что именно он принимает, это json-файл, или какие-то изображения и т.п.
Для этого есть так называемые
HTTP-заголовки. И нам понадобится метод, который называется
setRequestHeader Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
request.open('GET', 'js/current.json');
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
});
Вот теперь мы можем отправить запрос, для этого используется
метод send Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
request.open('GET', 'js/current.json');
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.send();
});
Выше мы рассмотрели методы объекта
XMLHttpRequest, но у него также есть свои свойства.
status - это свойство отражает статус нашего запроса, список кодов состояния можно посмотреть по
ссылке.
statusText - текстовое описание ответа от сервера ("
ОК", "
Not found" и прочее)
response - ответ от сервера, то что мы должны использовать
readyState - содержит текущее состояние нашего запроса
А теперь рассмотрим
события, которые относятся к объекту XMLHttpRequest readystatechange - отслеживает статус готовности нашего запроса в данный текущий момент, мы не можем знать, через какое время нам ответит сервер и это событие следит за свойством
readyState Добавим его в наш скрипт калькулятора:
Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
request.open('GET', 'js/current.json');
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.send();
request.addEventListener('readystatechange', () => {
});
});
Есть также событие
load, оно срабатывает когда наш запрос полностью загрузился и мы получили какой-то результат.
Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
request.open('GET', 'js/current.json');
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.send();
request.addEventListener('readystatechange', () => {
if (request.readyState === 4 && request.status === 200) {
console.log(request.response);
}
});
});
Условие звучит следующим образом: если все данные пришли (статус 4) и наш запрос успешно завершился, то что-то делаем (в нашем случае просто вывели в консоль результат запроса)
Сейчас как только мы начнём вводить в первое поле цифры, в консоли мы получим ответ нашего "сервера", а именно наш объект
json 
Нам остаётся теперь преобразовать полученные данные в обычный объект, который мы уже сможем использовать на странице:
Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
request.open('GET', 'js/current.json');
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.send();
request.addEventListener('readystatechange', () => {
if (request.readyState === 4 && request.status === 200) {
console.log(request.response);
const data = JSON.parse(request.response); // теперь тут обычный объект
inputUsd.value = +inputRub.value / data.current.usd;
} else {
inputUsd.value = 'Что-то пошло не так...';
}
});
});
То есть мы значение, введённое пользователем разделили на значение свойства
usd из объекта из переменной
data.
Округлим получаемое значение до двух знаков после запятой с помощью метода
toFixed Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
request.open('GET', 'js/current.json');
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.send();
request.addEventListener('readystatechange', () => {
if (request.readyState === 4 && request.status === 200) {
console.log(request.response);
const data = JSON.parse(request.response); // теперь тут обычный объект
inputUsd.value = (+inputRub.value / data.current.usd).toFixed(2);
} else {
inputUsd.value = 'Что-то пошло не так...';
}
});
});
Но чаще всего используется не событие
readystatechange, а событие
load Код
'use strict';
const inputRub = document.querySelector('#rub'),
inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input', () => {
const request = new XMLHttpRequest();
request.open('GET', 'js/current.json');
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.send();
request.addEventListener('load', () => {
if (request.status === 200) {
console.log(request.response);
const data = JSON.parse(request.response); // теперь тут обычный объект
inputUsd.value = (+inputRub.value / data.current.usd).toFixed(2);
} else {
inputUsd.value = 'Что-то пошло не так...';
}
});
});
Добавлять комментарии могут только зарегистрированные пользователи.
