From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/xmlhttprequest/abort/index.html | 78 ++ .../web/api/xmlhttprequest/abort_event/index.html | 148 ++++ files/ja/web/api/xmlhttprequest/channel/index.html | 19 + .../web/api/xmlhttprequest/error_event/index.html | 148 ++++ .../getallresponseheaders/index.html | 123 ++++ .../xmlhttprequest/getresponseheader/index.html | 92 +++ .../html_in_xmlhttprequest/index.html | 166 +++++ files/ja/web/api/xmlhttprequest/index.html | 192 +++++ .../web/api/xmlhttprequest/load_event/index.html | 148 ++++ .../api/xmlhttprequest/loadend_event/index.html | 150 ++++ .../api/xmlhttprequest/loadstart_event/index.html | 149 ++++ files/ja/web/api/xmlhttprequest/mozanon/index.html | 18 + .../xmlhttprequest/mozbackgroundrequest/index.html | 28 + .../mozresponsearraybuffer/index.html | 20 + .../ja/web/api/xmlhttprequest/mozsystem/index.html | 18 + .../ja/web/api/xmlhttprequest/multipart/index.html | 30 + .../xmlhttprequest/onreadystatechange/index.html | 79 ++ files/ja/web/api/xmlhttprequest/open/index.html | 73 ++ .../web/api/xmlhttprequest/openrequest/index.html | 18 + .../api/xmlhttprequest/progress_event/index.html | 149 ++++ .../web/api/xmlhttprequest/readystate/index.html | 107 +++ .../ja/web/api/xmlhttprequest/response/index.html | 93 +++ .../web/api/xmlhttprequest/responsetext/index.html | 83 +++ .../web/api/xmlhttprequest/responsetype/index.html | 92 +++ .../web/api/xmlhttprequest/responseurl/index.html | 50 ++ .../web/api/xmlhttprequest/responsexml/index.html | 109 +++ files/ja/web/api/xmlhttprequest/send/index.html | 133 ++++ .../sending_and_receiving_binary_data/index.html | 155 ++++ .../api/xmlhttprequest/setrequestheader/index.html | 82 +++ files/ja/web/api/xmlhttprequest/status/index.html | 80 +++ .../index.html | 232 ++++++ files/ja/web/api/xmlhttprequest/timeout/index.html | 68 ++ .../api/xmlhttprequest/timeout_event/index.html | 81 +++ files/ja/web/api/xmlhttprequest/upload/index.html | 105 +++ .../xmlhttprequest/using_xmlhttprequest/index.html | 800 +++++++++++++++++++++ .../using_xmlhttprequest_in_ie6/index.html | 31 + .../api/xmlhttprequest/xmlhttprequest/index.html | 57 ++ 37 files changed, 4204 insertions(+) create mode 100644 files/ja/web/api/xmlhttprequest/abort/index.html create mode 100644 files/ja/web/api/xmlhttprequest/abort_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/channel/index.html create mode 100644 files/ja/web/api/xmlhttprequest/error_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/getallresponseheaders/index.html create mode 100644 files/ja/web/api/xmlhttprequest/getresponseheader/index.html create mode 100644 files/ja/web/api/xmlhttprequest/html_in_xmlhttprequest/index.html create mode 100644 files/ja/web/api/xmlhttprequest/index.html create mode 100644 files/ja/web/api/xmlhttprequest/load_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/loadend_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/loadstart_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/mozanon/index.html create mode 100644 files/ja/web/api/xmlhttprequest/mozbackgroundrequest/index.html create mode 100644 files/ja/web/api/xmlhttprequest/mozresponsearraybuffer/index.html create mode 100644 files/ja/web/api/xmlhttprequest/mozsystem/index.html create mode 100644 files/ja/web/api/xmlhttprequest/multipart/index.html create mode 100644 files/ja/web/api/xmlhttprequest/onreadystatechange/index.html create mode 100644 files/ja/web/api/xmlhttprequest/open/index.html create mode 100644 files/ja/web/api/xmlhttprequest/openrequest/index.html create mode 100644 files/ja/web/api/xmlhttprequest/progress_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/readystate/index.html create mode 100644 files/ja/web/api/xmlhttprequest/response/index.html create mode 100644 files/ja/web/api/xmlhttprequest/responsetext/index.html create mode 100644 files/ja/web/api/xmlhttprequest/responsetype/index.html create mode 100644 files/ja/web/api/xmlhttprequest/responseurl/index.html create mode 100644 files/ja/web/api/xmlhttprequest/responsexml/index.html create mode 100644 files/ja/web/api/xmlhttprequest/send/index.html create mode 100644 files/ja/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html create mode 100644 files/ja/web/api/xmlhttprequest/setrequestheader/index.html create mode 100644 files/ja/web/api/xmlhttprequest/status/index.html create mode 100644 files/ja/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html create mode 100644 files/ja/web/api/xmlhttprequest/timeout/index.html create mode 100644 files/ja/web/api/xmlhttprequest/timeout_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/upload/index.html create mode 100644 files/ja/web/api/xmlhttprequest/using_xmlhttprequest/index.html create mode 100644 files/ja/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html create mode 100644 files/ja/web/api/xmlhttprequest/xmlhttprequest/index.html (limited to 'files/ja/web/api/xmlhttprequest') diff --git a/files/ja/web/api/xmlhttprequest/abort/index.html b/files/ja/web/api/xmlhttprequest/abort/index.html new file mode 100644 index 0000000000..49beadf373 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/abort/index.html @@ -0,0 +1,78 @@ +--- +title: XMLHttpRequest.abort() +slug: Web/API/XMLHttpRequest/abort +tags: + - AJAX + - API + - HTTP + - HttpRequest + - XMLHttpRequest + - abort + - cancel + - メソッド + - リファレンス + - 停止 +translation_of: Web/API/XMLHttpRequest/abort +--- +
{{APIRef('XMLHttpRequest')}}
+ +

XMLHttpRequest.abort() メソッドは、すでに送信された要求を中止します。要求が中止されたら、 {{domxref("XMLHttpRequest.readyState", "readyState")}} が {{domxref("XMLHttpRequest.UNSENT")}} (0) に変化し、要求の {{domxref("XMLHttpRequest.status", "status")}} コードが0に設定されます。

+ +

構文

+ +
XMLHttpRequest.abort()
+ +

引数

+ +

なし。

+ +

返値

+ +

undefined

+ +

例

+ +

この例では、 MDN のホームページからコンテンツを読み込み始め、ある条件が発生したときに、 abort() を呼び出すことで転送を中止します。

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+xhr.open(method, url, true);
+
+xhr.send();
+
+if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
+  xhr.abort();
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-abort()-method')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの対応

+ + + +

{{Compat("api.XMLHttpRequest.abort")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/abort_event/index.html b/files/ja/web/api/xmlhttprequest/abort_event/index.html new file mode 100644 index 0000000000..ebaa07f694 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/abort_event/index.html @@ -0,0 +1,148 @@ +--- +title: 'XMLHttpRequest: abort イベント' +slug: Web/API/XMLHttpRequest/abort_event +tags: + - API + - Event + - ProgressEvent + - Web + - XMLHttpRequest + - abort + - イベント + - ウェブ +translation_of: Web/API/XMLHttpRequest/abort_event +--- +
{{APIRef}}
+ +

abort イベントは、例えばプログラムが {{domxref("XMLHttpRequest.abort()")}} を呼び出した時など、リクエストが中断されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="controls">
+    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
+    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
+    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
+</div>
+
+<textarea readonly class="event-log"></textarea>
+ + + +

JS

+ +
const xhrButtonSuccess = document.querySelector('.xhr.success');
+const xhrButtonError = document.querySelector('.xhr.error');
+const xhrButtonAbort = document.querySelector('.xhr.abort');
+const log = document.querySelector('.event-log');
+
+function handleEvent(e) {
+    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
+}
+
+function addListeners(xhr) {
+    xhr.addEventListener('loadstart', handleEvent);
+    xhr.addEventListener('load', handleEvent);
+    xhr.addEventListener('loadend', handleEvent);
+    xhr.addEventListener('progress', handleEvent);
+    xhr.addEventListener('error', handleEvent);
+    xhr.addEventListener('abort', handleEvent);
+}
+
+function runXHR(url) {
+    log.textContent = '';
+
+    const xhr = new XMLHttpRequest();
+    addListeners(xhr);
+    xhr.open("GET", url);
+    xhr.send();
+    return xhr;
+}
+
+xhrButtonSuccess.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
+});
+
+xhrButtonError.addEventListener('click', () => {
+    runXHR('https://somewhere.org/i-dont-exist');
+});
+
+xhrButtonAbort.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
+});
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#event-xhr-abort')}}{{Spec2('XMLHttpRequest')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.XMLHttpRequest.abort_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/channel/index.html b/files/ja/web/api/xmlhttprequest/channel/index.html new file mode 100644 index 0000000000..bd71478736 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/channel/index.html @@ -0,0 +1,19 @@ +--- +title: XMLHttpRequest.channel +slug: Web/API/XMLHttpRequest/channel +tags: + - API + - Non-standard + - Property + - Reference + - XHR + - XMLHttpRequest + - channel + - nsIChannel + - プロパティ + - リファレンス +translation_of: Web/API/XMLHttpRequest/channel +--- +

{{draft}}{{APIRef('XMLHttpRequest')}}

+ +

XMLHttpRequest.channel は リクエストを送信するときにオブジェクトによって使用されるnsIChannel です。channelがまだ作られていない場合、これは null です。マルチパートリクエストのときは、これは最初のchannelであり、マルチパートリクエストの異なるパートのことではありません。アクセスするには、権限昇格が必要です。

diff --git a/files/ja/web/api/xmlhttprequest/error_event/index.html b/files/ja/web/api/xmlhttprequest/error_event/index.html new file mode 100644 index 0000000000..a36639cbaa --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/error_event/index.html @@ -0,0 +1,148 @@ +--- +title: 'XMLHttpRequest: error イベント' +slug: Web/API/XMLHttpRequest/error_event +tags: + - API + - Error + - Event + - ProgressEvent + - Web + - XMLHttpRequest + - イベント + - ウェブ +translation_of: Web/API/XMLHttpRequest/error_event +--- +
{{APIRef}}
+ +

error イベントは、リクエストでエラーが発生したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="controls">
+    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
+    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
+    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
+</div>
+
+<textarea readonly class="event-log"></textarea>
+ + + +

JS

+ +
const xhrButtonSuccess = document.querySelector('.xhr.success');
+const xhrButtonError = document.querySelector('.xhr.error');
+const xhrButtonAbort = document.querySelector('.xhr.abort');
+const log = document.querySelector('.event-log');
+
+function handleEvent(e) {
+    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
+}
+
+function addListeners(xhr) {
+    xhr.addEventListener('loadstart', handleEvent);
+    xhr.addEventListener('load', handleEvent);
+    xhr.addEventListener('loadend', handleEvent);
+    xhr.addEventListener('progress', handleEvent);
+    xhr.addEventListener('error', handleEvent);
+    xhr.addEventListener('abort', handleEvent);
+}
+
+function runXHR(url) {
+    log.textContent = '';
+
+    const xhr = new XMLHttpRequest();
+    addListeners(xhr);
+    xhr.open("GET", url);
+    xhr.send();
+    return xhr;
+}
+
+xhrButtonSuccess.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
+});
+
+xhrButtonError.addEventListener('click', () => {
+    runXHR('https://somewhere.org/i-dont-exist');
+});
+
+xhrButtonAbort.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
+});
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#event-xhr-error')}}{{Spec2('XMLHttpRequest')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLHttpRequest.error_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/getallresponseheaders/index.html b/files/ja/web/api/xmlhttprequest/getallresponseheaders/index.html new file mode 100644 index 0000000000..087a42f29b --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/getallresponseheaders/index.html @@ -0,0 +1,123 @@ +--- +title: XMLHttpRequest.getAllResponseHeaders() +slug: Web/API/XMLHttpRequest/getAllResponseHeaders +tags: + - API + - Fetch Headers + - Get Headers + - HTTP + - HTTP Header + - Method + - Reference + - Response Header + - XHR + - XMLHttpRequest + - getAllResponseHeaders +translation_of: Web/API/XMLHttpRequest/getAllResponseHeaders +--- +
{{APIRef('XMLHttpRequest')}}
+ +

{{domxref("XMLHttpRequest")}} の getAllResponseHeaders() メソッドは、すべてのレスポンスヘッダーを {{Glossary('CRLF')}} で区切った文字列として返し、レスポンスを受信していない場合は null を返します。ネットワークエラーが発生した場合は、空文字列が返されます。

+ +
+

注: マルチパートリクエストでは、これはリクエストの元のチャンネルではなく、現在の部分を返します。

+
+ +

構文

+ +
var headers = XMLHttpRequest.getAllResponseHeaders();
+ +

引数

+ +

なし。

+ +

返値

+ +

{{Glossary('CRLF')}} で区切ったすべてのレスポンスヘッダー (フィールド名が Set-Cookie または Set-Cookie2 のものを除く) を表す {{domxref("ByteString")}}、またはレスポンスを受信していなければ null です。ネットワークエラーが発生した場合は、空文字列が返されます。

+ +

生のヘッダー文字列がどのように見えるかの例です。

+ +
date: Fri, 08 Dec 2017 21:04:30 GMT\r\n
+content-encoding: gzip\r\n
+x-content-type-options: nosniff\r\n
+server: meinheld/0.6.1\r\n
+x-frame-options: DENY\r\n
+content-type: text/html; charset=utf-8\r\n
+connection: keep-alive\r\n
+strict-transport-security: max-age=63072000\r\n
+vary: Cookie, Accept-Encoding\r\n
+content-length: 6502\r\n
+x-xss-protection: 1; mode=block\r\n
+ +

