Следующий шаг после создание объекта xhr - настройки самого запроса. Для этого нужно использовать метод open.
const xhr = new XMLHttpRequest();
const url = 'https://jsonplaceholder.typicode.com/users';
xhr.open('GET', url); //xhr.open(method, URL, async, user, password);
- method - метод запроса (get, post...);
- URL - адрес, куда надо отправить запрос (только на тот же домен и протокол);
- async - булеан флаг, который указывает, нужно ли обрабатывать запрос асинхронно (по умолчанию стоит true);
- user, password - имя и пароль для авторизации (если нужны).
Чтобы открыть соединение и отправить запрос, используется метод send
xhr.addEventListener('error', () => {
console.log('error');
});
xhr.send();
xhr.send([body])
Опциональный параметр body - тело сообщения (для get запроса не требуется)
Отменить выполнение запроса можно с помощью xhr.abort().
Ответ от сервера будет записан в наш объект xhr, где нам доступны следующие свойства:
- xhr.status - код ответа (200, 400 и т.д.);
- xhr.statusText - текст ответа (‘Not found’, ‘Ok’ и т.д.);
- xhr.responseText - тело ответа - те данные, которые мы попросили у сервера.
Следующий шаг - нам нужно добавить “слушатель” запроса.
xhr.addEventListener('load', () => {
const container = document.querySelector('.container');
let fragment = document.createDocumentFragment();
let arr = JSON.parse(xhr.responseText);
console.log(arr);
arr.forEach(element => {
let p = document.createElement('p');
p.classList.add('item');
p.textContent = element.name;
p.setAttribute("data-phone", element.phone);
fragment.appendChild(p);
});
container.appendChild(fragment);
document.querySelectorAll('.item').forEach( element =>
{
element.addEventListener('click', () => {
let span = document.createElement('span');
span.textContent = ' ' + element.dataset.phone;
element.appendChild(span);
});
}
);
});
Если сервер долго не отвечает, то xhr должен, в конце концов, что-то сделать (например, выдать ошибку “сервер слишком долго не отвечает”). Для задания времени ожидания используется свойство xhr.timeout = ms.
xhr.timeout = 10000; // время ожидания 10 секунд
//Когда timeout истечет, соединение будет разорвано. Момент разрыва можно слушать с помощью события timeout:
xhr.addEventListener('timeout', () => {
console.log('Сервер слишком долго не отвечает');
});