HTML в XMLHttpRequest

Спецификация W3C XMLHttpRequest добавляет поддержку разбора HTML в XMLHttpRequest, которая изначально поддерживала только разбор XML. Эта функция позволяет веб-приложениям получать ресурс HTML как обработанный DOM с помощью XMLHttpRequest.

Чтобы получить общее представление о том, как использовать XMLHttpRequest в целом, см. Использование XMLHttpRequest.

Чтобы отговорить от синхронного использования XMLHttpRequest, поддержка HTML недоступна в синхронном режиме. Кроме того, поддержка HTML доступна только в том случае, если свойство responseType установлено в значение "document". Это ограничение предотвращает трату времени на бесполезный разбор HTML, когда устаревший код использует XMLHttpRequest в стандартном режиме для получения responseText для ресурсов text/html. Кроме того, это ограничение предотвращает проблемы с устаревшим кодом, который предполагает, что responseXML является null для страниц с ошибками HTTP (которые часто содержат text/html ответное тело).

Получение ресурса HTML в виде DOM с помощью XMLHttpRequest работает так же, как получение ресурса XML в виде DOM с помощью XMLHttpRequest, за исключением того, что вы не можете использовать синхронный режим и должны явно запросить документ, назначив строку "document" свойству responseType объекта XMLHttpRequest после вызова open(), но перед вызовом send().

const xhr = new XMLHttpRequest();
xhr.onload = () => {
  console.log(xhr.responseXML.title);
};
xhr.open("GET", "file.html");
xhr.responseType = "document";
xhr.send();

Этот метод опирается на «принудительный асинхронный» характер функции. Когда вы пытаетесь установить responseType объекта XMLHttpRequest после его открытия как «синхронный». В браузерах, реализующих эту функцию, это вызовет ошибку, а в других — будет работать.

function HTMLinXHR() {
  if (!window.XMLHttpRequest) {
    return false;
  }
  const req = new window.XMLHttpRequest();
  req.open("GET", window.location.href, false);
  try {
    req.responseType = "document";
  } catch (e) {
    return true;
  }
  return false;
}

Просмотреть на JSFiddle

Этот метод является синхронным, не зависит от внешних ресурсов, хотя он может быть менее надёжным, чем метод 2, описанный ниже, так как он не проверяет саму функцию, а лишь её признак.

Существует две проблемы с точным обнаружением поддержки разбора HTML в XMLHttpRequest. Во-первых, результат обнаружения получается асинхронно, так как поддержка HTML доступна только в асинхронном режиме. Во-вторых, необходимо фактически получить тестовый документ по HTTP, потому что тестирование с data: URL привело бы к одновременной проверке поддержки data: URL.

Таким образом, для обнаружения поддержки HTML необходим тестовый HTML-файл на сервере. Этот тестовый файл небольшой и не является корректным XML:

<title>&amp;&<</title>

Если файл называется detect.html, для обнаружения поддержки разбора HTML можно использовать следующую функцию:

function detectHtmlInXhr(callback) {
  if (!window.XMLHttpRequest) {
    setTimeout(function () {
      callback(false);
    }, 0);

    return;
  }
  let done = false;
  const xhr = new window.XMLHttpRequest();
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && !done) {
      done = true;
      callback(
        !!(
          xhr.responseXML &&
          xhr.responseXML.title &&
          xhr.responseXML.title === "&&<"
        ),
      );
    }
  };
  xhr.onabort = xhr.onerror = () => {
    if (!done) {
      done = true;
      callback(false);
    }
  };
  try {
    xhr.open("GET", "detect.html");
    xhr.responseType = "document";
    xhr.send();
  } catch (e) {
    setTimeout(function () {
      if (!done) {
        done = true;
        callback(false);
      }
    }, 0);
  }
}

Аргумент callback — функция, которая будет вызвана асинхронно с true в качестве единственного аргумента, если поддержка разбора HTML есть, и false — если нет.

Просмотреть на JSFiddle

Если кодировка символов указана в заголовке HTTP Content-Type, используется эта кодировка. В противном случае, если есть метка порядка байтов, используется кодировка, указанная этой меткой. В противном случае, если есть элемент <meta>, который объявляет кодировку в первых 1024 байтах файла, используется эта кодировка. В противном случае файл декодируется как UTF-8.

• XMLHttpRequest
• Использование XMLHttpRequest