各行はキャリッジリターンとラインフィード文字 (\r\n) の両方で終わります。これらはそれぞれのヘッダーを区切る基本的なデリミターです。

+ +
+

注: 最近のブラウザーでは、ヘッダー名は最新の仕様書にあるように、すべて小文字で返されます。

+
+ +

例

+ +

この例では、リクエストの {{event("readystatechange")}} イベントハンドラーである {{domxref("XMLHttpRequest.onreadystatechange")}} の中でヘッダーを調べます。このコードは生のヘッダー文字列を取得する方法、またそれを個別のヘッダーの配列に変換する方法、そして配列からヘッダー名とその値のマップを生成する方法を示しています。

+ +
var request = new XMLHttpRequest();
+request.open("GET", "foo.txt", true);
+request.send();
+
+request.onreadystatechange = function() {
+  if(this.readyState == this.HEADERS_RECEIVED) {
+
+    // 生のヘッダー文字列を取得
+    var headers = request.getAllResponseHeaders();
+
+    // ヘッダー文字列を個別のヘッダーの
+    // 配列に変換
+    var arr = headers.trim().split(/[\r\n]+/);
+
+    // ヘッダー名と値のマップを生成
+    var headerMap = {};
+    arr.forEach(function (line) {
+      var parts = line.split(': ');
+      var header = parts.shift();
+      var value = parts.join(': ');
+      headerMap[header] = value;
+    });
+  }
+}
+ +

いったんこれを行えば、次のようなことができます。

+ +
var contentType = headerMap["content-type"];
+ +

これは {{httpheader("Content-Type")}} ヘッダーの値を変数 contentType の中に入れます。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-getallresponseheaders()-method', 'getAllResponseHeaders()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.XMLHttpRequest.getAllResponseHeaders")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/getresponseheader/index.html b/files/ja/web/api/xmlhttprequest/getresponseheader/index.html new file mode 100644 index 0000000000..6ed3ad6638 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/getresponseheader/index.html @@ -0,0 +1,92 @@ +--- +title: XMLHttpRequest.getResponseHeader() +slug: Web/API/XMLHttpRequest/getResponseHeader +tags: + - API + - HTTP + - HTTP ヘッダー + - Reference + - XHR + - XMLHttpRequest + - getResponseHeader + - ヘッダー + - ヘッダーの取得 + - メソッド +translation_of: Web/API/XMLHttpRequest/getResponseHeader +--- +
{{APIRef('XMLHttpRequest')}}
+ +

{{DOMxRef("XMLHttpRequest")}} の getResponseHeader() メソッドは、特定のヘッダー値のテキストを含んだ文字列を返します。同じ名前で複数のレスポンスヘッダーがあった場合、値はコンマと空白で区切って値を接続した単一の文字列として返されます。 getResponseHeader() メソッドは値を UTF バイトシーケンスとして返します。

+ +
+

メモ: ヘッダー名の検索は、大文字小文字の区別がありません。

+
+ +

ヘッダーすべての生の文字列を取得する必要がある場合は、生のヘッダー文字列全体を返す {{DOMxRef("XMLHttpRequest.getAllResponseHeaders", "getAllResponseHeaders()")}} メソッドを使用してください。

+ +

構文

+ +
var myHeader = XMLHttpRequest.getResponseHeader(headerName);
+ +

引数

+ +
+
headerName
+
{{DOMxRef("ByteString")}} で、テキスト値を取得したいヘッダーの名前を示します。
+
+ +

返値

+ +

ヘッダーのテキスト値を表す {{DOMxRef("ByteString")}}、または、レスポンスがまだ受信されていないか、そのヘッダーがレスポンスに存在しなければ null です。

+ +

例

+ +

この例では、リクエストが生成されて送信され、そして {{Event("readystatechange")}} ハンドラーを設定してヘッダーが純真で来たことを示す {{DOMxRef("XMLHttpRequest.readyState", "readyState")}} を監視します。その時が来たら、 {{httpheader("Content-Type")}} ヘッダーの値を読み取ります。 Content-Type が求められる値でない場合、 {{DOMxRef("XMLHttpRequest")}} は {{DOMxRef("XMLHttpRequest.abort", "abort()")}} を呼び出してキャンセルします。

+ +
var client = new XMLHttpRequest();
+client.open("GET", "unicorns-are-teh-awesome.txt", true);
+client.send();
+
+client.onreadystatechange = function() {
+  if(this.readyState == this.HEADERS_RECEIVED) {
+    var contentType = client.getResponseHeader("Content-Type");
+    if (contentType != my_expected_type) {
+      client.abort();
+    }
+  }
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("XMLHttpRequest", "#dom-xmlhttprequest-getresponseheader", "getResponseHeader()")}}{{Spec2("XMLHttpRequest")}}WHATWG living standard
+ +

ブラウザーの対応

