Блог

Как я могу проверить, имеет ли ответ, полученный от XMLHttpRequest, определенный класс или нет?

 async function swipeAction(currentElementObj) {
  var cardId = currentElementObj.getAttribute("value");
  var dataString = {'card': cardId};
  let response = await new Promise(resolve => {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "processes/explore.php", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(dataString));
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 amp;amp; xhr.status == 200) {

        // I WANT TO CHECK SOMETHING LIKE THIS
        if(xhr.response.getElementById("matched").classList.contains('matched')) 
          alert(xhr.response.getElementById("matched").classList);

      }
    }
  });
}
 

В полученном ответе я хочу проверить, имеет ли элемент с идентификатором matched имя класса matched или нет. Однако приведенный выше код не работает. Каким должен быть правильный подход здесь?

Если вы ожидаете простого text/html ответа от сервера, то его обработка может выглядеть так:

 async function swipeAction(currentElementObj) {
  var cardId = currentElementObj.getAttribute("value");
  var dataString = { card: cardId };
  let response = await new Promise((resolve, reject) => {
    try {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "processes/explore.php", true);
      xhr.setRequestHeader("Content-Type", "application/json");

      // add responseType = "document" for response to be parsed into DOM
      xhr.responseType = "document";
      // override response mime type (in case your server sends text/plain)
      xhr.overrideMimeType("text/html");

      xhr.send(JSON.stringify(dataString));
      xhr.onreadystatechange = function () {
        // check for non-empty responseXML property
        if (xhr.readyState == 4 amp;amp; xhr.status == 200 amp;amp; xhr.responseXML) {
          const matched = xhr.responseXML.getElementById("matched");

          if (!matched) return reject("Element not found in response");

          if (matched) {
            alert(matched.classList.contains("matched"));
            resolve(true);
          }
        } else {
          return reject("Incompatible response format");
        }
      };
    } catch (e) {
      reject(e.toString());
    }
  });
}