HTML in XMLHttpRequest

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die W3C-XMLHttpRequest-Spezifikation fügt Parsing-Unterstützung für HTML in XMLHttpRequest hinzu, das ursprünglich nur Parsing für XML unterstützte. Diese Funktion ermöglicht es Webanwendungen, eine HTML-Ressource als geparsten DOM mit XMLHttpRequest zu erhalten.

Um einen Überblick über die allgemeine Verwendung von XMLHttpRequest zu erhalten, siehe Using XMLHttpRequest.

Einschränkungen

Um die synchrone Verwendung von XMLHttpRequest zu umgehen, ist HTML-Unterstützung im synchronen Modus nicht verfügbar. Außerdem ist HTML-Unterstützung nur verfügbar, wenn die responseType-Eigenschaft auf "document" gesetzt wurde. Diese Einschränkung vermeidet unnötige Zeitverschwendung beim Parsen von HTML, wenn Legacy-Code XMLHttpRequest im Standardmodus verwendet, um responseText für text/html-Ressourcen abzurufen. Außerdem werden Probleme mit Legacy-Code vermieden, der annimmt, dass responseXML für HTTP-Fehlerseiten null ist (die häufig einen text/html-Antwortkörper haben).

Nutzung

Das Abrufen einer HTML-Ressource als DOM mit XMLHttpRequest funktioniert genauso wie das Abrufen einer XML-Ressource als DOM mit XMLHttpRequest, außer dass Sie den synchronen Modus nicht verwenden können und Sie ein Dokument explizit anfordern müssen, indem Sie der responseType-Eigenschaft des XMLHttpRequest-Objekts den String "document" zuweisen, nachdem Sie open() aufgerufen, aber bevor Sie send() aufgerufen haben.

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

Feature-Erkennung

Methode 1

Diese Methode basiert auf der "erzwungenen asynchronen" Natur des Features. Wenn Sie versuchen, responseType eines XMLHttpRequest-Objekts festzulegen, nachdem es als "sync" geöffnet wurde. Dies führt zu einem Fehler in den Browsern, die das Feature implementiert haben, und funktioniert in anderen.

js
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;
}

Auf JSFiddle ansehen

Diese Methode ist synchron, basiert nicht auf externen Ressourcen, obwohl sie möglicherweise nicht so zuverlässig ist wie Methode 2, die unten beschrieben wird, da sie nicht die eigentliche Funktion überprüft, sondern einen Hinweis auf diese Funktion.

Methode 2

Es gibt zwei Herausforderungen bei der genauen Erkennung, ob ein Browser HTML-Parsing in XMLHttpRequest unterstützt. Erstens wird das Erkennungsergebnis asynchron ermittelt, da HTML-Unterstützung nur im asynchronen Modus verfügbar ist. Zweitens müssen Sie ein Testdokument tatsächlich über HTTP abrufen, da ein Test mit einer data:-URL gleichzeitig die data:-URL-Unterstützung testen würde.

Um die HTML-Unterstützung zu erkennen, wird eine Test-HTML-Datei auf dem Server benötigt. Diese Testdatei ist klein und kein wohlgeformtes XML:

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

Wenn die Datei detect.html heißt, kann die folgende Funktion verwendet werden, um HTML-Parsing-Unterstützung zu erkennen:

js
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);
  }
}

Das Argument callback ist eine Funktion, die asynchron mit true als einzigem Argument aufgerufen wird, wenn HTML-Parsing unterstützt wird, und mit false als einzigem Argument, wenn HTML-Parsing nicht unterstützt wird.

Auf JSFiddle ansehen

Zeichencodierung

Wenn die Zeichencodierung im HTTP-Content-Type-Header deklariert ist, wird diese Zeichencodierung verwendet. Andernfalls, wenn es eine Byte Order Mark gibt, wird die durch ihn angegebene Codierung verwendet. Andernfalls, wenn es ein <meta>-Element gibt, das innerhalb der ersten 1024 Bytes der Datei die Codierung deklariert, wird diese Codierung verwendet. Andernfalls wird die Datei als UTF-8 dekodiert.

Spezifikationen

Specification
XMLHttpRequest
# interface-xmlhttprequest

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
XMLHttpRequest
XMLHttpRequest() constructor
abort
abort event
Authorization header removed from cross-origin redirects
error event
getAllResponseHeaders
Header names returned in all lower case
getResponseHeader
load event
loadend event
loadstart event
open
overrideMimeType
progress event
readyState
readystatechange event
response
responseText
responseType
responseType.arraybuffer_value
responseType.blob_value
responseType.document_value
responseType.json_value
responseURL
responseXML
send
ArrayBufferView as parameter to send()
ArrayBuffer as parameter to send()
Blob as parameter to send()
FormData as parameter to send()
URLSearchParams as parameter to send()
setAttributionReporting
Experimental
setPrivateToken
Experimental
setRequestHeader
status
statusText
timeout
timeout event
upload
withCredentials
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

Siehe auch