+ + + +
{{Compat("api.XMLHttpRequest.getResponseHeader")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/html_in_xmlhttprequest/index.html b/files/ja/web/api/xmlhttprequest/html_in_xmlhttprequest/index.html new file mode 100644 index 0000000000..d33064f9f1 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/html_in_xmlhttprequest/index.html @@ -0,0 +1,166 @@ +--- +title: XMLHttpRequest における HTML の扱い +slug: Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest +tags: + - API + - HTML + - HTML の解析 + - HTML の読み込み + - XMLHttpRequest + - ウェブ + - ガイド +translation_of: Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest +--- +
{{APIRef("XMLHttpRequest")}}
+ +

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

+ +

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

+ +

制限

+ +

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

+ +

使用方法

+ +

{{domxref("XMLHttpRequest")}} を使って HTML リソースを DOM として取得することは、 XMLHttpRequest を使って XML リソースを DOM として取得するのと似ていますが、同期モードを使用することはできず、 XMLHttpRequest オブジェクトの {{domxref("XMLHttpRequest.open", "open()")}} を呼び出した後、 {{domxref("XMLHttpRequest.send", "send()")}} を呼び出す前に、 {{domxref("XMLHttpRequest.responseType", "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

+ +

ブラウザーが {{domxref("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 の {{HTTPHeader("Content-Type")}} ヘッダーで文字エンコーディングが宣言されている場合は、そのエンコーディングが使用されます。そうでない場合、もしバイトオーダーマークがある場合は、そのバイトオーダーマークが示すエンコーディングを使用します。そうでない場合、もしファイルの先頭 1024 バイト以内にエンコーディングを宣言する {{HTMLElement("meta")}} 要素がある場合は、そのエンコーディングが使用されます。それもない場合、ファイルは UTF-8 としてデコードされます。

+ +

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

+ +

XMLHttpRequest はもともと、 XML の解析のみ対応していました。 HTML の解析は最近追加されたものです。古いブラウザーでも、 {{domxref("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);
+
+ +
メモ: この方法はインタープリターにとってとても重いものです。本当に必要なときのみ使用してください。
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Initial definition
+ +

ブラウザーの対応

+ +

XMLHttpRequest インターフェイス

+ + + +

{{Compat("api.XMLHttpRequest")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/index.html b/files/ja/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..80575f37ad --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/index.html @@ -0,0 +1,192 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - API + - Communication + - HTTP + - Interface + - Reference + - Web + - XHR + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +
{{DefaultAPISidebar("XMLHttpRequest")}}
+ +

XMLHttpRequest (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。 XMLHttpRequest は {{Glossary("AJAX")}} プログラミングで頻繁に使用されます。

+ +

{{InheritanceDiagram(650, 150)}}

+ +

XMLHttpRequest という名前ではあるものの、 XML だけでなくあらゆる種類のデータを受け取るために使用することができます。

+ +

通信においてサーバーからのイベントデータやメッセージデータの受信を含む必要があるのであれば、 Server-sent event の {{domxref("EventSource")}} インターフェイスを使用することも検討してください。全二重の通信では、 WebSocket の方が良いかもしれません。

+ +

コンストラクター

+ +
+
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+
XMLHttpRequest を初期化するコンストラクターです。これは、他のメソッドを呼び出す前に呼び出さなければなりません。
+
+ +

プロパティ

+ +

このインターフェイスは、 {{domxref("XMLHttpRequestEventTarget")}} および {{domxref("EventTarget")}} のプロパティを継承します。

+ +
+
{{domxref("XMLHttpRequest.onreadystatechange")}}
+
{{domxref("EventHandler")}} で、これは readyState 属性が変化する度に呼び出されます。
+
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+
リクエストの状態を unsigned short で返します。
+
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+
リクエストのエンティティ本文を含む {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript オブジェクト, {{domxref("DOMString")}} の何れかを、 {{domxref("XMLHttpRequest.responseType")}} の値に応じて返します。
+
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+
リクエストに対するレスポンスがテキスト形式で入った {{domxref("DOMString")}} を返すか、リクエストが失敗した場合や、まだ送信されていない場合は null を返します。
+
{{domxref("XMLHttpRequest.responseType")}}
+
レスポンス型を定義する、列挙型の値です。
+
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+
レスポンスのシリアライズされた URL、または URL が null であれば空文字列を返します。
+
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+
リクエストに対するレスポンスが入った {{domxref("Document")}} を返すか、またはリクエストが成功しなかった場合、まだ送信されていない場合、 XML または HTML として解釈できなかった場合は null を返します。
+
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+
リクエストに対するレスポンスのステータスを unsigned short で返します。
+
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+
HTTP サーバーから返ってきたレスポンス文字列が入った {{domxref("DOMString")}} を返します。 {{domxref("XMLHTTPRequest.status")}} とは異なり、("200 OK" のように) レスポンスメッセージの完全な文が含まれています。 +
+

注: HTTP/2 仕様書 (8.1.2.4 レスポンス擬似ヘッダーフィールド) によれば、 HTTP/2 では、 HTTP/1.1 のステータス行に含まれていたバージョンや原因の文を伝える方法が定義されていません。

+
+
+
{{domxref("XMLHttpRequest.timeout")}}
+
リクエストを自動的に終了できるようになるまでの時間をミリ秒単位で表す、 unsigned long 型の値です。
+
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+
リクエストがタイムアウトする都度呼び出される {{domxref("EventHandler")}}。{{gecko_minversion_inline("12.0")}}
+
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+
アップロードプロセスを表す {{domxref("XMLHttpRequestUpload")}} です。
+
{{domxref("XMLHttpRequest.withCredentials")}}
+
{{domxref("Boolean")}} で、サイト間の Access-Control リクエストでクッキーや認証ヘッダーなどの資格情報を使用するかどうかを示します。
+
+ +

標準外のプロパティ

+ +
+
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+
{{Interface("nsIChannel")}} です。リクエストの実行の際にオブジェクトによって使われるチャンネルです。
+
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+
boolean です。 true の場合、リクエストは cookie や認証ヘッダを伴わずに送信します。
+
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+
boolean です。 true の場合、リクエストで同一オリジンポリシーは適用されません。
+
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+
boolean です。オブジェクトがバックグラウンドサービスのリクエストであるかどうかを示します。
+
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+
{{jsxref("ArrayBuffer")}} です。リクエストに対する、JavaScript typed array 形式でのレスポンスです。
+
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+
これは Gecko 独自の機能であり、 Firefox/Gecko 22 で削除されました。代わりに Server-Sent Event、Web Socket、または progress イベントの responseText を使用してください。
+
+ +

イベントハンドラー

+ +

onreadystatechange は XMLHttpRequest のインスタンスのプロパティとしてすべてのブラウザーが対応しています。

+ +

それ以来、数多くの追加のイベントハンドラーが様々なブラウザーに実装されてきています (onload, onerror, onprogress, など)。 XMLHttpRequest の使用を参照してください。

+ +

Firefox を含め、より新しいブラウザーでは、 XMLHttpRequest のイベントを on* プロパティをハンドラー関数に設定する方法に加えて、標準の {{domxref("EventTarget.addEventListener", "addEventListener()")}} API で待ち受けすることにも対応しています。

+ +

メソッド

+ +
+
{{domxref("XMLHttpRequest.abort()")}}
+
リクエストがすでに送信されている場合、リクエストを中止します。
+
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+
{{Glossary("CRLF")}} で区切られた文字列として、すべてのレスポンスヘッダを返します。レスポンスを何も受け取らなかった場合は null を返します。
+
{{domxref("XMLHttpRequest.getResponseHeader()")}}
+
指定したヘッダ文を含む文字列を返します。レスポンスを受信していない、またはレスポンス中に指定したヘッダが存在しない場合は null を返します。
+
{{domxref("XMLHttpRequest.open()")}}
+
リクエストを初期化します。このメソッドは JavaScript から使用するようにしてください。ネイティブコードからの初期化には、代わりに openRequest() を使用するようにしてください。
+
{{domxref("XMLHttpRequest.overrideMimeType()")}}
+
サーバーから返ってくる MIME タイプを上書きします。
+
{{domxref("XMLHttpRequest.send()")}}
+
リクエストを送信します。
+
{{domxref("XMLHttpRequest.setRequestHeader()")}}
+
HTTP リクエストヘッダーの値を設定します。 setRequestHeader() は open() の後、および send() の前に呼び出さなくてはいけません。
+
+ +

標準外のメソッド

+ +
+
{{domxref("XMLHttpRequest.init()")}}
+
C++ コードから使用するために、オブジェクトを初期化します。 +
警告: JavaScript からこのメソッドを呼び出してはいけません。
+
+
{{domxref("XMLHttpRequest.openRequest()")}}
+
リクエストを初期化します。このメソッドはネイティブコードから使用するためのものです。 JavaScript コードからの初期化には、代わりに open() を使用してください。 open() の項目を参照してください。
+
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+
バイナリデータを送る、send() メソッドの亜種です。
+
+ +

イベント

+ +
+
{{domxref("XMLHttpRequest/abort_event", "abort")}}
+
例えばプログラムが {{domxref("XMLHttpRequest.abort()")}} を呼び出した時など、リクエストが中断されたときに発生します。
+ {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} プロパティを通して利用することもできます。
+
{{domxref("XMLHttpRequest/error_event", "error")}}
+
リクエストでエラーが発生したときに発生します。
+ {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} プロパティを通して利用することもできます。
+
{{domxref("XMLHttpRequest/load_event", "load")}}
+
{{domxref("XMLHttpRequest")}} のトランザクションが成功裏に完了したときに発生します。
+ {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} プロパティを通して利用することもできます。
+
{{domxref("XMLHttpRequest/loadend_event", "loadend")}}
+
リクエストが完了したときに、成功した場合 ({{domxref("XMLHttpRequest/load_event", "load")}} の後)、成功しなかった場合 ({{domxref("XMLHttpRequest/abort_event", "abort")}} または {{domxref("XMLHttpRequest/error_event", "error")}} の後) のどちらでも発生します。
+ {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} プロパティを通して利用することもできます。
+
{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}
+
リクエストがデータを読み込み始めたときに発生します。
+ {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} プロパティを通して利用することもできます。
+
{{domxref("XMLHttpRequest/progress_event", "progress")}}
+
リクエストがもっとデータを受信した際に定期的に発生します。
+ {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} プロパティを通して利用することもできます。
+
{{domxref("XMLHttpRequest/timeout_event", "timeout")}}
+
プリセット時間が過ぎたために進行が終了したときに発生します。
+ {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} プロパティを通して利用することもできます。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard 最新版
+ +

ブラウザーの互換性

+ + + +
{{Compat("api.XMLHttpRequest")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/load_event/index.html b/files/ja/web/api/xmlhttprequest/load_event/index.html new file mode 100644 index 0000000000..b5261394d3 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/load_event/index.html @@ -0,0 +1,148 @@ +--- +title: 'XMLHttpRequest: load イベント' +slug: Web/API/XMLHttpRequest/load_event +tags: + - API + - Event + - ProgressEvent + - Web + - XMLHttpRequest + - load + - イベント + - ウェブ +translation_of: Web/API/XMLHttpRequest/load_event +--- +
{{APIRef}}
+ +

load イベントは、 {{domxref("XMLHttpRequest")}} のトランザクションが成功裏に完了したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("XMLHttpRequestEventTarget/onload", "onload")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="controls">
+    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
+    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
+    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
+</div>
+
+<textarea readonly class="event-log"></textarea>
+ + + +

JS

+ +
const xhrButtonSuccess = document.querySelector('.xhr.success');
+const xhrButtonError = document.querySelector('.xhr.error');
+const xhrButtonAbort = document.querySelector('.xhr.abort');
+const log = document.querySelector('.event-log');
+
+function handleEvent(e) {
+    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
+}
+
+function addListeners(xhr) {
+    xhr.addEventListener('loadstart', handleEvent);
+    xhr.addEventListener('load', handleEvent);
+    xhr.addEventListener('loadend', handleEvent);
+    xhr.addEventListener('progress', handleEvent);
+    xhr.addEventListener('error', handleEvent);
+    xhr.addEventListener('abort', handleEvent);
+}
+
+function runXHR(url) {
+    log.textContent = '';
+
+    const xhr = new XMLHttpRequest();
+    addListeners(xhr);
+    xhr.open("GET", url);
+    xhr.send();
+    return xhr;
+}
+
+xhrButtonSuccess.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
+});
+
+xhrButtonError.addEventListener('click', () => {
+    runXHR('https://somewhere.org/i-dont-exist');
+});
+
+xhrButtonAbort.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
+});
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#event-xhr-load')}}{{Spec2('XMLHttpRequest')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.XMLHttpRequest.load_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/loadend_event/index.html b/files/ja/web/api/xmlhttprequest/loadend_event/index.html new file mode 100644 index 0000000000..eaacb4e51d --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/loadend_event/index.html @@ -0,0 +1,150 @@ +--- +title: 'XMLHttpRequest: loadend イベント' +slug: Web/API/XMLHttpRequest/loadend_event +tags: + - API + - Event + - NeedsCompatTable + - NeedsSpecTable + - ProgressEvent + - Reference + - Web + - events + - loadend + - イベント +translation_of: Web/API/XMLHttpRequest/loadend_event +--- +
{{APIRef}}
+ +

loadend イベントは、リクエストが完了したときに、成功した場合 ({{domxref("XMLHttpRequest/load_event", "load")}} の後)、成功しなかった場合 ({{domxref("XMLHttpRequest/abort_event", "abort")}} または {{domxref("XMLHttpRequest/error_event", "error")}} の後) のどちらでも発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="controls">
+    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
+    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
+    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
+</div>
+
+<textarea readonly class="event-log"></textarea>
+ + + +

JS

+ +
const xhrButtonSuccess = document.querySelector('.xhr.success');
+const xhrButtonError = document.querySelector('.xhr.error');
+const xhrButtonAbort = document.querySelector('.xhr.abort');
+const log = document.querySelector('.event-log');
+
+function handleEvent(e) {
+    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
+}
+
+function addListeners(xhr) {
+    xhr.addEventListener('loadstart', handleEvent);
+    xhr.addEventListener('load', handleEvent);
+    xhr.addEventListener('loadend', handleEvent);
+    xhr.addEventListener('progress', handleEvent);
+    xhr.addEventListener('error', handleEvent);
+    xhr.addEventListener('abort', handleEvent);
+}
+
+function runXHR(url) {
+    log.textContent = '';
+
+    const xhr = new XMLHttpRequest();
+    addListeners(xhr);
+    xhr.open("GET", url);
+    xhr.send();
+    return xhr;
+}
+
+xhrButtonSuccess.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
+});
+
+xhrButtonError.addEventListener('click', () => {
+    runXHR('https://somewhere.org/i-dont-exist');
+});
+
+xhrButtonAbort.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
+});
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#event-xhr-loadend')}}{{Spec2('XMLHttpRequest')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.XMLHttpRequest.loadend_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/loadstart_event/index.html b/files/ja/web/api/xmlhttprequest/loadstart_event/index.html new file mode 100644 index 0000000000..3c7c201d89 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/loadstart_event/index.html @@ -0,0 +1,149 @@ +--- +title: 'XMLHttpRequest: loadstart イベント' +slug: Web/API/XMLHttpRequest/loadstart_event +tags: + - API + - Event + - ProgressEvent + - Web + - XMLHttpRequest + - events + - loadstart + - イベント + - ウェブ +translation_of: Web/API/XMLHttpRequest/loadstart_event +--- +
{{APIRef}}
+ +

loadstart イベントは、リクエストがデータを読み込み始めたときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能不可
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="controls">
+    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
+    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
+    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
+</div>
+
+<textarea readonly class="event-log"></textarea>
+ + + +

JS

+ +
const xhrButtonSuccess = document.querySelector('.xhr.success');
+const xhrButtonError = document.querySelector('.xhr.error');
+const xhrButtonAbort = document.querySelector('.xhr.abort');
+const log = document.querySelector('.event-log');
+
+function handleEvent(e) {
+    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
+}
+
+function addListeners(xhr) {
+    xhr.addEventListener('loadstart', handleEvent);
+    xhr.addEventListener('load', handleEvent);
+    xhr.addEventListener('loadend', handleEvent);
+    xhr.addEventListener('progress', handleEvent);
+    xhr.addEventListener('error', handleEvent);
+    xhr.addEventListener('abort', handleEvent);
+}
+
+function runXHR(url) {
+    log.textContent = '';
+
+    const xhr = new XMLHttpRequest();
+    addListeners(xhr);
+    xhr.open("GET", url);
+    xhr.send();
+    return xhr;
+}
+
+xhrButtonSuccess.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
+});
+
+xhrButtonError.addEventListener('click', () => {
+    runXHR('https://somewhere.org/i-dont-exist');
+});
+
+xhrButtonAbort.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
+});
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#event-xhr-loadstart')}}{{Spec2('XMLHttpRequest')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLHttpRequest.loadstart_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/mozanon/index.html b/files/ja/web/api/xmlhttprequest/mozanon/index.html new file mode 100644 index 0000000000..89076289f2 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/mozanon/index.html @@ -0,0 +1,18 @@ +--- +title: XMLHttpRequest.mozAnon +slug: Web/API/XMLHttpRequest/mozAnon +tags: + - API + - Property + - Reference + - XHR + - XMLHttpRequest + - cookie + - mozAnon + - 認証 + - 非標準 +translation_of: Web/API/XMLHttpRequest/mozAnon +--- +
{{draft}}{{APIRef('XMLHttpRequest')}}
+ +

XMLHttpRequest.mozAnon はブール値です。 true の場合、リクエストは Cookie または認証ヘッダなしで送信されます。

diff --git a/files/ja/web/api/xmlhttprequest/mozbackgroundrequest/index.html b/files/ja/web/api/xmlhttprequest/mozbackgroundrequest/index.html new file mode 100644 index 0000000000..7be9f73f24 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/mozbackgroundrequest/index.html @@ -0,0 +1,28 @@ +--- +title: XMLHttpRequest.mozBackgroundRequest +slug: Web/API/XMLHttpRequest/mozBackgroundRequest +tags: + - API + - Background Service + - Mozilla + - Non-standard + - Property + - Reference + - XHR + - XMLHttpRequest + - mozBackgroundRequest +translation_of: Web/API/XMLHttpRequest/mozBackgroundRequest +--- +

{{draft}}{{APIRef('XMLHttpRequest')}}

+ +
+

Note: このメソッドは、 Web コンテンツから使用できません。アクセスするには管理者特権が必要です。

+
+ +

XMLHttpRequest.mozBackgroundRequest はブール値で、オブジェクトがバックグラウンドサービスリクエストを表すかどうかを示します。  true の場合、要求に関連付けられているロードグループはなく、セキュリティダイアログはユーザーに表示されません。

+ +

通常、セキュリティダイアログ (認証や不正な証明書通知など) が表示される場合、この要求は失敗します。

+ +
+

Note: このプロパティは、 open() を呼び出す前に設定する必要があります。

+
diff --git a/files/ja/web/api/xmlhttprequest/mozresponsearraybuffer/index.html b/files/ja/web/api/xmlhttprequest/mozresponsearraybuffer/index.html new file mode 100644 index 0000000000..2193377076 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/mozresponsearraybuffer/index.html @@ -0,0 +1,20 @@ +--- +title: XMLHttpRequest.mozResponseArrayBuffer +slug: Web/API/XMLHttpRequest/mozResponseArrayBuffer +tags: + - API + - Non-standard + - Property + - Reference + - XHR + - XMLHttpRequest + - mozResponseArrayBufer +translation_of: Web/API/XMLHttpRequest/mozResponseArrayBuffer +--- +

{{draft}}{{APIRef('XMLHttpRequest')}}

+ +
+

Gecko 6 で廃止

+
+ +

リクエストに対する ArrayBuffer 応答であり、 JavaScript タイプの配列として記述されます。 リクエストが成功しなかった場合、またはリクエストがまだ送信されてない場合、これは NULL です。

diff --git a/files/ja/web/api/xmlhttprequest/mozsystem/index.html b/files/ja/web/api/xmlhttprequest/mozsystem/index.html new file mode 100644 index 0000000000..6915ecc5c6 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/mozsystem/index.html @@ -0,0 +1,18 @@ +--- +title: XMLHttpRequest.mozSystem +slug: Web/API/XMLHttpRequest/mozSystem +tags: + - AP + - Non-standard + - Property + - Reference + - XHR + - XMLHttpRequest + - ame Origin Policy + - mozSystem + - origin +translation_of: Web/API/XMLHttpRequest/mozSystem +--- +
{{draft}}{{APIRef('XMLHttpRequest')}}
+ +

mozSystem はブール値です。 true の場合、同じ発信元ポリシーはリクエストに適用されません。

diff --git a/files/ja/web/api/xmlhttprequest/multipart/index.html b/files/ja/web/api/xmlhttprequest/multipart/index.html new file mode 100644 index 0000000000..88ab2ec995 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/multipart/index.html @@ -0,0 +1,30 @@ +--- +title: XMLHttpRequest.multipart +slug: Web/API/XMLHttpRequest/multipart +tags: + - API + - Gecko + - Mozilla + - Non-standard + - Obsolete + - Property + - Reference + - XMLHttpRequest + - multipart +translation_of: Web/API/XMLHttpRequest/multipart +--- +
{{APIRef('XMLHttpRequest')}}{{non-standard_header}}
+ +
+

Gecko 22から廃止されました。

+
+ +

この Gecko 専用機能は Firefox/Gecko 22 で削除されました。代わりに Server-Sent Events、Web Sockets、または progress イベントからの responseText を使用してください。

+ +

この真偽値は、レスポンスが複数の XML ドキュメントのストリームになる可能性があることを示します。 true に設定されている場合、最初のレスポンスのコンテンツタイプは multipart/x-mixed-replace でなければなりません。すべてのリクエストは非同期でなければなりません。

+ +

このリクエストに書き込まれた各 XML ドキュメントに対して新しい XML DOM ドキュメントが作成され、ドキュメント間で onload ハンドラが呼び出されます。

+ +
+

メモ: これが設定されている場合、最初の XMLdocument がロードされた後、onload ハンドラや他のイベントハンドラはリセットされず、レスポンスの各部分が受信された後に onload ハンドラが呼び出されます。

+
diff --git a/files/ja/web/api/xmlhttprequest/onreadystatechange/index.html b/files/ja/web/api/xmlhttprequest/onreadystatechange/index.html new file mode 100644 index 0000000000..62de4d6402 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/onreadystatechange/index.html @@ -0,0 +1,79 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +tags: + - API + - Event + - Reference + - XHR + - XMLHttpRequest + - onreadystatechange + - readyState + - イベント + - ハンドラー + - プロパティ +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +
{{APIRef}}
+ +

{{domxref("EventHandler")}} で、 readyState 属性が変化するたびに呼び出されます。コールバックはユーザーインターフェイスのスレッドから呼び出されます。 XMLHttpRequest.onreadystatechange プロパティは、 {{domxref("Document/readystatechange_event", "readystatechange")}} イベントが発生するたびに、つまり {{domxref("XMLHttpRequest")}} の {{domxref("XMLHttpRequest.readyState", "readyState")}} が変化するたびに呼び出されるイベントハンドラーを保持します。

+ +
+

警告: これは同期要求で使用してはいけません。また、ネイティブコードから使用してはいけません。

+
+ +

構文

+ +
XMLHttpRequest.onreadystatechange = callback;
+ +

値

+ + + +

例

+ +
const xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(method, url, true);
+xhr.onreadystatechange = function () {
+  // ローカルファイルでは、 Mozilla Firefox で成功するとステータスは0になります
+  if(xhr.readyState === XMLHttpRequest.DONE) {
+    var status = xhr.status;
+    if (status === 0 || (status >= 200 && status < 400)) {
+      // リクエストが正常に終了した
+      console.log(xhr.responseText);
+    } else {
+      // あらら! リクエストでエラーが発生しました!
+    }
+  }
+};
+xhr.send();
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLHttpRequest.onreadystatechange")}}

diff --git a/files/ja/web/api/xmlhttprequest/open/index.html b/files/ja/web/api/xmlhttprequest/open/index.html new file mode 100644 index 0000000000..cc3a4a5fa8 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/open/index.html @@ -0,0 +1,73 @@ +--- +title: XMLHttpRequest.open() +slug: Web/API/XMLHttpRequest/open +tags: + - API + - HTTP + - Method + - Reference + - XHR + - XMLHttpRequest + - open + - メソッド +translation_of: Web/API/XMLHttpRequest/open +--- +
{{APIRef('XMLHttpRequest')}}
+ +

{{domxref("XMLHttpRequest")}} の open() メソッドは、新しく作成されたリクエストを初期化したり、既存のリクエストを再初期化したりします。

+ +
メモ: すでに有効なリクエスト (すでに open() が呼び出されたもの) に対してこのメソッドを呼び出すと、 {{domxref("XMLHttpRequest.abort", "abort()")}} を呼び出すのと等価になります。
+ +

構文

+ +
XMLHttpRequest.open(method, url[, async[, user[, password]]])
+
+ +

引数

+ +
+
method
+
使用する HTTP リクエストメソッドです。 "GET", "POST", "PUT", "DELETE", など。 HTTP(S) 以外の URL では無視されます。
+
url
+
リクエストを送信する URL を表す {{domxref("DOMString")}}。
+
async {{optional_inline}}
+
任意の論理値の引数で、既定値は trueです。操作が非同期的に行われるかどうかを示します。値が false の場合、 send() メソッドはレスポンスを受信するまで戻りません。 true の場合は、トランザクション完了の通知はイベントリスナーを使用して配信されます。 multipart 属性が true である場合は true でなければならず、さもなくば例外が発生します。 +
メモ: メインスレッドで同期リクエストを行うと、ユーザーの使い勝手を簡単に阻害するので避けるべきです。実際、多くのブラウザーではメインスレッドにおける同期的な XHR の対応を全面的に非推奨としています。同期リクエストは {{domxref("Worker")}} で許可されています。
+
+
user {{optional_inline}}
+
任意で、認証プロセスで使用するユーザー名です。既定では、これは null 値です。
+
password {{optional_inline}}
+
任意で、認証プロセスで使用するパスワードです。既定では、これは null 値です。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLHttpRequest.open")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/openrequest/index.html b/files/ja/web/api/xmlhttprequest/openrequest/index.html new file mode 100644 index 0000000000..18cc93f844 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/openrequest/index.html @@ -0,0 +1,18 @@ +--- +title: XMLHttpRequest.openRequest() +slug: Web/API/XMLHttpRequest/openRequest +tags: + - API + - DOM + - Firefox + - Gecko + - Method + - XHR + - XMLHttpRequest + - openRequest + - 非標準 +translation_of: Web/API/XMLHttpRequest/openRequest +--- +
{{APIRef("XMLHttpRequest")}}{{non-standard_header}}
+ +

この Mozilla 固有メソッドは、特権コード内からのみ使用でき、 XMLHttpRequest を初期化するために C++ コンテキストからのみ呼び出されます。 JavaScript コードからのリクエストを初期化するには、代わりに標準の {{domxref("XMLHttpRequest.open", "open()")}} メソッドを使用します。

diff --git a/files/ja/web/api/xmlhttprequest/progress_event/index.html b/files/ja/web/api/xmlhttprequest/progress_event/index.html new file mode 100644 index 0000000000..daa78ee0ee --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/progress_event/index.html @@ -0,0 +1,149 @@ +--- +title: 'XMLHttpRequest: progress イベント' +slug: Web/API/XMLHttpRequest/progress_event +tags: + - API + - Event + - ProgressEvent + - Reference + - Web + - XMLHttpRequest + - progress + - イベント + - ウェブ +translation_of: Web/API/XMLHttpRequest/progress_event +--- +
{{APIRef}}
+ +

progress イベントは、リクエストがもっとデータを受信した際に定期的に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="controls">
+    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
+    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
+    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
+</div>
+
+<textarea readonly class="event-log"></textarea>
+ + + +

JS

+ +
const xhrButtonSuccess = document.querySelector('.xhr.success');
+const xhrButtonError = document.querySelector('.xhr.error');
+const xhrButtonAbort = document.querySelector('.xhr.abort');
+const log = document.querySelector('.event-log');
+
+function handleEvent(e) {
+    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
+}
+
+function addListeners(xhr) {
+    xhr.addEventListener('loadstart', handleEvent);
+    xhr.addEventListener('load', handleEvent);
+    xhr.addEventListener('loadend', handleEvent);
+    xhr.addEventListener('progress', handleEvent);
+    xhr.addEventListener('error', handleEvent);
+    xhr.addEventListener('abort', handleEvent);
+}
+
+function runXHR(url) {
+    log.textContent = '';
+
+    const xhr = new XMLHttpRequest();
+    addListeners(xhr);
+    xhr.open("GET", url);
+    xhr.send();
+    return xhr;
+}
+
+xhrButtonSuccess.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
+});
+
+xhrButtonError.addEventListener('click', () => {
+    runXHR('https://somewhere.org/i-dont-exist');
+});
+
+xhrButtonAbort.addEventListener('click', () => {
+    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
+});
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#event-xhr-progress')}}{{Spec2('XMLHttpRequest')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.XMLHttpRequest.progress_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/readystate/index.html b/files/ja/web/api/xmlhttprequest/readystate/index.html new file mode 100644 index 0000000000..3f8f8568e7 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/readystate/index.html @@ -0,0 +1,107 @@ +--- +title: XMLHttpRequest.readyState +slug: Web/API/XMLHttpRequest/readyState +tags: + - AJAX + - Property + - Reference + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/readyState +--- +

{{APIRef('XMLHttpRequest')}}

+ +

XMLHttpRequest.readyState プロパティは XMLHttpRequest クライアントの状態を返します。XHR クライアントは次の状態のいずれかをとります:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値状態説明
0UNSENTクライアントは作成済み。open() はまだ呼ばれていない。
1OPENEDopen() が呼び出し済み。
2HEADERS_RECEIVEDsend() が呼び出し済みで、ヘッダーとステータスが利用可能。
3LOADINGダウンロード中。responseText には部分データが入っている。
4DONE操作が完了した。
+ +
+
UNSENT
+
XMLHttpRequest クライアントは作成済みだが、まだ open() メソッドは呼ばれていない。
+
OPENED
+
open() メソッドは実行済み。この状態の間は、リクエストヘッダーを setRequestHeader() メソッドを使ってセットできて、send() メソッドを呼び出して取得を開始できる。
+
HEADERS_RECEIVED
+
send() は呼び出し済みでレスポンスヘッダーを受け取り済み。
+
LOADING
+
レスポンスボディを受け取っている。ResponseType が "text" か空文字の場合、responseText はロードするごとに部分テキストを持つ。
+
DONE
+
取得操作が完了している。つまりデータ転送が完全に成功したか失敗したかどちらでもありうる。
+
+ +
+

状態名は Internet Explorer 11 以前のバージョンと異なります。UNSENT, OPENED, HEADERS_RECEIVED, LOADING,DONE, の代わりに、READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) and READYSTATE_COMPLETE (4) が使われています。

+
+ +

例

+ +
var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState will be 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState will be 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState will be 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState will be 4
+};
+
+xhr.send(null);
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('XMLHttpRequest', '#states')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザ実装状況

+ + + +

{{Compat("api.XMLHttpRequest.readyState")}}

diff --git a/files/ja/web/api/xmlhttprequest/response/index.html b/files/ja/web/api/xmlhttprequest/response/index.html new file mode 100644 index 0000000000..7175b77685 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/response/index.html @@ -0,0 +1,93 @@ +--- +title: XMLHttpRequest.response +slug: Web/API/XMLHttpRequest/response +tags: + - AJAX + - API + - Content + - Fetching + - Fetching Data + - Loading Data + - Property + - Read-only + - Reading Data + - Reference + - Response + - Server + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/response +--- +
{{APIRef('XMLHttpRequest')}}
+ +

{{domxref("XMLHttpRequest")}} response プロパティは、そのリクエストの{{domxref("responseType")}}によって、{{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript {{jsxref("Object")}}, or {{domxref("DOMString")}}といったレスポンスのボディを返します。

+ +

構文

+ +
var body = XMLHttpRequest.response;
+
+ +

値

+ +

{{domxref("XMLHttpRequest.responseType", "responseType")}}の値に基づく適切なオブジェクト。 {{domxref("XMLHttpRequest.open", "open()")}}を呼び出してリクエストを初期化した後や、{{domxref("XMLHttpRequest.send", "send()")}}を呼び出してリクエストをサーバーに送信する前に、responseTypeの値を設定することで、特定の形式でデータを提供するようにリクエストができます。

+ +

リクエストが未完了または失敗する場合、値はnullです。ただし、"text"や空の文字列である("")を使用してテキストデータを読み込む場合は除きます。リクエストがまだLOADING {{domxref("XMLHttpRequest.readyState", "readyState")}} (3)にある間、レスポンスはこれまでのレスポンスを含むことがあります。

+ +

レスポンスタイプは以下のとおりです。

+ +

{{page("/en-US/docs/Web/API/XMLHttpRequestResponseType", "Values")}}

+ +
+
+ +

例

+ +

下記に、サーバーからページをロードして処理する関数load()を例として提示します。仕組みとしては、XMLHttpRequestオブジェクトを作成し、{{event("readystatechange")}}イベントのリスナー（readyStateイベントがDONE （4）に変わるとresponseが取得され、それをload()のコールバック関数に渡すといった）を作成しています。

+ +

コンテンツは生のテキストデータとして処理されます（デフォルトの{{domxref("XMLHttpRequest.responseType", "responseType")}}を上書きするものは何もないため）。

+ +
var url = 'somePage.html'; //A local page
+
+function load(url, callback) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      callback(xhr.response);
+    }
+  }
+
+  xhr.open('GET', url, true);
+  xhr.send('');
+}
+
+
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-response-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザの対応

