Следующий шаг после создание объекта 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('Сервер слишком долго не отвечает');
});