XMLHttpRequest における HTML の扱い

BaselineWidely 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.

W3C のXMLHttpRequest 仕様書では、もともとXML の解釈しか対応していなかったXMLHttpRequest にHTML の解釈を追加しています。この機能によって、ウェブアプリはXMLHttpRequest を使って HTML を解釈済のDOM として取得することができます。

一般的なXMLHttpRequest の使い方についての概要は、XMLHttpRequest の利用をお読みください。

制限

同期的なXMLHttpRequest の利用を避けるために、 HTML 対応は同期モードでは利用できません。また、 HTML 対応はresponseType プロパティが"document" に設定されている時にのみ有効です。この制限によって、古いコードがXMLHttpRequest を使ってresponseText がtext/html であるリソースを既定のモードで受け取るときに、無用に HTML を解釈する時間を浪費することを防ぎます。また、この制限によって HTTP のエラーページ (ふつうはtext/html の応答本文を持つ) の際にresponseXML がnull と想定する古いコードで問題が発生することを防ぐこともできます。

使用方法

XMLHttpRequest を使って HTML リソースを DOM として取得することは、XMLHttpRequest を使って XML リソースを DOM として取得するのと似ていますが、同期モードを使用することはできず、XMLHttpRequest オブジェクトのopen() を呼び出した後、send() を呼び出す前に、responseType プロパティに文字列"document" 代入して、明示的に文書を要求する必要があるという点が異なります。

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

機能の検出

方法 1

この方法は「強制的に非同期」である性質を利用するものです。XMLHttpRequest オブジェクトを同期モードで開いた後、responseType 設定しようとすると、機能を実装しているブラウザーではエラーを投げますが、それ以外のブラウザーではそのまま動作します。

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 の方がより信頼できるかもしれません。

方法 2

ブラウザーがXMLHttpRequest で HTML の解釈処理に対応しているかどうかを確実に検出するには、二つの課題があります。まず、 HTML 対応が非同期モードでしか有効でないことから、検出結果は非同期で受け取られることになります。第二に、data: URL を使用すると同時にdata: URL の対応にも依存することになるため、実際に HTTP を通じて文書を取得しなければならないことです。

つまり、 HTML 対応を検出するには、サーバー上にテスト用の HTML 文書が必要になります。このテストファイルは小さく、整形式の XML ではないものです。

html

<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 は非同期に呼び出される関数であり、 HTML 対応がある場合には唯一の引数がtrue になり、 HTML 対応がない場合は唯一の引数がfalse になります。

JSFiddle で閲覧

文字エンコーディング

HTTP のContent-Type ヘッダーで文字エンコーディングが宣言されている場合は、そのエンコーディングが使用されます。そうでない場合、もしバイトオーダーマークがある場合は、そのバイトオーダーマークが示すエンコーディングを使用します。そうでない場合、もしファイルの先頭 1024 バイト以内にエンコーディングを宣言する<meta> 要素がある場合は、そのエンコーディングが使用されます。それもない場合、ファイルは UTF-8 としてデコードされます。