+ + + +

{{Compat("api.XMLHttpRequest.response")}}

+ +

関連

+ + diff --git a/files/ja/web/api/xmlhttprequest/responsetext/index.html b/files/ja/web/api/xmlhttprequest/responsetext/index.html new file mode 100644 index 0000000000..35f246a68f --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/responsetext/index.html @@ -0,0 +1,83 @@ +--- +title: XMLHttpRequest.responseText +slug: Web/API/XMLHttpRequest/responseText +tags: + - API + - Fetching Text + - Loading Text + - Property + - Read-only + - Reference + - XMLHttpRequest + - responseText + - プロパティ +translation_of: Web/API/XMLHttpRequest/responseText +--- +
{{draft}}
+ +
{{APIRef('XMLHttpRequest')}}
+ +

{{domxref("XMLHttpRequest")}} の responseText プロパティは読み取り専用で、送信されたリクエストに続いてサーバーから受け取ったテキストを返します。

+ +

構文

+ +
var resultText = XMLHttpRequest.responseText;
+ +

値

+ +

{{domxref("DOMString")}} で、 XMLHttpRequest を使用して受信したテキストデータ、またはリクエストが失敗したときは null、またはリクエストがまだ {{domxref("XMLHttpRequest.send", "send()")}} の呼び出しによって送信されていない場合は ""。

+ +

非同期リクエストを処理している間、 responseText の値は、データが完全に受信できておらず不完全であっても、常にサーバーから受信した現在のコンテンツを持ちます。

+ +

