В мире веб-разработки взаимодействие с серверами является важной частью создания динамических и интерактивных веб-сайтов. Одним из наиболее часто используемых методов отправки запросов к серверу и обработки ответов в JavaScript является использование объекта XMLHttpRequest (XHR). В этой статье мы рассмотрим различные методы обработки ответов сервера с использованием XHR, а также предоставим разговорные объяснения и примеры кода, которые помогут вам легко усвоить эти концепции.

1. Событие onreadystatechange:
   При работе с XMLHttpRequest событие onreadystatechange— ваш лучший друг. Он срабатывает при каждом изменении свойства readyState, что позволяет вам отреагировать соответствующим образом. Вот пример его использования:

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // Handle successful response
  } else {
    // Handle other states and errors
  }
};
xhr.open('GET', '/api/data', true);
xhr.send();

2. Событие onload:
   Событие onloadсрабатывает, когда запрос успешно завершен. Это удобный способ обрабатывать ответы, не беспокоясь о других состояниях:

const xhr = new XMLHttpRequest();
xhr.onload = function() {
  if (xhr.status === 200) {
    // Handle successful response
  } else {
    // Handle error
  }
};
xhr.open('GET', '/api/data', true);
xhr.send();

3. Свойство responseText:
   После получения ответа от сервера вы можете получить доступ к фактическому контенту через свойство responseText. Он содержит ответ в виде строки:

const xhr = new XMLHttpRequest();
xhr.onload = function() {
  if (xhr.status === 200) {
    const response = xhr.responseText;
    // Handle the response text
  } else {
    // Handle error
  }
};
xhr.open('GET', '/api/data', true);
xhr.send();

4. Свойство responseXML:
   Если сервер отвечает содержимым XML, вы можете получить к нему доступ с помощью свойства responseXML. Это позволит вам проанализировать ответ как XML-документ:

const xhr = new XMLHttpRequest();
xhr.onload = function() {
  if (xhr.status === 200) {
    const xmlDoc = xhr.responseXML;
    // Parse and work with the XML response
  } else {
    // Handle error
  }
};
xhr.open('GET', '/api/data', true);
xhr.send();

5. Свойство responseType:
   Иногда вы можете ожидать, что сервер ответит определенным типом данных, например JSON или двоичными данными. В таких случаях вы можете установить свойство responseTypeдля соответствующей обработки ответа:

const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onload = function() {
  if (xhr.status === 200) {
    const jsonResponse = xhr.response;
    // Handle the JSON response
  } else {
    // Handle error
  }
};
xhr.open('GET', '/api/data', true);
xhr.send();

Освоение искусства обработки ответов сервера с помощью XMLHttpRequest имеет решающее значение для каждого разработчика JavaScript. Используя такие методы, как onreadystatechange, onloadи такие свойства, как responseText, responseXMLи responseTypeвы можете эффективно обрабатывать различные состояния и анализировать различные типы ответов. Вооружившись этими знаниями, вы будете готовы создавать интерактивные веб-приложения, которые беспрепятственно взаимодействуют с серверами.