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

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

制限

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

使用方法

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

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

機能の検出

方法1

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

function HTMLinXHR() {
  if (!window.XMLHttpRequest)
    return false;
  var 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 ではないものです。

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

このファイルが detect.html という名前だった場合、 HTML 対応を検出する関数は次のように書くことができます。

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

引数の callback は非同期に呼び出される関数であり、 HTML 対応がある場合には唯一の引数が true になり、 HTML 対応がない場合は唯一の引数が false になります。

JSFiddle で閲覧

文字エンコーディング

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

古いブラウザーでの HTML の扱い

XMLHttpRequest はもともと、 XML の解析のみ対応していました。 HTML の解析は最近追加されたものです。古いブラウザーでも、 XMLHttpRequest.responseText プロパティと正規表現の組み合わせで、例えば、指定された ID の HTML 要素のソースコードを取得することができます。

function getHTML (oXHR, sTargetId) {
  var  rOpen = new RegExp("<(?!\!)\\s*([^\\s>]+)[^>]*\\s+id\\=[\"\']" + sTargetId + "[\"\'][^>]*>" ,"i"),
       sSrc = oXHR.responseText, aExec = rOpen.exec(sSrc);

  return aExec ? (new RegExp("(?:(?:.(?!<\\s*" + aExec[1] + "[^>]*[>]))*.?<\\s*" + aExec[1] + "[^>]*[>](?:.(?!<\\s*\/\\s*" + aExec[1] + "\\s*>))*.?<\\s*\/\\s*" + aExec[1] + "\\s*>)*(?:.(?!<\\s*\/\\s*" + aExec[1] + "\\s*>))*.?", "i")).exec(sSrc.slice(sSrc.indexOf(aExec[0]) + aExec[0].length)) || "" : "";
}

var oReq = new XMLHttpRequest();
oReq.open("GET", "yourPage.html", true);
oReq.onload = function () { console.log(getHTML(this, "intro")); };
oReq.send(null);
メモ: この方法はインタープリターにとってとても重いものです。本当に必要なときのみ使用してください

仕様書

仕様書 状態 備考
XMLHttpRequest 現行の標準 Initial definition

ブラウザーの対応

XMLHttpRequest インターフェイス

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 7Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
onreadystatechangeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 7
補足
完全対応 7
補足
補足 Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject()
Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
readyStateChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 7Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
responseChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
responseTextChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ?
補足
?
補足
補足 Before IE 10, the value of XMLHttpRequest.responseText could be read only once the request was complete.
Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
responseTypeChrome 完全対応 31Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 18Safari 完全対応 7WebView Android 完全対応 55Chrome Android 完全対応 55Edge Mobile 完全対応 ありFirefox Android 完全対応 50Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 6.0
responseURLChrome 完全対応 37Edge 完全対応 14Firefox 完全対応 32IE 未対応 なしOpera 完全対応 24Safari 完全対応 8WebView Android 完全対応 37Chrome Android 完全対応 37Edge Mobile ? Firefox Android 完全対応 32Opera Android 完全対応 24Safari iOS ? Samsung Internet Android 完全対応 あり
responseXMLChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 Prior to Firefox 51, an error parsing the received data added a <parsererror> node to the top of the Document and then returned the Document in whatever state it happens to be in. This was inconsistent with the specification. Starting with Firefox 51, this scenario now correctly returns null as per the spec.
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Prior to Firefox 51, an error parsing the received data added a <parsererror> node to the top of the Document and then returned the Document in whatever state it happens to be in. This was inconsistent with the specification. Starting with Firefox 51, this scenario now correctly returns null as per the spec.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
statusChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 7
補足
完全対応 7
補足
補足 Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject()
Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
statusTextChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 7
補足
完全対応 7
補足
補足 Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject()
Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
timeoutChrome 完全対応 29Edge 完全対応 12Firefox 完全対応 12IE 完全対応 8Opera 完全対応 17
完全対応 17
未対応 12 — 16
Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
uploadChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile ? Firefox Android ? Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
withCredentialsChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3.5
補足
完全対応 3.5
補足
補足 Starting with Firefox 11, it's no longer supported to use the withCredentials attribute when performing synchronous requests. Attempting to do so throws an NS_ERROR_DOM_INVALID_ACCESS_ERR exception.
IE 完全対応 10
補足
完全対応 10
補足
補足 Internet Explorer versions 8 and 9 supported cross-domain requests (CORS) using XDomainRequest
Opera 完全対応 12Safari 完全対応 4WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 Starting with Firefox 11, it's no longer supported to use the withCredentials attribute when performing synchronous requests. Attempting to do so throws an NS_ERROR_DOM_INVALID_ACCESS_ERR exception.
Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
abortChrome 完全対応 18Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 7
完全対応 7
完全対応 5
補足
補足 Implemented via ActiveXObject
Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
getAllResponseHeadersChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4
補足
完全対応 4
補足
補足 Starting from Firefox 49, empty headers are returned as empty strings in case the preference network.http.keep_empty_response_headers_as_empty_string is set to true, defaulting to false. Before Firefox 49 empty headers had been ignored. Since Firefox 50 the preference defaults to true.
IE 完全対応 7
完全対応 7
完全対応 5
補足
補足 Implemented via ActiveXObject
Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 Starting from Firefox 49, empty headers are returned as empty strings in case the preference network.http.keep_empty_response_headers_as_empty_string is set to true, defaulting to false. Before Firefox 49 empty headers had been ignored. Since Firefox 50 the preference defaults to true.
Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
getResponseHeaderChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 Starting from Firefox 49, empty headers are returned as empty strings in case the preference network.http.keep_empty_response_headers_as_empty_string is set to true, defaulting to false. Before Firefox 49 empty headers had been ignored. Since Firefox 50 the preference defaults to true.
IE 完全対応 7
完全対応 7
完全対応 5
補足
補足 Implemented via ActiveXObject
Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Starting from Firefox 49, empty headers are returned as empty strings in case the preference network.http.keep_empty_response_headers_as_empty_string is set to true, defaulting to false. Before Firefox 49 empty headers had been ignored. Since Firefox 50 the preference defaults to true.
Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
openChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in Firefox 30, synchronous requests on the main thread have been deprecated due to their negative impact on performance and the user experience. Therefore, the async parameter may not be false except in a Worker.
IE 完全対応 7
完全対応 7
完全対応 5
補足
補足 Implemented via ActiveXObject
Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in Firefox 30, synchronous requests on the main thread have been deprecated due to their negative impact on performance and the user experience. Therefore, the async parameter may not be false except in a Worker.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
overrideMimeTypeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 11
完全対応 11
完全対応 5
補足
補足 Implemented via ActiveXObject
Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
sendChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 7
完全対応 7
完全対応 5
補足
補足 Implemented via ActiveXObject
Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
sendAsBinary
非推奨非標準
Chrome 未対応 なし
補足
未対応 なし
補足
補足 There is a polyfill available to support sendAsBinary().
Edge 未対応 なしFirefox 未対応 2 — 31IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なし
補足
未対応 なし
補足
補足 There is a polyfill available to support sendAsBinary().
Chrome Android 未対応 なし
補足
未対応 なし
補足
補足 There is a polyfill available to support sendAsBinary().
Edge Mobile 未対応 なしFirefox Android 未対応 4 — 31Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
setRequestHeaderChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 ありIE 完全対応 7
完全対応 7
完全対応 5
補足
補足 Implemented via ActiveXObject
Opera 完全対応 ありSafari 完全対応 1.2WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, wbamberg, ethertank, DavidWalsh, Potappo, ziyunfei, myakura
最終更新者: mfuji09,