{{domxref("XMLHttpRequest.readyState", "readyState")}} の値が {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (4) になり、 {{domxref("XMLHttpRequest.status", "status")}} の値が 200 ("OK") になった場合、コンテンツ全体が受信されたことが分かります。

+ +

例外

+ +
+
InvalidStateError
+
{{domxref("XMLHttpRequest.responseType")}} が空文字列または "text" のどちらにも設定されていません。 responseText プロパティはテキストコンテンツのみで有効なので、他の値はエラーの状態です。
+
+ +

例

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// If specified, responseType must be empty string or "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLHttpRequest.responseText")}}

diff --git a/files/ja/web/api/xmlhttprequest/responsetype/index.html b/files/ja/web/api/xmlhttprequest/responsetype/index.html new file mode 100644 index 0000000000..0172edd482 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/responsetype/index.html @@ -0,0 +1,92 @@ +--- +title: XMLHttpRequest.responseType +slug: Web/API/XMLHttpRequest/responseType +tags: + - AJAX + - API + - HTTP + - HTTP Response + - HTTP Response Type + - HTTP レスポンス + - Property + - Reference + - Response + - XHR + - XMLHttpRequest + - responseType + - プロパティ +translation_of: Web/API/XMLHttpRequest/responseType +--- +
{{APIRef('XMLHttpRequest')}}
+ +

{{domxref("XMLHttpRequest")}} の responseType プロパティは、列挙型の文字列地で、レスポンスに含まれているデータの型を示します。作者がレスポンスの型を変更することもできます。 responseType の値として空文字列が設定された場合は、既定値である text が使用されます。

+ +

構文

+ +
var type = XMLHttpRequest.responseType;
+
+XMLHttpRequest.responseType = type;
+ +

値

+ +

文字列で、レスポンスに含まれているデータの型を指定する {{domxref("XMLHttpRequestResponseType")}} 列挙型の値を取ります。

+ +
+

responseType を特定の値に設定する場合は、サーバーが実際にその形式と互換性のあるレスポンスを送信していることを確認してください。サーバーが responseType に設定された値と互換性のないデータを返した場合、 {{domxref("XMLHttpRequest.response", "response")}} の値は null になります。

+
+ +

responseType が対応している値は以下の通りです。

+ +

{{page("/ja/docs/Web/API/XMLHttpRequestResponseType", "Values")}}

+ +

例外

+ +
+
InvalidAccessError
+
responseType の値の変更が同期モードの XMLHttpRequest 上で試みられたものの、 {{domxref("Worker")}} の中ではなかった場合。詳細については、下記の{{anch("Synchronous XHR restrictions", "同期 XHR の制限")}}を参照して下さい。
+
+ +

使用上の注意

+ +

同期 XHR の制限

+ +

responseType の値を同期 XMLHttpRequest で変更することは、リクエストが {{domxref("Worker")}} に属している場合を除いてできません。この制限は、ブラウザーのメインスレッドをブロックしてユーザーの使い勝手を妨害する巨大なトランザクションが、同期操作で使用されないことを保証する対策の一環として設けられています。

+ +

XMLHttpRequest は既定では非同期です。同期モードは、 false の値をオプションの async 引数に渡して {{domxref("XMLHttpRequest.open", "open()")}} ろ呼び出した場合のみ設定されます。

+ +

Worker での制限

+ +

responseType の値を document に指定しようとすると、 {{domxref("Worker")}} の中では失敗します。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-responsetype-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLHttpRequest.responseType")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/responseurl/index.html b/files/ja/web/api/xmlhttprequest/responseurl/index.html new file mode 100644 index 0000000000..b101ea8cab --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/responseurl/index.html @@ -0,0 +1,50 @@ +--- +title: XMLHttpRequest.responseURL +slug: Web/API/XMLHttpRequest/responseURL +tags: + - AJAX + - Read-only + - Reference + - URL + - XMLHttpRequest + - responseURL + - プロパティ +translation_of: Web/API/XMLHttpRequest/responseURL +--- +
{{APIRef('XMLHttpRequest')}}
+ +

XMLHttpRequest.responseURL プロパティは読み取り専用で、レスポンスのシリアライズされた URL を返します。 URL が null の場合は、空文字を返します。 URL に存在する URL フラグメントはすべて取り除かれます。 responseURL の値は、任意のリダイレクト後に得られる最後の URL になります。

+ +

例

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/test', true);
+xhr.onload = function () {
+  console.log(xhr.responseURL); // http://example.com/test
+};
+xhr.send(null);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-responseurl-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの対応

+ + + +

{{Compat("api.XMLHttpRequest.responseURL")}}

diff --git a/files/ja/web/api/xmlhttprequest/responsexml/index.html b/files/ja/web/api/xmlhttprequest/responsexml/index.html new file mode 100644 index 0000000000..f5f989624a --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/responsexml/index.html @@ -0,0 +1,109 @@ +--- +title: XMLHttpRequest.responseXML +slug: Web/API/XMLHttpRequest/responseXML +tags: + - AJAX + - API + - Fetching XML + - Loading XML + - Property + - Read-only + - Reading XML + - Reference + - Transfer + - XML + - XMLHttpRequest + - download + - responseXML + - upload + - アップロード + - ダウンロード + - プロパティ + - 変換 + - 読み取り専用 +translation_of: Web/API/XMLHttpRequest/responseXML +--- +
{{APIRef('XMLHttpRequest')}}
+ +

XMLHttpRequest.responseXML は読み取り専用のプロパティで、リクエストによって受け取った HTML または XML を含む {{domxref("Document")}}、またはリクエストが成功しなかった場合、まだ送信されていない場合、データが XML または HTML として解釈できない場合は null を返します。

+ +
+

メモ: responseXML という名前はこのプロパティの歴史の遺物です。これは HTML および XML の両方で動作します。

+
+ +

ふつう、レスポンスは "text/xml" として解釈されます。 {{domxref("XMLHttpRequest.responseType", "responseType")}} が "document" に設定され、リクエストが非同期に行われた場合、レスポンスは代わりに "text/html" として解釈されます。他の型のデータでは、 data: の URL の場合と同様、 responseXML は null になります。

+ +

サーバーが {{HTTPHeader("Content-Type")}} を "text/xml" とも "application/xml" とも指定しなかった場合、 {{domxref("XMLHttpRequest.overrideMimeType()")}} を使用して強制的に XML として解釈させることができます。

+ +

このプロパティはワーカーでは使用できません。

+ +

構文

+ +
var data = XMLHttpRequest.responseXML;
+
+ +

値

+ +

{{domxref("XMLHttpRequest")}} を用いて受け取った XML または HTML を解釈した {{domxref("Document")}}、またはデータを受け取っていなかったり、データが XML/HTML でな買ったりした場合は null

+ +

例外

+ +
+
InvalidStateError
+
{{domxref("XMLHttpRequest.responseType", "responseType")}} が "document" でも空文字列でもない。
+
+ +

例

+ +
var xhr = new XMLHttpRequest;
+xhr.open('GET', '/server');
+
+// responseType を指定する場合は、空文字列または "document" でなければならない
+xhr.responseType = 'document';
+
+// レスポンスを XML として解釈するよう強制する
+xhr.overrideMimeType('text/xml');
+
+xhr.onload = function () {
+  if (xhr.readyState === xhr.DONE && xhr.status === 200) {
+    console.log(xhr.response, xhr.responseXML);
+  }
+};
+
+xhr.send();
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-responsexml-attribute', 'responseXML')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの対応

+ + + +

{{Compat("api.XMLHttpRequest.responseXML")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/send/index.html b/files/ja/web/api/xmlhttprequest/send/index.html new file mode 100644 index 0000000000..6471e8c2fb --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/send/index.html @@ -0,0 +1,133 @@ +--- +title: XMLHttpRequest.send() +slug: Web/API/XMLHttpRequest/send +tags: + - AJAX + - API + - HTTP リクエスト + - Reference + - XHR + - XHR リクエスト + - XMLHttpRequest + - send + - ウェブ + - メソッド +translation_of: Web/API/XMLHttpRequest/send +--- +
{{APIRef('XMLHttpRequest')}}
+ +

{{domxref("XMLHttpRequest")}} の send() メソッドは、リクエストをサーバーに送信します。リクエストが非同期の場合 (これが既定)、このメソッドはリクエストが送信されるとすぐに戻り、結果はイベントを用いて配信されます。リクエストが同期の場合、このメソッドはレスポンスが到着するまで戻りません。

+ +

send() はリクエストの本文を示す引数を一つ受け取ることができます。これは主に {{HTTPMethod("PUT")}} のようなリクエストに使用されます。リクエストメソッドが {{HTTPMethod("GET")}} 又は {{HTTPMethod("HEAD")}} であれば、 body 引数は無視され、リクエストの本文は null に設定されます。

+ +

{{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}} を使用して {{HTTPHeader("Accept")}} ヘッダーを設定しなかった場合、 Accept ヘッダーは "*/*" 型 (任意の型) が送信されます。

+ +

構文

+ +
XMLHttpRequest.send(body)
+
+ +

引数

+ +
+
body {{optional_inline}}
+
XHR のリクエストの中で送られる本文データです。次のものが使用できます。 +
    +
  • {{domxref("Document")}}: 送信前にシリアライズされている場合。
    • +
  • BodyInit: Fetch の仕様書によれば、 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("ReadableStream")}}, {{domxref("USVString")}} 型のオブジェクトが利用できます。
    • +
+ body に値が設定されていない場合、既定値の null が使用されます。
+
+ +

バイナリコンテンツの送信 (例えばファイルのアップロード) の最適な方法は、 {{domxref("ArrayBufferView")}} または {{domxref("Blob")}} と send() メソッドを組み合わせることです。

+ +

返値

+ +

undefined

+ +

例外

+ + + + + + + + + + + + + + + + + + +
例外説明
InvalidStateErrorこのリクエストに対してすでに send() が呼び出されているか、リクエストが完了している。
NetworkError読み込むリソースの型が Blob であり、メソッドが GET ではない。
+ +

GET の例

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.onload = function () {
+  // リクエストの終了。ここの処理を実行します。
+};
+
+xhr.send(null);
+// xhr.send('string');
+// xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send(document);
+
+ +

POST の例

+ +
var xhr = new XMLHttpRequest();
+xhr.open("POST", '/server', true);
+
+//リクエストに従って正しいヘッダー情報を送信してください
+xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+xhr.onreadystatechange = function() { // 状態が変化すると関数が呼び出されます。
+    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+        // リクエストの終了。ここの処理を実行します。
+    }
+}
+xhr.send("foo=bar&lorem=ipsum");
+// xhr.send(new Int8Array());
+// xhr.send(document);
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの対応

+ + + +
{{Compat("api.XMLHttpRequest.send")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ja/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html new file mode 100644 index 0000000000..22217cb336 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html @@ -0,0 +1,155 @@ +--- +title: バイナリデータの送信と受信 +slug: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data +tags: + - AJAX + - FileReader + - MIME + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data +--- +

JavaScript 型付き配列を使ったバイナリデータの受信

+ +

XMLHttpRequest オブジェクトの responseType プロパティで、サーバーに期待する応答の種類を変更することができます。設定可能な値は空文字列 (既定), "arraybuffer", "blob", "document", "json", "text" です。 response プロパティにはエンティティの本体が responseType に応じて ArrayBuffer, Blob, Document, JSON または文字列で格納されます。要求が不完全であったり成功しなかった場合は null になります。

+ +

このサンプルでは画像をバイナリファイルとして読み込み、生のバイト列から８ビット符号なし整数値の配列を作成します。なお、これは画像をデコードしてピクセルを読み取ることは行いません。そのためには png decoding library が必要になるでしょう。

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "arraybuffer";
+
+oReq.onload = function (oEvent) {
+  var arrayBuffer = oReq.response; // メモ: oReq.responseText ではない
+  if (arrayBuffer) {
+    var byteArray = new Uint8Array(arrayBuffer);
+    for (var i = 0; i < byteArray.byteLength; i++) {
+      // do something with each byte in the array
+    }
+  }
+};
+
+oReq.send(null);
+
+ +

上記の方法の代わりに {{domxref("Blob")}} インタフェースを利用して arraybuffer データから直接 Blob を構築します｡

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "blob";
+
+oReq.onload = function(oEvent) {
+  var blob = oReq.response;
+  // ...
+};
+
+oReq.send();
+ +

古いブラウザーでのバイナリデータの受信

+ +

下に示す load_binary_resource() 関数は、指定した URL からロードしたバイナリデータを関数の呼び元に返します。

+ +
function load_binary_resource(url) {
+  var req = new XMLHttpRequest();
+  req.open('GET', url, false);
+  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
+  req.overrideMimeType('text\/plain; charset=x-user-defined');
+  req.send(null);
+  if (req.status != 200) return '';
+  return req.responseText;
+}
+
+ +

マジックは５行目で、 MIME タイプを上書きしてブラウザーに強制的に、ユーザー定義の文字セットを使用したプレインテキストとして扱わせます。これにより、ブラウザーはこれを解釈せず、未処理のままバイト列を通します。

+ +
var filestream = load_binary_resource(url);
+var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
+
+ +

上記のサンプルでは、ロードしたバイナリデータ内のオフセット x のバイトを取得します。 x の有効範囲は 0 から filestream.length-1 です。

+ +

詳細な説明は downloading binary streams with XMLHttpRequest を見て下さい。また downloading files も見て下さい。

+ +

バイナリデータの送信

+ +

XMLHttpRequest の send メソッドが拡張され、 ArrayBuffer, {{domxref("Blob")}}, または {{domxref("File")}} オブジェクトを受け付ける事でバイナリデータの送信が容易になりました.

+ +

続くサンプルはその場で作ったテキストファイルを POST メソッドで "file" をサーバーに送信します。このサンプルはプレインテキストを使っていますが、代わりにデータがバイナリファイルだとイメージする事も出来ます。

+ +
var oReq = new XMLHttpRequest();
+oReq.open("POST", url, true);
+oReq.onload = function (oEvent) {
+  // Uploaded.
+};
+
+var blob = new Blob(['abc123'], {type: 'text/plain'});
+
+oReq.send(blob);
+
+ +

バイナリデータとして型付き配列を送信

+ +

同等にバイナリデータとして JavaScript の型付き配列を送信することもできます。

+ +
var myArray = new ArrayBuffer(512);
+var longInt8View = new Uint8Array(myArray);
+
+// いくらかのデータを作成
+for (var i=0; i< longInt8View.length; i++) {
+  longInt8View[i] = i % 256;
+}
+
+var xhr = new XMLHttpRequest;
+xhr.open("POST", url, false);
+xhr.send(myArray);
+
+ +

これは 8ビット整数の 512 バイトの配列を構築して送信します。勿論、好きな任意のバイナリデータで使えます。

+ +
メモ: XMLHttpRequest を使った ArrayBuffer オブジェクトの送信サポートは Gecko 9.0 {{geckoRelease("9.0")}}で追加されました。他のブラウザーのサポート情報をここに追記して下さい。
+ +

フォーム送信とファイルアップロード

+ +

この節をお読み下さい。

+ +

Firefox 独自のサンプル

+ +

このサンプルでは非同期にバイナリコンテンツを送信するのに POST メソッドと Firefox にある非標準の sendAsBinary() を使います。

+ +
var req = new XMLHttpRequest();
+req.open("POST", url, true);
+// set headers and mime-type appropriately
+req.setRequestHeader("Content-Length", 741);
+req.sendAsBinary(aBody);
+
+ +

4行目で Content-Length ヘッダに 741 をセットするのは、データが 741 バイト長である事を示します。送信データの実際のサイズに応じてこの値を変更する必要があります。

+ +

５行目では sendAsBinary() メソッドを使ってリクエストをはじめます。

+ +
メモ: この sendAsBinary メソッドは標準外であり、 Gecko 31 {{ geckoRelease(31) }} で非推奨扱いになって、まもなく削除されるでしょう。上で説明したように、標準の send(Blob data) メソッドを使用することができます。
+ +

また、{{interface("nsIFileInputStream")}} のインスタンスの send() を通す事でバイナリコンテンツを送信できます。この場合は、あなた自身が Content-Length ヘッダセットしてはならず、この情報はストリームから自動的に取得されます。

+ +
// ファイルからストリームを作成する。
+var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                       .createInstance(Components.interfaces.nsIFileInputStream);
+stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance
+
+// ファイルの MIME タイプを特定しようとする
+var mimeType = "text\/plain";
+try {
+  var mimeService = Components.classes["@mozilla.org/mime;1"]
+          .getService(Components.interfaces.nsIMIMEService);
+  mimeType = mimeService.getTypeFromFile(file); // file is an nsIFile instance
+}
+catch (oEvent) { /* eat it; just use text/plain */ }
+
+// 送信
+var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.open('PUT', url, false); /* synchronous! */
+req.setRequestHeader('Content-Type', mimeType);
+req.send(stream);
+
+ +
{{APIRef("XMLHttpRequest")}}
diff --git a/files/ja/web/api/xmlhttprequest/setrequestheader/index.html b/files/ja/web/api/xmlhttprequest/setrequestheader/index.html new file mode 100644 index 0000000000..7879ae9d54 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/setrequestheader/index.html @@ -0,0 +1,82 @@ +--- +title: XMLHttpRequest.setRequestHeader() +slug: Web/API/XMLHttpRequest/setRequestHeader +tags: + - API + - HTTP + - HTTP Header + - Method + - NeedsExample + - Reference + - Request header + - XHR + - XHR Request + - XMLHttpRequest + - header + - request + - setRequestHeader +translation_of: Web/API/XMLHttpRequest/setRequestHeader +--- +
{{APIRef('XMLHttpRequest')}}
+ +

{{domxref("XMLHttpRequest")}} の setRequestHeader() メソッドは、 HTTP リクエストヘッダーの値を設定します。 setRequestHeader() は、 {{domxref("XMLHttpRequest.open", "open()")}} の呼び出しの後、 {{domxref("XMLHttpRequest.send", "send()")}} の呼び出しの前に呼び出さなければなりません。同じヘッダーについてこのメソッドを複数回呼び出された場合は、複数の値が単一のリクエストヘッダーにマージされます。

+ +

最初に setRequestHeader() を呼び出した後、呼び出す度に、指定されたテキストは既存のヘッダーの内容の末尾に追加されます。

+ +

この関数を使用して {{HTTPHeader("Accept")}} ヘッダーが設定されなかった場合、 {{domxref("XMLHttpRequest.send", "send()")}} が呼び出されると、 Accept ヘッダーは */* の値で送信されます。

+ +

セキュリティ上の理由で、いくつかのヘッダは、ユーザエージェントからしか制御できません。これらのヘッダーには、 {{Glossary("Forbidden_header_name", "禁止ヘッダー名", 1)}} および {{Glossary("Forbidden_response_header_name", "禁止レスポンスヘッダー名", 1)}} を含みます。

+ +
+

注: カスタムフィールドについては、ドメインをまたがってリクエストを行うと、 "not allowed by Access-Control-Allow-Headers in preflight response" の例外に遭遇することがあります。この場合、サーバー側でレスポンスヘッダーに {{HTTPHeader("Access-Control-Allow-Headers")}} を設定する必要があります。

+
+ +

構文

+ +
XMLHttpRequest.setRequestHeader(header, value)
+
+ +

引数

+ +
+
header
+
値を設定するヘッダーの名前。
+
value
+
そのヘッダーの本体として設定する値。
+
+ +

返値

+ +

undefined です。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-setrequestheader()-method', 'setRequestHeader()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLHttpRequest.setRequestHeader")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/status/index.html b/files/ja/web/api/xmlhttprequest/status/index.html new file mode 100644 index 0000000000..afa2ef79c5 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/status/index.html @@ -0,0 +1,80 @@ +--- +title: XMLHttpRequest.status +slug: Web/API/XMLHttpRequest/status +tags: + - API + - XMLHttpRequest + - XMLHttpRequest の結果 + - status + - エラー + - プロパティ + - リファレンス +translation_of: Web/API/XMLHttpRequest/status +--- +
{{APIRef('XMLHttpRequest')}}
+ +

XMLHttpRequest.status プロパティは読み取り専用で、 XMLHttpRequest のレスポンスにおける数値の HTTP ステータスコードを返します。

+ + + +

リクエストが完了する前は、 status の値は 0 になります。 XMLHttpRequest がエラーになった場合も、ブラウザーはステータスとして 0 を返します。

+ +

例

+ +
var xhr = new XMLHttpRequest();
+console.log('UNSENT: ', xhr.status);
+
+xhr.open('GET', '/server');
+console.log('OPENED: ', xhr.status);
+
+xhr.onprogress = function () {
+  console.log('LOADING: ', xhr.status);
+};
+
+xhr.onload = function () {
+  console.log('DONE: ', xhr.status);
+};
+
+xhr.send();
+
+/**
+ * Outputs the following:
+ *
+ * UNSENT: 0
+ * OPENED: 0
+ * LOADING: 200
+ * DONE: 200
+ */
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-status-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLHttpRequest.status")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/ja/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html new file mode 100644 index 0000000000..6cadda4966 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html @@ -0,0 +1,232 @@ +--- +title: 同期と非同期のリクエスト +slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +tags: + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +--- +

{{domxref('XMLHttpRequest')}} は同期及び非同期通信の両方に対応しています。しかし、一般的には性能上の理由により、同期リクエストより非同期リクエストを推奨するべきです。

+ +

同期リクエストはプログラムの実行をブロックし、画面を「フリーズ」させたりユーザー操作が反応しない状態にしたりすることがあります。

+ +

非同期リクエスト

+ +

非同期 {{domxref('XMLHttpRequest')}} を使用すると、データが到着したときにコールバックを受け取ります。これにより、リクエストが処理されている間、ブラウザーは通常通りに動作することができます。

+ +

例: コンソールログへファイルを送信する

+ +

最も簡単な非同期 {{domxref('XMLHttpRequest')}} の使用法を示します。

+ +
var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null);
+ +

2行目で第3引数を true にすることで、リクエストを非同期に処理することを指定しています。

+ +

3行目はイベントハンドラー関数オブジェクトを生成し、リクエストの onload 属性に割り当てています。このハンドラーは、4行目でリクエストの readyState を見てトランザクションが完了したかどうかを確認し、もしそうであり、かつ HTTP ステータスが 200 であれば、受信した内容をコンソールにダンプします。エラー発生時には、エラーメッセージが表示されます。

+ +

15行目では実際にリクエストを開始します。コールバック処理は状態が変化するたびに呼び出されます。

+ +

例: 外部ファイルを読込む標準的な関数を書く

+ +

たくさんの外部ファイルを読み込まなければならないことがあります。これは {{domxref('XMLHttpRequest')}} オブジェクトを非同期で使用して、読み込まれたファイルの内容を指定されたリスナに切り替える標準的な関数です。

+ +
function xhrSuccess() {
+    this.callback.apply(this, this.arguments);
+}
+
+function xhrError() {
+    console.error(this.statusText);
+}
+
+function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) {
+    var xhr = new XMLHttpRequest();
+    xhr.callback = callback;
+    xhr.arguments = Array.prototype.slice.call(arguments, 2);
+    xhr.onload = xhrSuccess;
+    xhr.onerror = xhrError;
+    xhr.open("GET", url, true);
+    xhr.send(null);
+}
+
+ +

使用法:

+ +
function showMessage(message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+
+ +

ユーティリティ関数 loadFile の引数は、 (i) (HTTP の GET リクエストを介して) 読み込む対象の URL、 (ii) XHR 操作の正常終了時に実行する関数、 (iii) 任意で XHR オブジェクトから成功時のコールバック関数に (arguments プロパティで) そのまま渡される追加の引数のリストです。

+ +

1行目では、 XHR 操作の正常終了時に呼び出される関数を宣言しています。これは、 loadFile 関数の呼び出しの中で XHR オブジェクトのプロパティに (11行目で) 割り当てられたコールバック関数 (この場合は showMessage 関数) を呼び出します。 loadFile 関数の呼び出しに提供される追加の引数は (もしあれば)、コールバック関数の実行時に「適用」されます。

+ +

5行目では、 XHR 操作の完了に失敗した時に呼び出される関数を宣言しています。

+ +

11行目では、 XHR オブジェクトの callback プロパティに loadFile の第2引数で渡された成功時のコールバック関数を格納します。

+ +

12行目では、 loadFile の呼び出しで与えられた引数の配列を分割します。第3引数以降、残りのすべての引数が集められ、変数 xhr の arguments プロパティに割り当てられ、成功時のコールバック関数 xhrSuccess に渡され、最終的には xhrSuccess 関数から呼び出されるコールバック関数 (この場合は showMessage 関数) に渡されます。

+ +

15行目では、リクエストを非同期に処理することを指示するため、第3引数に true を指定しています．

+ +

16行目で実際にリクエストを実行しています。

+ +

例: タイムアウトの利用

+ +

読み込みが行われるのを待つ間、プログラムが永遠に待つことを防ぐためにタイムアウトを利用することができます。これは次のように、 {{domxref('XMLHttpRequest')}} オブジェクト上の timeout プロパティの値を設定することで行うことができます。

+ +
function loadFile(url, timeout, callback) {
+    var args = Array.prototype.slice.call(arguments, 3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}
+ +

ontimeout ハンドラーを設定することで、 "timeout" イベントを処理するコードを追加していることに注意してください。

+ +

使用法:

+ +
function showMessage (message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+
+ +

ここではタイムアウトを2000ミリ秒に設定しています．

+ +
+

注: timeout の対応は {{Gecko("12.0")}} で追加されました。

+
+ +

同期リクエスト

+ +
注: Gecko 30.0 {{geckoRelease("30.0")}}, Blink 39.0, Edge 13 以降では、メインスレッド上での同期リクエストはユーザーの使い勝手に悪影響を与えるため、非推奨になっています。
+ +

同期 XHR リクエストはしばしばウェブ上でハングアップの原因となります。しかし、開発者は通常、ハングアップが発生するのはネットワークの状態が悪かったり、リモートサーバの応答が遅かったりしたときだけなので、この問題に気づくことはありません。 Synchronous XHR は現在非推奨の状態にあります。開発者は同期 API から離れて、代わりに非同期リクエストを使うことをお勧めします。

+ +

timeout や abort 等の XHR の新機能は同期 XHR では許可されていません。実行すると InvalidAccessError が発生するでしょう。

+ +

例: HTTP 同期リクエスト

+ +

この例は単純な同期リクエストの作成方法を示しています。

+ +
var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` で同期リクエストになる
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+
+ +

3行目でリクエストを送信しています。引数が null であることは、 GET リクエストに本文が必要ないことを示しています。

+ +

5行目ではトランザクション完了後，ステータスコードをチェックしています。結果のコードが 200 -- HTTP の "OK" の結果 -- ならば、文書のテキストコンテンツがコンソールに出力されます。

+ +

例: ワーカーからの同期 HTTP リクエスト

+ +

同期リクエストが通常、実行をブロックしない稀な例として、 Worker 内での {{domxref('XMLHttpRequest')}} の利用があります。

+ +

example.html (主ページ):

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+</script>
+</head>
+<body></body>
+</html>
+
+ +

myFile.txt ({{domxref('XMLHttpRequest')}} 同期呼出しの対象):

+ +
Hello World!!
+
+ +

myTask.js (Worker):

+ +
self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // 同期リクエスト
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+
+ +
注: 但し、 Worker を使っているため結果的に非同期になります。
+ +

これは、バックグラウンドでサーバーとやり取りしたり、一部のコンテンツを先読みしたりするために便利です。例と詳細については Web Worker の利用を参照して下さい。

+ +

同期 XHR を使用する場面を Beacon API で対応する

+ +

{{domxref('XMLHttpRequest')}} の同期的な使用が置き換えられない場面がいくつかあります。例えば {{domxref("Window.unload_event", "unload")}}, {{domxref("Window.beforeunload_event", "beforeunload")}}, {{domxref("Window.pagehide_event", "pagehide")}} などのイベントの処理中などです。 fetch() API を keepalive フラグ付きで使用することを検討してください。 fetch API を keepalive フラグ付きで使用できないのであれば、ふつうは快適なユーザー操作を提供するために {{domxref("navigator.sendBeacon()")}} API でこれらの場合に対応することができます。

+ +

次の例は、 unload ハンドラー内で同期 {{domxref('XMLHttpRequest')}} を使用してサーバーにデータを送信することを試みる、実験的な分析コードを示しています。この結果、ページのアンロードに遅延が発生します。

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // 第3引数で同期 XHR を指定しています。 :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+
+ +

sendBeacon() メソッドを使用すると、ユーザーエージェントに機会があるとき、アンロードを遅延させたり次の操作の性能に影響を与えたりすることなくデータがウェブサーバーに非同期で送信されます。

+ +

次の例は、 sendBeacon() メソッドを使用してサーバーにデータを送信する実験的な分析コードパターンを示しています。

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/timeout/index.html b/files/ja/web/api/xmlhttprequest/timeout/index.html new file mode 100644 index 0000000000..143e9ea665 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/timeout/index.html @@ -0,0 +1,68 @@ +--- +title: XMLHttpRequest.timeout +slug: Web/API/XMLHttpRequest/timeout +tags: + - AJAX + - Reference + - XHR + - XMLHttpRequest + - timeout + - プロパティ + - 非同期 XHR + - 非同期 XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/timeout +--- +
{{APIRef('XMLHttpRequest')}}
+ +

XMLHttpRequest.timeout はリクエストが自動的に終了するまでの時間をミリ秒で示す unsigned long 型のプロパティです。既定値はタイムアウトが無いことを示す 0 に設定されています。 timeout は{{Glossary('document environment', '文書環境')}}で利用される同期型や InvalidAccessError の例外を投げる XMLHttpRequests に利用することはできません。タイムアウトとなった場合、 timeout イベントが発火します。 {{gecko_minversion_inline("12.0")}}

+ +
+
+
メモ: timeout は自分のウィンドウを持つ場合に同期で利用することは認められていません。
+
+
非同期リクエストでの timeout の使用
+
+ +

Internet Explorer においては、 timeout プロパティは open() メソッドを呼んでから send() メソッドを呼ぶまでの間しかセットすることはできません。

+ +

例

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // time in milliseconds
+
+xhr.onload = function () {
+  // Request finished. Do processing here.
+};
+
+xhr.ontimeout = function (e) {
+  // XMLHttpRequest timed out. Do something here.
+};
+
+xhr.send(null);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの対応

+ + + +

{{Compat("api.XMLHttpRequest.timeout")}}

diff --git a/files/ja/web/api/xmlhttprequest/timeout_event/index.html b/files/ja/web/api/xmlhttprequest/timeout_event/index.html new file mode 100644 index 0000000000..d9cea5662e --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/timeout_event/index.html @@ -0,0 +1,81 @@ +--- +title: 'XMLHttp​Request: timeout イベント' +slug: Web/API/XMLHttpRequest/timeout_event +tags: + - Reference + - XHR + - XMLHttpRequest + - timeout + - イベント + - タイムアウト +translation_of: Web/API/XMLHttpRequest/timeout_event +--- +
{{APIRef}}
+ +

timeout イベントは、設定された時間が経過し進捗が終了すると発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("ProgressEvent")}}
イベントハンドラープロパティ{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+ +

例

+ +
const client = new XMLHttpRequest();
+client.open('GET', 'http://www.example.org/example.txt');
+client.ontimeout = () => {
+    console.error('Timeout!!')
+};
+
+client.send();
+ +

イベントハンドラーは {{domxref("EventTarget/addEventListener", "addEventListener()")}} メソッドを使用して設定することもできます。

+ +
client.addEventListener('timeout', () => {
+    console.error("Timeout!!");
+});
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#event-xhr-timeout', 'timeout event')}}{{Spec2('XMLHttpRequest')}} 
+ +

ブラウザーの対応

+ +

{{Compat("api.XMLHttpRequest.timeout_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/upload/index.html b/files/ja/web/api/xmlhttprequest/upload/index.html new file mode 100644 index 0000000000..4f83cc6f34 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/upload/index.html @@ -0,0 +1,105 @@ +--- +title: XMLHttpRequest.upload +slug: Web/API/XMLHttpRequest/upload +tags: + - AJAX + - API + - Monitoring XMLHttpRequest + - Property + - Read-only + - Reference + - Sending Files + - Uploading + - XHR + - XHR Uploads + - XMLHttpRequest + - XMLHttpRequest Uploads + - XMLHttpRequestUpload + - upload + - アップロード + - ファイル送信 +translation_of: Web/API/XMLHttpRequest/upload +--- +
{{APIRef('XMLHttpRequest')}}
+ +

{{domxref("XMLHttpRequest")}} の upload プロパティは、アップロードの進捗を監視することができる {{domxref("XMLHttpRequestUpload")}} オブジェクトを返します。これは不透過なオブジェクトですが、 {{domxref("XMLHttpRequestEventTarget")}} でもあるため、進捗を追跡するために添付することができます。

+ +

以下のイベントは upload オブジェクトを起動してアップロードを監視する目に使用することができます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
イベントイベントリスナー解説
{{event("loadstart")}}{{domxref("XMLHttpRequest.onloadstart", "onloadstart")}}アップロードが始まった。
{{event("progress")}}{{domxref("XMLHttpRequest.onprogress", "onprogress")}}進捗の量を示すために定期的に発生する。
{{event("abort")}}{{domxref("XMLHttpRequest.onabort", "onabort")}}アップロード操作が中断された。
{{event("error")}}{{domxref("XMLHttpRequest.onerror", "onerror")}}アップロードがエラーのために失敗した。
{{event("load")}}{{domxref("XMLHttpRequest.onload", "onload")}}アップロードが完全に成功した。
{{event("timeout")}}{{domxref("XMLHttpRequest.ontimeout", "ontimeout")}}返事が {{domxref("XMLHttpRequest.timeout")}} で指定された時間間隔内に届かなかったため、アップロードがタイムアウトされた。
{{event("loadend")}}{{domxref("XMLHttpRequest.onloadend", "onloadend")}}アップロードが終了した。このイベントでは成功か失敗かを区別することはできず、結果にかかわらずアップロードが終了したときに送信されます。このイベントの前に、 load, error, abort, timeout のうちの1つがアップロードが終了した理由を示すために配信されます。
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest', '#the-upload-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLHttpRequest.upload")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/ja/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..635fd0bbec --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,800 @@ +--- +title: XMLHttpRequest の使用 +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +tags: + - AJAX + - AJAXfile + - DOM + - HTTP + - JXON + - MakeBrowserAgnostic + - XHR + - XML + - XMLHttpRequest + - ガイド + - チュートリアル + - 高度 +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +
{{APIRef("XMLHttpRequest")}}
+ +

このガイドでは、ウェブサイトとサーバーの間でデータ交換をするために、 {{domxref("XMLHttpRequest")}} を使用して HTTP リクエストを発行する方法を紹介します。 XMLHttpRequest のよくある使用例やもっと分かりにくい使用例も含まれています。

+ +

HTTP リクエストを送るには、 XMLHttpRequest オブジェクトを作成し、 URL を開いてリクエストを送信します。トランザクションが完了すると、オブジェクトには結果の HTTP ステータスコードやレスポンスの本文などの有益な情報が格納されます。

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.addEventListener("load", reqListener);
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

リクエストの種類

+ +

XMLHttpRequest によって作成されたリクエストは、非同期または同期のいずれかの方法でデータを取得することが可能です。リクエストをどちらの方法で行うかは、 {{domxref("XMLHttpRequest.open()")}} メソッドの async 引数 (第3引数) で指示できます (オプション)。このプロパティを true に指定するか指定しなければ XMLHttpRequest は非同期で処理され、それ以外だと同期的に扱われます。これら二つの種類のリクエストに関する詳細および使用例は、同期および非同期リクエストのページを参照してください。ウェブワーカー以外では同期リクエストを使用しないでください。

+ +
注: Gecko 30.0 {{ geckoRelease("30.0") }} から、メインスレッドにおける同期リクエストはユーザーの使い勝手に悪影響を与えるため、非推奨になりました。
+ +
注: コンストラクター関数 XMLHttpRequest は XML 文書に限定されていません。 "XML" で始まっているのは、これが作成されたときに非同期データ交換に使用されていた主要な形式が XML であったからです。
+ +

レスポンスの取り扱い

+ +

HTML Living Standard 仕様書で定義されている {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} コンストラクターの response 属性は何種類かがあります。これらはクライアントに XMLHttpRequest にレスポンスのステータスに関する重要な情報を作るように指示します。テキスト以外のレスポンス型を扱う場合は、後の節で概説する操作や解析が入ることがあるかもしれません。

+ +

responseXML プロパティの解析と操作

+ +

リモートの XML 文書のコンテンツを得るために XMLHttpRequest を使う場合、 responseXML プロパティが解析済みの XML 文書を含む DOM オブジェクトとなります。これによって、操作や解析が難しくなる可能性があります。この XML 文書を解析するには主な4つの方法があります。

+ +
    +
  1. 部品を指すために XPath を使う。
    2. +
  2. 手動で XML を解析及びシリアライズして文字列やオブジェクトにする。
    3. +
  3. {{domxref("XMLSerializer")}} を使って DOM ツリーを文字列やファイルにシリアライズする。
    4. +
  4. 事前に XML 文書の中身が常に分かっている場合は {{jsxref("RegExp")}} を使うこともできます。改行を RegExp でスキャンする場合に、改行を除去した方がよく見えることもありますが、 XML 文書が少しでも変更されると、メソッドは失敗しがちなため、このメソッドは「最後の手段」です。
    5. +
+ +
+

注: XMLHttpRequest は {{domxref("XMLHttpRequest.responseXML", "responseXML")}} プロパティを使用することによって、 HTML を解釈できるようになりました。この方法について学ぶには、 XMLHttpRequest での HTML についての記事をお読みください。

+
+ +

HTML 文書を含む responseText プロパティの処理

+ +

XMLHttpRequest を使ってリモート HTML ウェブページのコンテンツを取得する場合、 {{domxref("XMLHttpRequest.responseText", "responseText")}} プロパティは生の HTML が入った文字列です。これは操作や解析が難しいことを示しています。この生の HTML 文字列を分析し解析するには、主に3つの方法があります。

+ +
    +
  1. XMLHttpRequest での HTML の記事で紹介されている XMLHttpRequest.responseXML プロパティを使用する。
    2. +
  2. fragment.body.innerHTML を通して文書フラグメントの本文をコンテンツに挿入し、そのフラグメントの DOM を巡る。
    3. +
  3. 事前に HTML の responseText の中身が常に分かっている場合は {{jsxref("RegExp")}} を使うこともできます。改行を RegExp でスキャンする場合に、改行を除去した方がよく見えることもありますが、 HTML 文書が少しでも変更されると、メソッドは失敗しがちなため、このメソッドは「最後の手段」です。
    4. +
+ +

バイナリデータの扱い

+ +

{{domxref("XMLHttpRequest")}} はテキストデータの送受信に最もよく使われますが、バイナリコンテンツの送受信にも使えます。 XMLHttpRequest のレスポンスをバイナリデータ送信に強制するためのテストされたメソッドがいくつかあります。この中には XMLHttpRequest オブジェクトの {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} メソッドを活用して使える解決法としているものも入っています。

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url);
+// バイナリ文字列として未処理のデータを取得する
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

しかし、もっと新しいテクニックも使用でき、 {{domxref("XMLHttpRequest.responseType", "responseType")}} 属性がいくつもの追加のコンテンツ型に対応するようになったので、データの送信や受信がずっと簡単になりました。

+ +

例えばこのスニペットでは、 responseType に "arraybuffer" を使用して、生のバイナリデータを格納できる {{jsxref("ArrayBuffer")}} オブジェクトにリモートコンテンツを取得しています。

+ +
var oReq = new XMLHttpRequest();
+
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // responseText ではない
+  /* ... */
+}
+oReq.open("GET", url);
+oReq.responseType = "arraybuffer";
+oReq.send();
+ +

その他の例は、Sending and Receiving Binary Data ページを確認してください。

+ +

進捗の監視

+ +

XMLHttpRequest は、リクエストが処理されている間に発生する様々なイベントを待受けする機能を提供しています。これには定期的な進捗の通知、エラーの通知、などが含まれます。

+ +

XMLHttpRequest の転送を監視する DOM 進捗イベントの対応は、 specification for progress events に従います。このイベントは {{domxref("ProgressEvent")}} インターフェイスを実装します。進行中の転送の状態を特定するために監視することができる実際のイベントは、以下の通りです。

+ +
+
{{event("progress")}}
+
受取済みのデータ量が変化したとき。
+
{{event("load")}}
+
転送が完了したとき。すべてのデータが response に入っています。
+
+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress);
+oReq.addEventListener("load", transferComplete);
+oReq.addEventListener("error", transferFailed);
+oReq.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+// ...
+
+// サーバーからクライアントへの転送の進捗 (ダウンロード)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total * 100;
+    // ...
+  } else {
+    // 全体の長さが不明なため、進捗情報を計算できない
+  }
+}
+
+function transferComplete(evt) {
+  console.log("転送が完了しました。");
+}
+
+function transferFailed(evt) {
+  console.log("ファイルの転送中にエラーが発生しました。");
+}
+
+function transferCanceled(evt) {
+  console.log("ユーザーが転送をキャンセルしました。");
+}
+ +

3-6 行目で XMLHttpRequest を使ってデータ転送を行うときに送られる色々なイベントへのためのイベントリスナーを追加しています。

+ +
注: イベントリスナーはリクエストの open() を呼び出す前に追加する必要があります。そうしないと progress イベントは発火しません。
+ +

進捗のイベントハンドラーは、この例では updateProgress() 関数で指定され、全転送バイト数と、これまで転送されたバイト数をイベントの total と loaded フィールドで受け取ります。しかし、lengthComputable フィールドが false なら、全体の長さは不明で、ゼロになります。

+ +

進捗イベントはダウンロード、アップロードの両方で存在します。ダウンロードイベントは、上記サンプルのように、XMLHttpRequest オブジェクトそのもので発火されます。アップロードイベントは下記のように、 XMLHttpRequest.upload オブジェクトで発火されます:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress);
+oReq.upload.addEventListener("load", transferComplete);
+oReq.upload.addEventListener("error", transferFailed);
+oReq.upload.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+ +
注: 進捗イベントは file: プロトコルでは利用できません。
+ +
+

注: {{Gecko("9.0")}} から、進捗イベントは受け取ったデータチャンクごとに起こり、最後のパケットを受け取って進捗イベントが発火する前に接続が閉じた場合のチャンクも含まれます。この場合、進捗イベントはそのパケットのロードイベントが起きた時に自動的に発火します。これで「進捗」イベントをウォッチするだけで安定した進捗を監視できます。

+
+ +
+

注: {{Gecko("12.0")}} 以降、"moz-blob" の responseType で進捗イベントが呼ばれた場合、レスポンスの値はこれまで受け取ったデータを含む {{domxref("Blob")}} となります。

+
+ +

ロードを終える3つの条件 (abort, load, か error) を loadend イベントで検出することもできます:

+ +
req.addEventListener("loadend", loadEnd);
+
+function loadEnd(e) {
+  console.log("The transfer finished (although we don't know if it succeeded or not).");
+}
+
+ +

注意点として、loadend イベントで受け取った情報から、どの条件で動作が終了したのかを確かめる方法はありません。しかし、これを使ってすべての転送終了シナリオにて行う必要のあるタスクを処理できます。

+ +

フォームの投稿とファイルのアップロード

+ +

XMLHttpRequest のインスタンスはフォームの投稿をするのにも次の2つの方法で利用することができます。

+ + + +

FormData API を使うのが最もシンプルで速く、しかし集めたデータを文字列化できない短所があります。
+ AJAX だけを使うのはもっと複雑ですが、ふつうより柔軟で強力です。

+ +

XMLHttpRequest だけを使う

+ +

FormData API を使用せずにフォームを送信する場合は、多くの場合は他の API が必要ではありません。追加の API が必要な場合は、１つ以上のファイルをアップロードしたい場合に {{domxref("FileReader")}} API を使用する場合だけです。

+ +

submit メソッドの簡単な入門

+ +

html {{ HTMLElement("form") }} は、次の４つの方法で送ることができます。

+ + + +

ここで、たった2つのfoo と bazの名前のフィールドを持つフォームの投稿を考えます。 POST メソッドを使うとサーバーは、使っている encoding type によって次の3つのサンプルのうちのどれかの文字列を受け取ります:

+ + + +

しかし、 GET メソッドを使っている場合、次のような文字列が URL に追加されます。

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

小さな vanilla フレームワーク

+ +

こうしたすべての効果は {{HTMLElement("form")}} を投稿するたびにウェブブラウザーで自動的に行われます。 JavaScript を使って同じ効果を実行したい場合、すべてをインタープリターに教えなければなりません。ゆえに、純粋な AJAX でフォームを送る方法をここで詳しく説明するには複雑すぎます。このため、完全な (しかし教訓的な) フレームワークを置いて、この4つの送信の方法すべてを使い、ファイルをアップロードします。

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/ja/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    console.log(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* console.log(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/,
+          oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" +
+            oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* How should I treat a text/plain form encoding?
+       What characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ?
+        this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" +
+                oField.name + "\"; filename=\"" + oFile.name +
+                "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or
+             method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length;
+              this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" />
+      <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" />
+      <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
+      <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
+      <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

これをテストするには、 register.php というページ (サンプルフォームの action 属性の内容) を作って下記の最小のコンテンツを置きます。

+ +
<?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+
+ +

このスクリプトを有効化する文法は単純です。

+ +
AJAXSubmit(myForm);
+ +
注: このフレームワークはファイルのアップロード送信に {{domxref("FileReader")}} API を使っています。これは最近の API であり、 IE9 以下では実装されていません。このため、 AJAX のみのアップロードは実験的なテクニックと考えられています。バイナリーファイルをアップロードする必要がなければ、このフレームワークはたいていのブラウザーでうまく動作します。
+ +
注: バイナリコンテンツを送信する場合、 {{jsxref("ArrayBuffer", "ArrayBuffers")}} 又は {{domxref("Blob", "Blobs")}} を使用して {{domxref("XMLHttpRequest.send()", "send()")}} メソッド及び、できれば FileReader API の {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} メソッドと組み合わせて送信するのが最良の方法です。しかし、このスクリプトのねらいは文字列化可能な生データを扱うことであり、 {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} メソッドに、FileReader API の {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} メソッドを組み合わせて使用しました。このように、上記のスクリプトは小さいファイルを扱うときのみ意味を持ちます。バイナリコンテンツをアップロードするのでなければ、代わりに FormData API を使用することを検討してください。
+ +
注: 標準外の sendAsBinary メソッドは Gecko 31 {{geckoRelease(31)}} から非推奨と扱われるようになり、まもなく削除されます。その代わりに標準の send(Blob data) メソッドを使用できます。
+ +

FormData オブジェクトの使用

+ +

{{domxref("XMLHttpRequest.FormData", "FormData")}} コンストラクターでは XMLHttpRequest を使用して送信するためのキー/値の組のセットをコンパイルできます。この主な使い方はフォームの送信ですが、フォームとは独立してキー付きのユーザーデータを転送するときにも使用することができます。フォームのエンコーディングタイプが "multipart/form-data" に設定された場合、送信されたデータは、データ送信に使うフォームの submit() メソッドと同じ書式です。 FormData オブジェクトは色々な方法で XMLHttpRequest と一緒に使うことができます。例や FormData と XMLHttpRequests を使用方法についての説明は、 FormData オブジェクトの使用のページをご覧ください。ここでは説明目的で、前の例の翻訳を FormData API を使用するよう変換してみます。コードの簡潔さに注目してください。

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" charset="UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script>
+"use strict";
+
+function ajaxSuccess () {
+  console.log(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ?
+          oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length;
+            sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" />
+      <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" />
+      <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
+      <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
+      <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+</body>
+</html>
+
+ +
注: 前述のように、 {{domxref("FormData")}} オブジェクトは文字列化できる オブジェクトではありません。送信データを文字列化したい場合、前の純粋な AJAX の例を使ってください。また、この例では file {{ HTMLElement("input") }} フィールドがいくつかあり、 FormData API を使ってフォームを送信するときに {{domxref("FileReader")}} API を使う必要もありません。ファイルは自動的に読み込まれてアップロードされます。
+ +

最終更新日を取得する

+ +
function getHeaderTime () {
+  console.log(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html");
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

最終更新日付が変わった時に何かする

+ +

２つの関数を作ってみましょう。

+ +
function getHeaderTime () {
+  var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath));
+  var nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+  }
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

そしてテストします。

+ +
/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

現在のページが変更されたかどうかを知りたい場合は、 {{domxref("document.lastModified")}} についての記事をお読みください。

+ +

サイト間の XMLHttpRequest

+ +

現在のブラウザーは、オリジン間リソース共有 (Cross-Origin Resource Sharing) (CORS) を実装することでサイト間リクエストに対応しています。サーバーがウェブアプリケーションのオリジンからのリクエストを許可するように構成されている場合のみ、 XMLHttpRequest は動作します。それ以外の場合は、 INVALID_ACCESS_ERR 例外が投げられます。

+ +

キャッシュをバイパスする

+ +

キャッシュをバイパスするブラウザー間で互換性のあるアプローチは、 URL にタイムスタンプを追加することで、適切に "?" 又は "&" を付け加えます。例えば以下のようにします。

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

ローカルのキャッシュは URL によって索引づけられるため、これですべてのリクエストが固有のものとなり、それによってキャッシュをバイパスします。

+ +

以下のコードを使用すると、自動的に URL を調整することができます。

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime());
+oReq.send(null);
+ +

セキュリティ

+ +

{{fx_minversion_note(3, "Firefox 3 以前のバージョンの Firefox は、設定の capability.policy.<policyname>.XMLHttpRequest.open</policyname> を allAccess に設定することで、特定のサイトのサイト間アクセスを許可することができます。これはもう対応されていません。")}}

+ +

{{fx_minversion_note(5, "Firefox 5 以前のバージョンの Firefox は、 netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); を使用してサイト間アクセスをリクエストすることができます。これはもう対応されていませんが、警告は表示されず、アクセス権のダイアログは現在も表示されます。")}}

+ +

サイト間スクリプトを有効にするための推奨される方法は、 XMLHttpRequest へのレスポンスの中で HTTP の Access-Control-Allow-Origin ヘッダーを使用することです。

+ +

XMLHttpRequests の停止

+ +

XMLHttpRequest が status=0 及び statusText=null を受信して終了すると、リクエストを実行することが許可されていないことを意味します。これは未送信 (UNSENT) 状態です。この原因の多くは、 XMLHttpRequest が open() の時に XMLHttpRequest のオリジン (XMLHttpRequest が作成された場所) が変更されたことによるものです。これは例えば、 XMLHttpRequest を持ったページで onunload イベントが発生し、ウィンドウが閉じようとしている時に XMLHttpRequest が作成され、ウィンドウがフォーカスを失って他のウィンドウがフォーカスを得たときにリクエストの送信 (言い換えれば open()) が行なわれた場合に発生することがあります。この問題を防ぐ最も効果的な方法は、 {{event("unload")}} イベントが発生したときに、新しいウィンドウの {{event("activate")}} イベントのリスナーを設定することです。

+ +

ワーカー

+ +

overrideMimeType を設定すると、 {{domxref("Worker")}} では動作しません。詳しくは {{bug(678057)}} を参照してください。他のブラウザーは扱いが異なるかもしれません。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}ライブスタンダードの最新版
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLHttpRequest")}}

+ +

関連情報

+ +
    +
  1. MDN の AJAX 入門
    2. +
  2. XMLHttpRequest での HTML
    3. +
  3. HTTP アクセス制御
    4. +
  4. SSL 経由の XMLHTTPRequest のセキュリティ状態をチェックする方法
    5. +
  5. XMLHttpRequest - REST and the Rich User Experience
    6. +
  6. Microsoft documentation
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest object: WHATWG specification
    9. +
diff --git a/files/ja/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html b/files/ja/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html new file mode 100644 index 0000000000..8d5a05c885 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/using_xmlhttprequest_in_ie6/index.html @@ -0,0 +1,31 @@ +--- +title: Using XMLHttpRequest in IE6 +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest_in_IE6 +tags: + - Web Development + - Web Standards +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest_in_IE6 +--- +

XMLHttpRequest は、 Microsoft によって Internet Explorer 5.0 で ActiveX control として最初に導入されました。ただし、 IE7 およびその他のブラウザーでは XMLHttpRequest はネイティブ  JavaScript オブジェクトです。

+ +

最近のすべてのブラウザーでは、次のコードを使用して新規の XMLHttpRequest オブジェクトを作成できます:

+ +
var request = new XMLHttpRequest()
+
+ +

ただし、 Internet Explorer 6 以前もサポートする必要がある場合、次のようにコードを拡張する必要があります:

+ +
if (window.XMLHttpRequest) {
+    //Firefox、 Opera、 IE7、およびその他のブラウザーはネイティブオブジェクトを使用します
+    var request = new XMLHttpRequest();
+} else {
+    //IE 5 および 6 は ActiveX control を使用します
+    var request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +

関連項目

+ + diff --git a/files/ja/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/ja/web/api/xmlhttprequest/xmlhttprequest/index.html new file mode 100644 index 0000000000..c34c507a09 --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -0,0 +1,57 @@ +--- +title: XMLHttpRequest() +slug: Web/API/XMLHttpRequest/XMLHttpRequest +tags: + - API + - Reference + - XHR + - XMLHttpRequest + - ウェブ + - コンストラクター +translation_of: Web/API/XMLHttpRequest/XMLHttpRequest +--- +
{{draft}}{{APIRef('XMLHttpRequest')}}
+ +

XMLHttpRequest() コンストラクターは新しい {{domxref("XMLHttpRequest")}} を生成します。

+ +

XMLHttpRequest の使用方法についての詳細は、 XMLHttpRequest の使用を参照してください。

+ +

構文

+ +
const request = new XMLHttpRequest();
+
+ +

引数

+ +

なし。

+ +

返値

+ +

新しい {{domxref("XMLHttpRequest")}} オブジェクト。このオブジェクトは {{domxref("XMLHttpRequest.send", "send()")}} を呼び出してサーバーにリクエストを送る前に、少なくとも {{domxref("XMLHttpRequest.open", "open()")}} を呼び出して初期化をしなければなりません。

+ +

標準外の Firefox の構文

+ +

Firefox 16 ではコンストラクターに標準外の引数を追加して、匿名モードを有効にできるようにしました（{{Bug("692677")}} を参照）。 mozAnon フラグを true に設定することで、効率的に旧バージョンの XMLHttpRequest 仕様書で記述されていた AnonXMLHttpRequest() コンストラクターに似せることができます。

+ +
const request = new XMLHttpRequest(paramsDictionary);
+ +

引数 (標準外)

+ +
+
objParameters {{gecko_minversion_inline("16.0")}}
+
設定できるフラグが2つあります。 +
+
mozAnon
+
論理型: このフラグを true に設定すると、ブラウザーがリソースを読み込むときに{{Glossary("origin", "オリジン")}}とユーザー資格情報を示しません。重要なことは、つまり明示的に setRequestHeader を使用して追加しない限り、{{Glossary("Cookie", "クッキー")}}が送信されないということです。
+
mozSystem
+
論理型: このフラグを true に設定すると、 {{Glossary("CORS")}} を使用してサーバーにオプトインを必要とせずにサイト間コネクションを作成できるようになります。mozAnon: trueの設定が必要です。つまり、これはクッキーやその他のユーザー資格情報の送信と組み合わせることができません。これは特権を持つ (レビューされた) アプリのみで動作します ({{Bug("692677")}})。 Firefox に読み込まれた任意のウェブページでは動作しません。
+
+
+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf