diff options
Diffstat (limited to 'files/ja/web/api/xmlhttprequest')
37 files changed, 4204 insertions, 0 deletions
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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><code><strong>XMLHttpRequest.abort()</strong></code> メソッドは、すでに送信された要求を中止します。要求が中止されたら、 {{domxref("XMLHttpRequest.readyState", "readyState")}} が {{domxref("XMLHttpRequest.UNSENT")}} (0) に変化し、要求の {{domxref("XMLHttpRequest.status", "status")}} コードが0に設定されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">XMLHttpRequest.abort()</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>undefined</code></p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、 MDN のホームページからコンテンツを読み込み始め、ある条件が発生したときに、 <code>abort()</code> を呼び出すことで転送を中止します。</p> + +<pre class="brush: js">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(); +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-abort()-method')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.XMLHttpRequest.abort")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の利用</a></li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code>abort</code> イベントは、例えばプログラムが {{domxref("XMLHttpRequest.abort()")}} を呼び出した時など、リクエストが中断されたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ProgressEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.event-log { + width: 25rem; + height: 4rem; + border: 1px solid black; + margin: .5rem; + padding: .2rem; +} + +input { + width: 11rem; + margin: .5rem; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: 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(); +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#event-xhr-abort')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.abort_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}</li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">進捗の監視</a></li> +</ul> 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 +--- +<p>{{draft}}{{APIRef('XMLHttpRequest')}}</p> + +<p>XMLHttpRequest.channel は リクエストを送信するときにオブジェクトによって使用される<code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIChannel" title="">nsIChannel</a></code> です。channelがまだ作られていない場合、これは <code>null</code> です。マルチパートリクエストのときは、これは最初のchannelであり、マルチパートリクエストの異なるパートのことではありません。<strong>アクセスするには、権限昇格が必要です。</strong></p> 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 +--- +<div>{{APIRef}}</div> + +<p><code>error</code> イベントは、リクエストでエラーが発生したときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ProgressEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.event-log { + width: 25rem; + height: 4rem; + border: 1px solid black; + margin: .5rem; + padding: .2rem; +} + +input { + width: 11rem; + margin: .5rem; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: 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(); +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#event-xhr-error')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.error_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}</li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">進捗の監視</a></li> +</ul> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary">{{domxref("XMLHttpRequest")}} の <strong><code>getAllResponseHeaders()</code></strong> メソッドは、すべてのレスポンスヘッダーを {{Glossary('CRLF')}} で区切った文字列として返し、レスポンスを受信していない場合は <code>null</code> を返します。</span>ネットワークエラーが発生した場合は、空文字列が返されます。</p> + +<div class="note"> +<p><strong>注:</strong> マルチパートリクエストでは、これはリクエストの元のチャンネルではなく、<em>現在の</em>部分を返します。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate">var headers = <var>XMLHttpRequest</var>.getAllResponseHeaders();</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{Glossary('CRLF')}} で区切ったすべてのレスポンスヘッダー (フィールド名が <code>Set-Cookie</code> または <code>Set-Cookie2</code> のものを除く) を表す {{domxref("ByteString")}}、またはレスポンスを受信していなければ <code>null</code> です。ネットワークエラーが発生した場合は、空文字列が返されます。</p> + +<p>生のヘッダー文字列がどのように見えるかの例です。</p> + +<pre class="notranslate"><span class="punctuation token">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</span></pre> + +<p>各行はキャリッジリターンとラインフィード文字 (<code>\r\n</code>) の両方で終わります。これらはそれぞれのヘッダーを区切る基本的なデリミターです。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 最近のブラウザーでは、ヘッダー名は最新の仕様書にあるように、すべて小文字で返されます。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、リクエストの {{event("readystatechange")}} イベントハンドラーである {{domxref("XMLHttpRequest.onreadystatechange")}} の中でヘッダーを調べます。このコードは生のヘッダー文字列を取得する方法、またそれを個別のヘッダーの配列に変換する方法、そして配列からヘッダー名とその値のマップを生成する方法を示しています。</p> + +<pre class="brush: html notranslate">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; + }); + } +}</pre> + +<p>いったんこれを行えば、次のようなことができます。</p> + +<pre class="brush: js notranslate">var contentType = headerMap["content-type"];</pre> + +<p>これは {{httpheader("Content-Type")}} ヘッダーの値を変数 <code>contentType</code> の中に入れます。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-getallresponseheaders()-method', 'getAllResponseHeaders()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("api.XMLHttpRequest.getAllResponseHeaders")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> + <li>リクエストヘッダーの設定: {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}</li> +</ul> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary">{{DOMxRef("XMLHttpRequest")}} の <strong><code>getResponseHeader()</code></strong> メソッドは、特定のヘッダー値のテキストを含んだ文字列を返します。</span>同じ名前で複数のレスポンスヘッダーがあった場合、値はコンマと空白で区切って値を接続した単一の文字列として返されます。 <code>getResponseHeader()</code> メソッドは値を UTF バイトシーケンスとして返します。</p> + +<div class="note"> +<p><strong>メモ:</strong> ヘッダー名の検索は、大文字小文字の区別がありません。</p> +</div> + +<p>ヘッダーすべての生の文字列を取得する必要がある場合は、生のヘッダー文字列全体を返す {{DOMxRef("XMLHttpRequest.getAllResponseHeaders", "getAllResponseHeaders()")}} メソッドを使用してください。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <var>myHeader</var> = <var>XMLHttpRequest</var>.getResponseHeader(<var>headerName</var>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>headerName</var></dt> + <dd>{{DOMxRef("ByteString")}} で、テキスト値を取得したいヘッダーの名前を示します。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>ヘッダーのテキスト値を表す {{DOMxRef("ByteString")}}、または、レスポンスがまだ受信されていないか、そのヘッダーがレスポンスに存在しなければ <code>null</code> です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、リクエストが生成されて送信され、そして {{Event("readystatechange")}} ハンドラーを設定してヘッダーが純真で来たことを示す {{DOMxRef("XMLHttpRequest.readyState", "readyState")}} を監視します。その時が来たら、 {{httpheader("Content-Type")}} ヘッダーの値を読み取ります。 <code>Content-Type</code> が求められる値でない場合、 {{DOMxRef("XMLHttpRequest")}} は {{DOMxRef("XMLHttpRequest.abort", "abort()")}} を呼び出してキャンセルします。</p> + +<pre class="brush: js">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(); + } + } +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("XMLHttpRequest", "#dom-xmlhttprequest-getresponseheader", "getResponseHeader()")}}</td> + <td>{{Spec2("XMLHttpRequest")}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("api.XMLHttpRequest.getResponseHeader")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> + <li><a href="/ja/docs/Web/HTTP/Headers">HTTP ヘッダー</a></li> + <li>{{DOMxRef("XMLHttpRequest.getAllResponseHeaders", "getAllResponseHeaders()")}}</li> + <li>{{DOMxRef("XMLHttpRequest.response", "response")}}</li> + <li>リクエストヘッダーの設定: {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}</li> +</ul> 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 +--- +<div>{{APIRef("XMLHttpRequest")}}</div> + +<p>W3C の {{domxref("XMLHttpRequest")}} 仕様書では、もともと {{Glossary("XML")}} の解析しか対応していなかった {{domxref("XMLHttpRequest")}} に <a href="/ja/docs/Web/HTML">HTML</a> の解析を追加しています。この機能によって、ウェブアプリは <code>XMLHttpRequest</code> を使って HTML を解析済の {{Glossary("DOM")}} として取得することができます。</p> + +<p>一般的な <code>XMLHttpRequest</code> の使い方についての概要は、 <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の利用</a>をお読みください。</p> + +<h2 id="Limitations" name="Limitations">制限</h2> + +<p>同期的な <code>XMLHttpRequest</code> の利用を避けるために、 HTML 対応は同期モードでは利用できません。また、 HTML 対応は {{domxref("XMLHttpRequest.responseType", "responseType")}} プロパティが <code>"document"</code> に設定されている時にのみ有効です。この制限によって、古いコードが <code>XMLHttpRequest</code> を使って {{domxref("XMLHttpRequest.responseText", "responseText")}} が <code>text/html</code> であるリソースを既定のモードで受け取るときに、無用に HTML を解釈する時間を浪費することを防ぎます。また、この制限によって HTTP のエラーページ (ふつうは <code>text/html</code> の応答本文を持つ) の際に {{domxref("XMLHttpRequest.responseXML", "responseXML")}} が <code>null</code> と想定する古いコードで問題が発生することを防ぐこともできます。</p> + +<h2 id="Usage" name="Usage">使用方法</h2> + +<p>{{domxref("XMLHttpRequest")}} を使って HTML リソースを DOM として取得することは、 <code>XMLHttpRequest</code> を使って XML リソースを DOM として取得するのと似ていますが、同期モードを使用することはできず、 <code>XMLHttpRequest</code> オブジェクトの {{domxref("XMLHttpRequest.open", "open()")}} を呼び出した後、 {{domxref("XMLHttpRequest.send", "send()")}} を呼び出す前に、 {{domxref("XMLHttpRequest.responseType", "responseType")}} プロパティに文字列 <code>"document"</code> 代入して、明示的に文書を要求する必要があるという点が異なります。</p> + +<pre class="brush: js">var xhr = new XMLHttpRequest(); +xhr.onload = function() { + console.log(this.responseXML.title); +} +xhr.open("GET", "file.html"); +xhr.responseType = "document"; +xhr.send(); +</pre> + +<h2 id="Feature_Detection" name="Feature_Detection">機能の検出</h2> + +<h3 id="Method_1" name="Method_1">方法1</h3> + +<p>この方法は「強制的に非同期」である性質を利用するものです。 <code>XMLHttpRequest</code> オブジェクトを同期モードで開いた後、 <code>responseType</code> 設定しようとすると、機能を実装しているブラウザーではエラーを投げますが、それ以外のブラウザーではそのまま動作します。</p> + +<div class="line" id="LC13"> +<pre class="brush: js">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; +} +</pre> +</div> + +<p><a href="https://jsfiddle.net/HTcKP/1/">JSFiddle で閲覧</a></p> + +<p>この方法は同期的であり、他の資産に頼りませんが、この機能があることを示すだけで実際の機能をチェックするものではないので、次の方法2の方がより信頼できるかもしれません。</p> + +<h3 id="Method_2" name="Method_2">方法2</h3> + +<p>ブラウザーが {{domxref("XMLHttpRequest")}} で HTML の解析処理に対応しているかどうかを確実に検出するには、二つの課題があります。まず、 HTML 対応が非同期モードでしか有効でないことから、検出結果は非同期で受け取られることになります。第二に、 <code>data:</code> URL を使用すると同時に <code>data:</code> URL の対応にも依存することになるため、実際に HTTP を通じて文書を取得しなければならないことです。</p> + +<p>つまり、 HTML 対応を検出するには、サーバ上にテスト用の HTML 文書が必要になります。このテストファイルは小さく、整形式の XML ではないものです。</p> + +<pre class="brush: js"><title>&amp;&<</title></pre> + +<p>このファイルが <code>detect.html</code> という名前だった場合、 HTML 対応を検出する関数は次のように書くことができます。</p> + +<pre class="brush: js">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); + } +} +</pre> + +<p>引数の <code>callback</code> は非同期に呼び出される関数であり、 HTML 対応がある場合には唯一の引数が <code>true</code> になり、 HTML 対応がない場合は唯一の引数が <code>false</code> になります。</p> + +<p><a href="https://jsfiddle.net/xfvXR/1/">JSFiddle で閲覧</a></p> + +<h2 id="Character_Encoding" name="Character_Encoding">文字エンコーディング</h2> + +<p>HTTP の {{HTTPHeader("Content-Type")}} ヘッダーで文字エンコーディングが宣言されている場合は、そのエンコーディングが使用されます。そうでない場合、もしバイトオーダーマークがある場合は、そのバイトオーダーマークが示すエンコーディングを使用します。そうでない場合、もしファイルの先頭 1024 バイト以内にエンコーディングを宣言する {{HTMLElement("meta")}} 要素がある場合は、そのエンコーディングが使用されます。それもない場合、ファイルは UTF-8 としてデコードされます。</p> + +<h2 id="Handling_HTML_on_older_browsers" name="Handling_HTML_on_older_browsers">古いブラウザーでの HTML の扱い</h2> + +<p><code>XMLHttpRequest</code> はもともと、 XML の解析のみ対応していました。 HTML の解析は最近追加されたものです。古いブラウザーでも、 {{domxref("XMLHttpRequest.responseText")}} プロパティと<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>の組み合わせで、例えば、指定された ID の HTML 要素のソースコードを取得することができます。</p> + +<pre class="brush: js">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); +</pre> + +<div class="note"><strong>メモ:</strong> この方法はインタープリターにとってとても重いものです。<strong>本当に必要なときのみ使用してください</strong>。</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<h3 id="XMLHttpRequest_インターフェイス"><code>XMLHttpRequest</code> インターフェイス</h3> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("XMLHttpRequest")}}</li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> +</ul> 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 +--- +<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div> + +<p><span class="seoSummary"><code>XMLHttpRequest</code> (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。</span> <code>XMLHttpRequest</code> は {{Glossary("AJAX")}} プログラミングで頻繁に使用されます。</p> + +<p>{{InheritanceDiagram(650, 150)}}</p> + +<p><code>XMLHttpRequest</code> という名前ではあるものの、 XML だけでなくあらゆる種類のデータを受け取るために使用することができます。</p> + +<p>通信においてサーバーからのイベントデータやメッセージデータの受信を含む必要があるのであれば、 <a href="/ja/docs/Web/API/Server-sent_events">Server-sent event</a> の {{domxref("EventSource")}} インターフェイスを使用することも検討してください。全二重の通信では、 <a href="/ja/docs/Web/API/WebSockets_API">WebSocket</a> の方が良いかもしれません。</p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt> + <dd>XMLHttpRequest を初期化するコンストラクターです。これは、他のメソッドを呼び出す前に呼び出さなければなりません。</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em>このインターフェイスは、 {{domxref("XMLHttpRequestEventTarget")}} および {{domxref("EventTarget")}} のプロパティを継承します。</em></p> + +<dl> + <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt> + <dd>{{domxref("EventHandler")}} で、これは <code>readyState</code> 属性が変化する度に呼び出されます。</dd> + <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt> + <dd>リクエストの状態を <code>unsigned short</code> で返します。</dd> + <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt> + <dd>リクエストのエンティティ本文を含む {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript オブジェクト, {{domxref("DOMString")}} の何れかを、 {{domxref("XMLHttpRequest.responseType")}} の値に応じて返します。</dd> + <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt> + <dd>リクエストに対するレスポンスがテキスト形式で入った {{domxref("DOMString")}} を返すか、リクエストが失敗した場合や、まだ送信されていない場合は <code>null</code> を返します。</dd> + <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt> + <dd>レスポンス型を定義する、列挙型の値です。</dd> + <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt> + <dd>レスポンスのシリアライズされた URL、または URL が null であれば空文字列を返します。</dd> + <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt> + <dd>リクエストに対するレスポンスが入った {{domxref("Document")}} を返すか、またはリクエストが成功しなかった場合、まだ送信されていない場合、 XML または HTML として解釈できなかった場合は <code>null</code> を返します。</dd> + <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt> + <dd>リクエストに対するレスポンスのステータスを <code>unsigned short</code> で返します。</dd> + <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt> + <dd>HTTP サーバーから返ってきたレスポンス文字列が入った {{domxref("DOMString")}} を返します。 {{domxref("XMLHTTPRequest.status")}} とは異なり、("<code>200 OK</code>" のように) レスポンスメッセージの完全な文が含まれています。 + <div class="note"> + <p><strong>注:</strong> HTTP/2 仕様書 (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">レスポンス擬似ヘッダーフィールド</a>) によれば、 HTTP/2 では、 HTTP/1.1 のステータス行に含まれていたバージョンや原因の文を伝える方法が定義されていません。</p> + </div> + </dd> + <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt> + <dd>リクエストを自動的に終了できるようになるまでの時間をミリ秒単位で表す、 <code>unsigned long</code> 型の値です。</dd> + <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt> + <dd>リクエストがタイムアウトする都度呼び出される {{domxref("EventHandler")}}。{{gecko_minversion_inline("12.0")}}</dd> + <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt> + <dd>アップロードプロセスを表す {{domxref("XMLHttpRequestUpload")}} です。</dd> + <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt> + <dd>{{domxref("Boolean")}} で、サイト間の <code>Access-Control</code> リクエストでクッキーや認証ヘッダーなどの資格情報を使用するかどうかを示します。</dd> +</dl> + +<h3 id="Non-standard_properties" name="Non-standard_properties">標準外のプロパティ</h3> + +<dl> + <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt> + <dd>{{Interface("nsIChannel")}} です。リクエストの実行の際にオブジェクトによって使われるチャンネルです。</dd> + <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt> + <dd>boolean です。 true の場合、リクエストは cookie や認証ヘッダを伴わずに送信します。</dd> + <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt> + <dd>boolean です。 true の場合、リクエストで同一オリジンポリシーは適用されません。</dd> + <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt> + <dd>boolean です。オブジェクトがバックグラウンドサービスのリクエストであるかどうかを示します。</dd> + <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt> + <dd>{{jsxref("ArrayBuffer")}} です。リクエストに対する、JavaScript typed array 形式でのレスポンスです。</dd> + <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt> + <dd><strong>これは Gecko 独自の機能であり、 Firefox/Gecko 22 で削除されました。</strong>代わりに <a href="/ja/docs/Web/API/Server-sent_events">Server-Sent Event</a>、<a href="/ja/docs/Web/API/WebSockets_API">Web Socket</a>、または progress イベントの <code>responseText</code> を使用してください。</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">イベントハンドラー</h3> + +<p><code>onreadystatechange</code> は <code>XMLHttpRequest</code> のインスタンスのプロパティとしてすべてのブラウザーが対応しています。</p> + +<p>それ以来、数多くの追加のイベントハンドラーが様々なブラウザーに実装されてきています (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, など)。 <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a>を参照してください。</p> + +<p>Firefox を含め、より新しいブラウザーでは、 <code>XMLHttpRequest</code> のイベントを <code>on*</code> プロパティをハンドラー関数に設定する方法に加えて、標準の {{domxref("EventTarget.addEventListener", "addEventListener()")}} API で待ち受けすることにも対応しています。</p> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest.abort()")}}</dt> + <dd>リクエストがすでに送信されている場合、リクエストを中止します。</dd> + <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt> + <dd>{{Glossary("CRLF")}} で区切られた文字列として、すべてのレスポンスヘッダを返します。レスポンスを何も受け取らなかった場合は <code>null</code> を返します。</dd> + <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt> + <dd>指定したヘッダ文を含む文字列を返します。レスポンスを受信していない、またはレスポンス中に指定したヘッダが存在しない場合は <code>null</code> を返します。</dd> + <dt>{{domxref("XMLHttpRequest.open()")}}</dt> + <dd>リクエストを初期化します。このメソッドは JavaScript から使用するようにしてください。ネイティブコードからの初期化には、代わりに <a class="internal" href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> を使用するようにしてください。</dd> + <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt> + <dd>サーバーから返ってくる MIME タイプを上書きします。</dd> + <dt>{{domxref("XMLHttpRequest.send()")}}</dt> + <dd>リクエストを送信します。</dd> + <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt> + <dd>HTTP リクエストヘッダーの値を設定します。 <code>setRequestHeader()</code> は <a href="#open"><code>open()</code></a> の後、および <code>send()</code> の前に呼び出さなくてはいけません。</dd> +</dl> + +<h3 id="Non-standard_methods" name="Non-standard_methods">標準外のメソッド</h3> + +<dl> + <dt>{{domxref("XMLHttpRequest.init()")}}</dt> + <dd>C++ コードから使用するために、オブジェクトを初期化します。 + <div class="warning"><strong>警告:</strong> JavaScript からこのメソッドを<em>呼び出してはいけません</em>。</div> + </dd> + <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt> + <dd>リクエストを初期化します。このメソッドはネイティブコードから使用するためのものです。 JavaScript コードからの初期化には、代わりに <a class="internal" href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> を使用してください。 <code>open()</code> の項目を参照してください。</dd> + <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt> + <dd>バイナリデータを送る、<code>send()</code> メソッドの亜種です。</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<dl> + <dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt> + <dd>例えばプログラムが {{domxref("XMLHttpRequest.abort()")}} を呼び出した時など、リクエストが中断されたときに発生します。<br> + {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} プロパティを通して利用することもできます。</dd> + <dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt> + <dd>リクエストでエラーが発生したときに発生します。<br> + {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} プロパティを通して利用することもできます。</dd> + <dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt> + <dd>{{domxref("XMLHttpRequest")}} のトランザクションが成功裏に完了したときに発生します。<br> + {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} プロパティを通して利用することもできます。</dd> + <dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt> + <dd>リクエストが完了したときに、成功した場合 ({{domxref("XMLHttpRequest/load_event", "load")}} の後)、成功しなかった場合 ({{domxref("XMLHttpRequest/abort_event", "abort")}} または {{domxref("XMLHttpRequest/error_event", "error")}} の後) のどちらでも発生します。<br> + {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} プロパティを通して利用することもできます。</dd> + <dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt> + <dd>リクエストがデータを読み込み始めたときに発生します。<br> + {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} プロパティを通して利用することもできます。</dd> + <dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt> + <dd>リクエストがもっとデータを受信した際に定期的に発生します。<br> + {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} プロパティを通して利用することもできます。</dd> + <dt>{{domxref("XMLHttpRequest/timeout_event", "timeout")}}</dt> + <dd>プリセット時間が過ぎたために進行が終了したときに発生します。<br> + {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} プロパティを通して利用することもできます。</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Live standard 最新版</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("api.XMLHttpRequest")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("XMLSerializer")}}: DOM ツリーの XML へのシリアライズ</li> + <li><code>XMLHttpRequest</code> に関連する MDN の記事 + <ul> + <li><a href="/ja/docs/AJAX/Getting_Started">Ajax — 始めましょう</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest における HTML の扱い</a></li> + <li><a href="/ja/docs/Web/API/Fetch_API" title="Fetch API">Fetch API</a></li> + </ul> + </li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li> + <li>Feature-Policy のディレクティブ {{httpheader("Feature-Policy/sync-xhr", "sync-xhr")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><code>load</code> イベントは、 {{domxref("XMLHttpRequest")}} のトランザクションが成功裏に完了したときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ProgressEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("XMLHttpRequestEventTarget/onload", "onload")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.event-log { + width: 25rem; + height: 4rem; + border: 1px solid black; + margin: .5rem; + padding: .2rem; +} + +input { + width: 11rem; + margin: .5rem; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: 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(); +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#event-xhr-load')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.load_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}</li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">進捗の監視</a></li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><strong><code>loadend</code></strong> イベントは、リクエストが完了したときに、成功した場合 ({{domxref("XMLHttpRequest/load_event", "load")}} の後)、成功しなかった場合 ({{domxref("XMLHttpRequest/abort_event", "abort")}} または {{domxref("XMLHttpRequest/error_event", "error")}} の後) のどちらでも発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ProgressEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.event-log { + width: 25rem; + height: 4rem; + border: 1px solid black; + margin: .5rem; + padding: .2rem; +} + +input { + width: 11rem; + margin: .5rem; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: 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(); +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#event-xhr-loadend')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.loadend_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}</li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">進捗の監視</a></li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><strong><code>loadstart</code></strong> イベントは、リクエストがデータを読み込み始めたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ProgressEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.event-log { + width: 25rem; + height: 4rem; + border: 1px solid black; + margin: .5rem; + padding: .2rem; +} + +input { + width: 11rem; + margin: .5rem; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: 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(); +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#event-xhr-loadstart')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.loadstart_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/progress_event", "progress")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}</li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">進捗の監視</a></li> +</ul> 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 +--- +<div>{{draft}}{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary"><strong><code>XMLHttpRequest.mozAnon</code></strong> はブール値です。 true の場合、リクエストは Cookie または認証ヘッダなしで送信されます。</span></p> 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 +--- +<p>{{draft}}{{APIRef('XMLHttpRequest')}}</p> + +<div class="note"> +<p><strong>Note:</strong> このメソッドは、 Web コンテンツから使用できません。アクセスするには管理者特権が必要です。</p> +</div> + +<p><span class="seoSummary"><strong><code>XMLHttpRequest.mozBackgroundRequest</code></strong> はブール値で、オブジェクトがバックグラウンドサービスリクエストを表すかどうかを示します。</span> <code>true</code> の場合、要求に関連付けられているロードグループはなく、セキュリティダイアログはユーザーに表示されません。</p> + +<p>通常、セキュリティダイアログ (認証や不正な証明書通知など) が表示される場合、この要求は失敗します。</p> + +<div class="note"> +<p><strong>Note: </strong>このプロパティは、 <code>open()</code> を呼び出す前に設定する必要があります。</p> +</div> 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 +--- +<p>{{draft}}{{APIRef('XMLHttpRequest')}}</p> + +<div class="warning"> +<p>Gecko 6 で廃止</p> +</div> + +<p><span class="seoSummary">リクエストに対する <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a> 応答であり、 JavaScript タイプの配列として記述されます。</span> リクエストが成功しなかった場合、またはリクエストがまだ送信されてない場合、これは <code>NULL</code> です。</p> 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 +--- +<div>{{draft}}{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary"><strong><code>mozSystem</code></strong> はブール値です。 true の場合、同じ発信元ポリシーはリクエストに適用されません。</span></p> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}{{non-standard_header}}</div> + +<div class="warning"> +<p>Gecko 22から廃止されました。</p> +</div> + +<p><strong>この Gecko 専用機能は Firefox/Gecko 22 で削除されました</strong>。代わりに <a href="/ja/docs/Web/API/Server-sent_events">Server-Sent Events</a>、<a href="/ja/docs/Web/API/WebSockets_API">Web Sockets</a>、または progress イベントからの <code>responseText</code> を使用してください。</p> + +<p><span class="seoSummary">この真偽値は、レスポンスが複数の XML ドキュメントのストリームになる可能性があることを示します。</span> <code>true</code> に設定されている場合、最初のレスポンスのコンテンツタイプは <code>multipart/x-mixed-replace</code> でなければなりません。すべてのリクエストは非同期でなければなりません。</p> + +<p>このリクエストに書き込まれた各 XML ドキュメントに対して新しい XML DOM ドキュメントが作成され、ドキュメント間で <code>onload</code> ハンドラが呼び出されます。</p> + +<div class="note"> +<p><strong>メモ:</strong> これが設定されている場合、最初の XMLdocument がロードされた後、<code>onload</code> ハンドラや他のイベントハンドラはリセットされず、レスポンスの各部分が受信された後に <code>onload</code> ハンドラが呼び出されます。</p> +</div> 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 +--- +<div>{{APIRef}}</div> + +<p>{{domxref("EventHandler")}} で、 <code>readyState</code> 属性が変化するたびに呼び出されます。コールバックはユーザーインターフェイスのスレッドから呼び出されます。 <strong><code>XMLHttpRequest.onreadystatechange</code></strong> プロパティは、 {{domxref("Document/readystatechange_event", "readystatechange")}} イベントが発生するたびに、つまり {{domxref("XMLHttpRequest")}} の {{domxref("XMLHttpRequest.readyState", "readyState")}} が変化するたびに呼び出されるイベントハンドラーを保持します。</p> + +<div class="warning"> +<p><strong>警告:</strong> これは同期要求で使用してはいけません。また、ネイティブコードから使用してはいけません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre> + +<h3 id="Values" name="Values">値</h3> + +<ul> + <li><code><em>callback</em></code> は <code>readyState</code> が変化したときに実行される関数です。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">const xhr = new XMLHttpRequest(), + method = "GET", + url = "https://developer.mozilla.org/"; + +xhr.open(<em>method</em>, <em>url</em>, 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();</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.XMLHttpRequest.onreadystatechange")}}</p> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p>{{domxref("XMLHttpRequest")}} の <code><strong>open()</strong></code> メソッドは、新しく作成されたリクエストを初期化したり、既存のリクエストを再初期化したりします。</p> + +<div class="note"><strong>メモ:</strong> すでに有効なリクエスト (すでに <code>open()</code> が呼び出されたもの) に対してこのメソッドを呼び出すと、 {{domxref("XMLHttpRequest.abort", "abort()")}} を呼び出すのと等価になります。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>XMLHttpRequest</var>.open(<var>method</var>, <var>url</var>[, <var>async</var>[, <var>user</var>[, <var>password</var>]]]) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>method</code></dt> + <dd>使用する <a href="/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a>です。 <code>"GET"</code>, <code>"POST"</code>, <code>"PUT"</code>, <code>"DELETE"</code>, など。 HTTP(S) 以外の URL では無視されます。</dd> + <dt><code>url</code></dt> + <dd>リクエストを送信する URL を表す {{domxref("DOMString")}}。</dd> + <dt><code>async</code> {{optional_inline}}</dt> + <dd>任意の論理値の引数で、既定値は <code>true</code>です。操作が非同期的に行われるかどうかを示します。値が <code>false</code> の場合、 <code>send()</code> メソッドはレスポンスを受信するまで戻りません。 <code>true</code> の場合は、トランザクション完了の通知はイベントリスナーを使用して配信されます。 <code>multipart</code> 属性が <code>true</code> である場合は true で<em>なければならず</em>、さもなくば例外が発生します。 + <div class="note"><strong>メモ:</strong> メインスレッドで同期リクエストを行うと、ユーザーの使い勝手を簡単に阻害するので避けるべきです。実際、多くのブラウザーではメインスレッドにおける同期的な XHR の対応を全面的に非推奨としています。同期リクエストは {{domxref("Worker")}} で許可されています。</div> + </dd> + <dt><code>user</code> {{optional_inline}}</dt> + <dd>任意で、認証プロセスで使用するユーザー名です。既定では、これは <code>null</code> 値です。</dd> + <dt><code>password</code> {{optional_inline}}</dt> + <dd>任意で、認証プロセスで使用するパスワードです。既定では、これは <code>null</code> 値です。</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.XMLHttpRequest.open")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> + <li>関連する {{domxref("XMLHttpRequest")}} のメソッド: {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, {{domxref("XMLHttpRequest.abort", "abort()")}}</li> +</ul> 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 +--- +<div>{{APIRef("XMLHttpRequest")}}{{non-standard_header}}</div> + +<p><span class="seoSummary">この Mozilla 固有メソッドは、特権コード内からのみ使用でき、 <code>XMLHttpRequest</code> を初期化するために C++ コンテキストからのみ呼び出されます。 </span>JavaScript コードからのリクエストを初期化するには、代わりに標準の {{domxref("XMLHttpRequest.open", "open()")}} メソッドを使用します。</p> 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 +--- +<div>{{APIRef}}</div> + +<p><strong><code>progress</code></strong> イベントは、リクエストがもっとデータを受信した際に定期的に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ProgressEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.event-log { + width: 25rem; + height: 4rem; + border: 1px solid black; + margin: .5rem; + padding: .2rem; +} + +input { + width: 11rem; + margin: .5rem; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: 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(); +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#event-xhr-progress')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.progress_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}</li> + <li><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">進捗の監視</a></li> +</ul> 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 +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p><strong>XMLHttpRequest.readyState</strong> プロパティは XMLHttpRequest クライアントの状態を返します。<abbr title="XMLHttpRequest">XHR</abbr> クライアントは次の状態のいずれかをとります:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">値</td> + <td class="header">状態</td> + <td class="header">説明</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>UNSENT</code></td> + <td>クライアントは作成済み。<code>open()</code> はまだ呼ばれていない。</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPENED</code></td> + <td><code>open()</code> が呼び出し済み。</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>HEADERS_RECEIVED</code></td> + <td><code>send()</code> が呼び出し済みで、ヘッダーとステータスが利用可能。</td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>LOADING</code></td> + <td>ダウンロード中。<code>responseText</code> には部分データが入っている。</td> + </tr> + <tr> + <td><code>4</code></td> + <td><code>DONE</code></td> + <td>操作が完了した。</td> + </tr> + </tbody> +</table> + +<dl> + <dt>UNSENT</dt> + <dd>XMLHttpRequest クライアントは作成済みだが、まだ open() メソッドは呼ばれていない。</dd> + <dt>OPENED</dt> + <dd>open() メソッドは実行済み。この状態の間は、リクエストヘッダーを <a href="/ja/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a> メソッドを使ってセットできて、<a href="/ja/docs/Web/API/XMLHttpRequest/send">send()</a> メソッドを呼び出して取得を開始できる。</dd> + <dt>HEADERS_RECEIVED</dt> + <dd>send() は呼び出し済みでレスポンスヘッダーを受け取り済み。</dd> + <dt>LOADING</dt> + <dd>レスポンスボディを受け取っている。<code><a href="/ja/docs/Web/API/XMLHttpRequest/responseType">ResponseType</a></code> が "text" か空文字の場合、<code><a href="/ja/docs/Web/API/XMLHttpRequest/responseText">responseText</a></code> はロードするごとに部分テキストを持つ。</dd> + <dt>DONE</dt> + <dd>取得操作が完了している。つまりデータ転送が完全に成功したか失敗したかどちらでもありうる。</dd> +</dl> + +<div class="note"> +<p>状態名は Internet Explorer 11 以前のバージョンと異なります。<code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code>,<code>DONE</code>, の代わりに、<code>READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) and <code>READYSTATE_COMPLETE</code> (4) が使われています。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">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); +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#states')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + + + +<p>{{Compat("api.XMLHttpRequest.readyState")}}</p> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary">{{domxref("XMLHttpRequest")}} <code><strong>response</strong></code> プロパティは、そのリクエストの{{domxref("responseType")}}によって、{{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript {{jsxref("Object")}}, or {{domxref("DOMString")}}といったレスポンスのボディを返します。</span></p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <em>body</em> = <em>XMLHttpRequest</em>.response; +</pre> + +<h3 id="値">値</h3> + +<p>{{domxref("XMLHttpRequest.responseType", "responseType")}}の値に基づく適切なオブジェクト。 {{domxref("XMLHttpRequest.open", "open()")}}を呼び出してリクエストを初期化した後や、{{domxref("XMLHttpRequest.send", "send()")}}を呼び出してリクエストをサーバーに送信する前に、<code>responseType</code>の値を設定することで、特定の形式でデータを提供するようにリクエストができます。</p> + +<p>リクエストが未完了または失敗する場合、値は<code>null</code>です。ただし、<code>"text"</code>や空の文字列である(<code>""</code>)を使用してテキストデータを読み込む場合は除きます。リクエストがまだ<code>LOADING</code> {{domxref("XMLHttpRequest.readyState", "readyState")}} (3)にある間、レスポンスはこれまでのレスポンスを含むことがあります。</p> + +<p>レスポンスタイプは以下のとおりです。</p> + +<p>{{page("/en-US/docs/Web/API/XMLHttpRequestResponseType", "Values")}}</p> + +<dl> +</dl> + +<h2 id="例">例</h2> + +<p>下記に、サーバーからページをロードして処理する関数<code>load()</code>を例として提示します。仕組みとしては、XMLHttpRequestオブジェクトを作成し、{{event("readystatechange")}}イベントのリスナー（<code>readyState</code>イベントが<code>DONE</code> （4）に変わると<code>response</code>が取得され、それを<code>load()</code>のコールバック関数に渡すといった）を作成しています。</p> + +<p>コンテンツは生のテキストデータとして処理されます（デフォルトの{{domxref("XMLHttpRequest.responseType", "responseType")}}を上書きするものは何もないため）。</p> + +<pre class="brush: js">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(''); +} + +</pre> + +<h2 id="仕様書">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-response-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの対応">ブラウザの対応</h2> + + + +<p>{{Compat("api.XMLHttpRequest.response")}}</p> + +<h2 id="関連">関連</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li>Getting text and HTML/XML data: {{domxref("XMLHttpRequest.responseText")}} and {{domxref("XMLHttpRequest.responseXML")}}</li> +</ul> 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 +--- +<div>{{draft}}</div> + +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary">{{domxref("XMLHttpRequest")}} の <strong><code>responseText</code></strong> プロパティは読み取り専用で、送信されたリクエストに続いてサーバーから受け取ったテキストを返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>resultText</var> = <var>XMLHttpRequest</var>.responseText;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("DOMString")}} で、 <code>XMLHttpRequest</code> を使用して受信したテキストデータ、またはリクエストが失敗したときは <code>null</code>、またはリクエストがまだ {{domxref("XMLHttpRequest.send", "send()")}} の呼び出しによって送信されていない場合は <code>""</code>。</p> + +<p>非同期リクエストを処理している間、 <code>responseText</code> の値は、データが完全に受信できておらず不完全であっても、常にサーバーから受信した現在のコンテンツを持ちます。</p> + +<p>{{domxref("XMLHttpRequest.readyState", "readyState")}} の値が {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (<code>4</code>) になり、 {{domxref("XMLHttpRequest.status", "status")}} の値が 200 (<code>"OK"</code>) になった場合、コンテンツ全体が受信されたことが分かります。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd>{{domxref("XMLHttpRequest.responseType")}} が空文字列または <code>"text"</code> のどちらにも設定されていません。 <code>responseText</code> プロパティはテキストコンテンツのみで有効なので、他の値はエラーの状態です。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">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);</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.responseText")}}</p> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary">{{domxref("XMLHttpRequest")}} の <strong><code>responseType</code></strong> プロパティは、列挙型の文字列地で、レスポンスに含まれているデータの型を示します。</span>作者がレスポンスの型を変更することもできます。 <code>responseType</code> の値として空文字列が設定された場合は、既定値である <code>text</code> が使用されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>type</var> = <var>XMLHttpRequest</var>.responseType; + +<var>XMLHttpRequest</var>.responseType = <var>type</var>;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>文字列で、レスポンスに含まれているデータの型を指定する {{domxref("XMLHttpRequestResponseType")}} 列挙型の値を取ります。</p> + +<div class="note"> +<p><code>responseType</code> を特定の値に設定する場合は、サーバーが実際にその形式と互換性のあるレスポンスを送信していることを確認してください。サーバーが <code>responseType</code> に設定された値と互換性のないデータを返した場合、 {{domxref("XMLHttpRequest.response", "response")}} の値は <code>null</code> になります。</p> +</div> + +<p><code>responseType</code> が対応している値は以下の通りです。</p> + +<p>{{page("/ja/docs/Web/API/XMLHttpRequestResponseType", "Values")}}</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>InvalidAccessError</code></dt> + <dd><code>responseType</code> の値の変更が同期モードの <code>XMLHttpRequest</code> 上で試みられたものの、 {{domxref("Worker")}} の中ではなかった場合。詳細については、下記の{{anch("Synchronous XHR restrictions", "同期 XHR の制限")}}を参照して下さい。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<h3 id="Synchronous_XHR_restrictions" name="Synchronous_XHR_restrictions">同期 XHR の制限</h3> + +<p><code>responseType</code> の値を同期 <code>XMLHttpRequest</code> で変更することは、リクエストが {{domxref("Worker")}} に属している場合を除いてできません。この制限は、ブラウザーのメインスレッドをブロックしてユーザーの使い勝手を妨害する巨大なトランザクションが、同期操作で使用されないことを保証する対策の一環として設けられています。</p> + +<p><code>XMLHttpRequest</code> は既定では非同期です。同期モードは、 <code>false</code> の値をオプションの <code>async</code> 引数に渡して {{domxref("XMLHttpRequest.open", "open()")}} ろ呼び出した場合のみ設定されます。</p> + +<h3 id="Restrictions_in_Workers" name="Restrictions_in_Workers">Worker での制限</h3> + +<p><code>responseType</code> の値を <code>document</code> に指定しようとすると、 {{domxref("Worker")}} の中では失敗します。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-responsetype-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.responseType")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest 内の HTML</a></li> + <li>レスポンスデータ: {{domxref("XMLHttpRequest.response", "response")}}, {{domxref("XMLHttpRequest.responseText", "responseText")}}, {{domxref("XMLHttpRequest.responseXML", "responseXML")}}</li> +</ul> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><code><strong>XMLHttpRequest.responseURL</strong></code> プロパティは読み取り専用で、レスポンスのシリアライズされた URL を返します。 URL が <code>null</code> の場合は、空文字を返します。 URL に存在する URL フラグメントはすべて取り除かれます。 <code>responseURL</code> の値は、任意のリダイレクト後に得られる最後の URL になります。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">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);</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-responseurl-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.responseURL")}}</p> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><strong><code>XMLHttpRequest.responseXML</code></strong> は読み取り専用のプロパティで、リクエストによって受け取った HTML または XML を含む {{domxref("Document")}}、またはリクエストが成功しなかった場合、まだ送信されていない場合、データが XML または HTML として解釈できない場合は <code>null</code> を返します。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>responseXML</code> という名前はこのプロパティの歴史の遺物です。これは HTML および XML の両方で動作します。</p> +</div> + +<p>ふつう、レスポンスは "<code>text/xml</code>" として解釈されます。 {{domxref("XMLHttpRequest.responseType", "responseType")}} が "<code>document</code>" に設定され、リクエストが非同期に行われた場合、レスポンスは代わりに "<code>text/html</code>" として解釈されます。他の型のデータでは、 <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> の URL</a> の場合と同様、 <code>responseXML</code> は <code>null</code> になります。</p> + +<p>サーバーが {{HTTPHeader("Content-Type")}} を "<code>text/xml</code>" とも "<code>application/xml</code>" とも指定しなかった場合、 {{domxref("XMLHttpRequest.overrideMimeType()")}} を使用して強制的に XML として解釈させることができます。</p> + +<p>このプロパティはワーカーでは使用できません。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>data</var> = <var>XMLHttpRequest</var>.responseXML; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("XMLHttpRequest")}} を用いて受け取った XML または HTML を解釈した {{domxref("Document")}}、またはデータを受け取っていなかったり、データが XML/HTML でな買ったりした場合は <code>null</code></p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd>{{domxref("XMLHttpRequest.responseType", "responseType")}} が "<code>document</code>" でも空文字列でもない。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">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();</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-responsexml-attribute', 'responseXML')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.responseXML")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("XMLHttpRequest")}}</li> + <li>{{domxref("XMLHttpRequest.response")}}</li> + <li>{{domxref("XMLHttpRequest.responseType")}}</li> + <li><a href="/ja/docs/Web/Guide/Parsing_and_serializing_XML">XML の解釈とシリアライズ</a></li> + <li>XML を解釈して DOM ツリーに格納: {{domxref("DOMParser")}}</li> + <li>DOM ツリーを XML にシリアライズ: {{domxref("XMLSerializer")}} (特に {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} メソッド)</li> +</ul> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary">{{domxref("XMLHttpRequest")}} の <code><strong>send()</strong></code> メソッドは、リクエストをサーバーに送信します。</span>リクエストが非同期の場合 (これが既定)、このメソッドはリクエストが送信されるとすぐに戻り、結果はイベントを用いて配信されます。リクエストが同期の場合、このメソッドはレスポンスが到着するまで戻りません。</p> + +<p><code>send()</code> はリクエストの本文を示す引数を一つ受け取ることができます。これは主に {{HTTPMethod("PUT")}} のようなリクエストに使用されます。リクエストメソッドが {{HTTPMethod("GET")}} 又は {{HTTPMethod("HEAD")}} であれば、 <code>body</code> 引数は無視され、リクエストの本文は <code>null</code> に設定されます。</p> + +<p>{{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}} を使用して {{HTTPHeader("Accept")}} ヘッダーを設定しなかった場合、 <code>Accept</code> ヘッダーは <code>"*/*"</code> 型 (任意の型) が送信されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>XMLHttpRequest</var>.send(<var>body</var>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>body</var> {{optional_inline}}</dt> + <dd>XHR のリクエストの中で送られる本文データです。次のものが使用できます。 + <ul> + <li>{{domxref("Document")}}: 送信前にシリアライズされている場合。</li> + <li><code>BodyInit</code>: <a href="https://fetch.spec.whatwg.org/#bodyinit">Fetch の仕様書</a>によれば、 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("ReadableStream")}}, {{domxref("USVString")}} 型のオブジェクトが利用できます。</li> + </ul> + body に値が設定されていない場合、既定値の <code>null</code> が使用されます。</dd> +</dl> + +<p>バイナリコンテンツの送信 (例えばファイルのアップロード) の最適な方法は、 {{domxref("ArrayBufferView")}} または {{domxref("Blob")}} と <code>send()</code> メソッドを組み合わせることです。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>undefined</code></p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">例外</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>InvalidStateError</code></td> + <td>このリクエストに対してすでに <code>send()</code> が呼び出されているか、リクエストが完了している。</td> + </tr> + <tr> + <td><code>NetworkError</code></td> + <td>読み込むリソースの型が Blob であり、メソッドが <code>GET</code> ではない。</td> + </tr> + </tbody> +</table> + +<h2 id="Example_GET" name="Example_GET">GET の例</h2> + +<pre class="brush: js"><code>var xhr = new XMLHttpRequest(); +xhr.open('GET', '/server', true); + +xhr.onload = function () { + // リクエストの終了。ここの処理を実行します。 +}; + +xhr.send(null); +// xhr.send('string'); +</code>// <code>xhr.send(new Blob()); +// xhr.send(new Int8Array()); +// xhr.send(document);</code> +</pre> + +<h2 id="Example_POST" name="Example_POST">POST の例</h2> + +<pre class="brush: js"><code>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);</code> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("api.XMLHttpRequest.send")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest における HTML の扱い</a></li> +</ul> 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 +--- +<h2 id="Receiving_binary_data_using_JavaScript_typed_arrays" name="Receiving_binary_data_using_JavaScript_typed_arrays">JavaScript 型付き配列を使ったバイナリデータの受信</h2> + +<p>XMLHttpRequest オブジェクトの <code>responseType</code> プロパティで、サーバーに期待する応答の種類を変更することができます。設定可能な値は空文字列 (既定), <code>"arraybuffer"</code>, <code>"blob"</code>, <code>"document"</code>, <code>"json"</code>, <code>"text"</code> です。 <code>response</code> プロパティにはエンティティの本体が <code>responseType</code> に応じて <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code> または文字列で格納されます。要求が不完全であったり成功しなかった場合は <code>null</code> になります。</p> + +<p>このサンプルでは画像をバイナリファイルとして読み込み、生のバイト列から８ビット符号なし整数値の配列を作成します。なお、これは画像をデコードしてピクセルを読み取ることは行いません。そのためには <a href="https://github.com/devongovett/png.js/">png decoding library</a> が必要になるでしょう。</p> + +<pre class="brush: js">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); +</pre> + +<p>上記の方法の代わりに {{domxref("Blob")}} インタフェースを利用して arraybuffer データから直接 <code>Blob</code> を構築します｡</p> + +<pre class="brush: js">var oReq = new XMLHttpRequest(); +oReq.open("GET", "/myfile.png", true); +oReq.responseType = "blob"; + +oReq.onload = function(oEvent) { + var blob = oReq.response; + // ... +}; + +oReq.send();</pre> + +<h2 id="Receiving_binary_data_in_older_browsers" name="Receiving_binary_data_in_older_browsers">古いブラウザーでのバイナリデータの受信</h2> + +<p>下に示す <code>load_binary_resource()</code> 関数は、指定した URL からロードしたバイナリデータを関数の呼び元に返します。</p> + +<pre class="brush: js">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; +} +</pre> + +<p>マジックは５行目で、 MIME タイプを上書きしてブラウザーに強制的に、ユーザー定義の文字セットを使用したプレインテキストとして扱わせます。これにより、ブラウザーはこれを解釈せず、未処理のままバイト列を通します。</p> + +<pre class="brush: js">var filestream = load_binary_resource(url); +var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7) +</pre> + +<p>上記のサンプルでは、ロードしたバイナリデータ内のオフセット <code>x</code> のバイトを取得します。 <code>x</code> の有効範囲は 0 から <code>filestream.length-1</code> です。</p> + +<p>詳細な説明は <a href="http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html">downloading binary streams with XMLHttpRequest</a> を見て下さい。また <a href="/ja/docs/Code_snippets/Downloading_Files" title="Code_snippets/Downloading_Files">downloading files</a> も見て下さい。</p> + +<h2 id="Sending_binary_data" name="Sending_binary_data">バイナリデータの送信</h2> + +<p>XMLHttpRequest の <code>send</code> メソッドが拡張され、 <a href="/ja/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a>, {{domxref("Blob")}}, または {{domxref("File")}} オブジェクトを受け付ける事でバイナリデータの送信が容易になりました.</p> + +<p>続くサンプルはその場で作ったテキストファイルを <code>POST</code> メソッドで "file" をサーバーに送信します。このサンプルはプレインテキストを使っていますが、代わりにデータがバイナリファイルだとイメージする事も出来ます。</p> + +<pre class="brush: js">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); +</pre> + +<h2 id="Sending_typed_arrays_as_binary_data" name="Sending_typed_arrays_as_binary_data">バイナリデータとして型付き配列を送信</h2> + +<p>同等にバイナリデータとして JavaScript の型付き配列を送信することもできます。</p> + +<pre class="brush: js">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); +</pre> + +<p>これは 8ビット整数の 512 バイトの配列を構築して送信します。勿論、好きな任意のバイナリデータで使えます。</p> + +<div class="note"><strong>メモ:</strong> XMLHttpRequest を使った <a href="/ja/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a> オブジェクトの送信サポートは Gecko 9.0 {{geckoRelease("9.0")}}で追加されました。<strong>他のブラウザーのサポート情報をここに追記して下さい。</strong></div> + +<h2 id="Submitting_forms_and_uploading_files" name="Submitting_forms_and_uploading_files">フォーム送信とファイルアップロード</h2> + +<p><a href="/ja/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">この節</a>をお読み下さい。</p> + +<h2 id="Firefox-specific_examples" name="Firefox-specific_examples">Firefox 独自のサンプル</h2> + +<p>このサンプルでは非同期にバイナリコンテンツを送信するのに <code>POST</code> メソッドと Firefox にある非標準の <code>sendAsBinary()</code> を使います。</p> + +<pre class="brush: js">var req = new XMLHttpRequest(); +req.open("POST", url, true); +// set headers and mime-type appropriately +req.setRequestHeader("Content-Length", 741); +req.sendAsBinary(aBody); +</pre> + +<p>4行目で Content-Length ヘッダに 741 をセットするのは、データが 741 バイト長である事を示します。送信データの実際のサイズに応じてこの値を変更する必要があります。</p> + +<p>５行目では <code>sendAsBinary()</code> メソッドを使ってリクエストをはじめます。</p> + +<div class="note"><strong>メモ:</strong> この <code>sendAsBinary</code> メソッドは標準外であり、 Gecko 31 {{ geckoRelease(31) }} で非推奨扱いになって、まもなく削除されるでしょう。上で説明したように、標準の <code>send(Blob data)</code> メソッドを使用することができます。</div> + +<p>また、{{interface("nsIFileInputStream")}} のインスタンスの <a href="/ja/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a> を通す事でバイナリコンテンツを送信できます。この場合は、あなた自身が <code>Content-Length</code> ヘッダセットしてはならず、この情報はストリームから自動的に取得されます。</p> + +<pre class="brush: js">// ファイルからストリームを作成する。 +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); +</pre> + +<div>{{APIRef("XMLHttpRequest")}}</div> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p>{{domxref("XMLHttpRequest")}} の <code><strong>setRequestHeader()</strong></code> メソッドは、 HTTP リクエストヘッダーの値を設定します。 <code>setRequestHeader()</code> は、 {{domxref("XMLHttpRequest.open", "open()")}} の呼び出しの後、 {{domxref("XMLHttpRequest.send", "send()")}} の呼び出しの前に呼び出さなければなりません。同じヘッダーについてこのメソッドを複数回呼び出された場合は、複数の値が単一のリクエストヘッダーにマージされます。</p> + +<p>最初に <code>setRequestHeader()</code> を呼び出した後、呼び出す度に、指定されたテキストは既存のヘッダーの内容の末尾に追加されます。</p> + +<p>この関数を使用して {{HTTPHeader("Accept")}} ヘッダーが設定されなかった場合、 {{domxref("XMLHttpRequest.send", "send()")}} が呼び出されると、 <code>Accept</code> ヘッダーは <code>*/*</code> の値で送信されます。</p> + +<p>セキュリティ上の理由で、いくつかのヘッダは、ユーザエージェントからしか制御できません。これらのヘッダーには、 {{Glossary("Forbidden_header_name", "禁止ヘッダー名", 1)}} および {{Glossary("Forbidden_response_header_name", "禁止レスポンスヘッダー名", 1)}} を含みます。</p> + +<div class="note"> +<p><strong>注:</strong> カスタムフィールドについては、ドメインをまたがってリクエストを行うと、 "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>" の例外に遭遇することがあります。この場合、サーバー側でレスポンスヘッダーに {{HTTPHeader("Access-Control-Allow-Headers")}} を設定する必要があります。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><var>XMLHttpRequest</var>.setRequestHeader(<var>header</var>, <var>value</var>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>header</code></dt> + <dd>値を設定するヘッダーの名前。</dd> + <dt><code>value</code></dt> + <dd>そのヘッダーの本体として設定する値。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>undefined</code> です。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-setrequestheader()-method', 'setRequestHeader()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.setRequestHeader")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest での HTML</a></li> +</ul> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><code><strong>XMLHttpRequest.status</strong></code> プロパティは読み取り専用で、 <code>XMLHttpRequest</code> のレスポンスにおける数値の HTTP <a href="/en-US/docs/Web/HTTP/Status">ステータスコード</a>を返します。</p> + + + +<p>リクエストが完了する前は、 <code>status</code> の値は 0 になります。 <code>XMLHttpRequest</code> がエラーになった場合も、ブラウザーはステータスとして 0 を返します。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">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 + */ +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-status-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.status")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTTP/Response_codes">HTTP レスポンスコード</a>の一覧</li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> 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 +--- +<p>{{domxref('XMLHttpRequest')}} は同期及び非同期通信の両方に対応しています。しかし、一般的には性能上の理由により、同期リクエストより非同期リクエストを推奨するべきです。</p> + +<p>同期リクエストはプログラムの実行をブロックし、画面を「フリーズ」させたりユーザー操作が反応しない状態にしたりすることがあります。</p> + +<h2 id="Asynchronous_request" name="Asynchronous_request">非同期リクエスト</h2> + +<p>非同期 {{domxref('XMLHttpRequest')}} を使用すると、データが到着したときにコールバックを受け取ります。これにより、リクエストが処理されている間、ブラウザーは通常通りに動作することができます。</p> + +<h3 id="Example_send_a_file_to_the_console_log" name="Example_send_a_file_to_the_console_log">例: コンソールログへファイルを送信する</h3> + +<p>最も簡単な非同期 {{domxref('XMLHttpRequest')}} の使用法を示します。</p> + +<pre class="brush: js notranslate">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); </pre> + +<p>2行目で第3引数を <code>true</code> にすることで、リクエストを非同期に処理することを指定しています。</p> + +<p>3行目はイベントハンドラー関数オブジェクトを生成し、リクエストの <code>onload</code> 属性に割り当てています。このハンドラーは、4行目でリクエストの <code>readyState</code> を見てトランザクションが完了したかどうかを確認し、もしそうであり、かつ HTTP ステータスが 200 であれば、受信した内容をコンソールにダンプします。エラー発生時には、エラーメッセージが表示されます。</p> + +<p>15行目では実際にリクエストを開始します。コールバック処理は状態が変化するたびに呼び出されます。</p> + +<h3 id="Example_writing_a_function_to_read_an_external_file" name="Example_writing_a_function_to_read_an_external_file">例: 外部ファイルを読込む標準的な関数を書く</h3> + +<p>たくさんの外部ファイルを読み込まなければならないことがあります。これは {{domxref('XMLHttpRequest')}} オブジェクトを非同期で使用して、読み込まれたファイルの内容を指定されたリスナに切り替える標準的な関数です。</p> + +<pre class="brush: js notranslate">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); +} +</pre> + +<p>使用法:</p> + +<pre class="brush: js notranslate">function showMessage(message) { + console.log(message + this.responseText); +} + +loadFile("message.txt", showMessage, "New message!\n\n"); +</pre> + +<p>ユーティリティ関数 <em><strong>loadFile</strong></em> の引数は、 (i) (HTTP の GET リクエストを介して) 読み込む対象の URL、 (ii) XHR 操作の正常終了時に実行する関数、 (iii) 任意で XHR オブジェクトから成功時のコールバック関数に (<code>arguments</code> プロパティで) そのまま渡される追加の引数のリストです。</p> + +<p>1行目では、 XHR 操作の正常終了時に呼び出される関数を宣言しています。これは、 loadFile 関数の呼び出しの中で XHR オブジェクトのプロパティに (11行目で) 割り当てられたコールバック関数 (この場合は <code>showMessage</code> 関数) を呼び出します。 <code>loadFile</code> 関数の呼び出しに提供される追加の引数は (もしあれば)、コールバック関数の実行時に「適用」されます。</p> + +<p>5行目では、 XHR 操作の完了に失敗した時に呼び出される関数を宣言しています。</p> + +<p>11行目では、 XHR オブジェクトの <code>callback</code> プロパティに <code>loadFile</code> の第2引数で渡された成功時のコールバック関数を格納します。</p> + +<p>12行目では、 <code>loadFile</code> の呼び出しで与えられた引数の配列を分割します。第3引数以降、残りのすべての引数が集められ、変数 <code>xhr</code> の arguments プロパティに割り当てられ、成功時のコールバック関数 <code>xhrSuccess</code> に渡され、最終的には <code>xhrSuccess</code> 関数から呼び出されるコールバック関数 (この場合は <code>showMessage</code> 関数) に渡されます。</p> + +<p>15行目では、リクエストを非同期に処理することを指示するため、第3引数に <code>true</code> を指定しています．</p> + +<p>16行目で実際にリクエストを実行しています。</p> + +<h3 id="Example_using_a_timeout" name="Example_using_a_timeout">例: タイムアウトの利用</h3> + +<p>読み込みが行われるのを待つ間、プログラムが永遠に待つことを防ぐためにタイムアウトを利用することができます。これは次のように、 {{domxref('XMLHttpRequest')}} オブジェクト上の <code>timeout</code> プロパティの値を設定することで行うことができます。</p> + +<pre class="brush: js notranslate">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); +}</pre> + +<p><code>ontimeout</code> ハンドラーを設定することで、 "timeout" イベントを処理するコードを追加していることに注意してください。</p> + +<p>使用法:</p> + +<pre class="brush: js notranslate">function showMessage (message) { + console.log(message + this.responseText); +} + +loadFile("message.txt", 2000, showMessage, "New message!\n"); +</pre> + +<p>ここではタイムアウトを2000ミリ秒に設定しています．</p> + +<div class="note"> +<p><strong>注:</strong> <code>timeout</code> の対応は {{Gecko("12.0")}} で追加されました。</p> +</div> + +<h2 id="Synchronous_request" name="Synchronous_request">同期リクエスト</h2> + +<div class="note"><strong>注:</strong> Gecko 30.0 {{geckoRelease("30.0")}}, Blink 39.0, Edge 13 以降では、メインスレッド上での同期リクエストはユーザーの使い勝手に悪影響を与えるため、非推奨になっています。</div> + +<p>同期 XHR リクエストはしばしばウェブ上でハングアップの原因となります。しかし、開発者は通常、ハングアップが発生するのはネットワークの状態が悪かったり、リモートサーバの応答が遅かったりしたときだけなので、この問題に気づくことはありません。 Synchronous XHR は現在非推奨の状態にあります。開発者は同期 API から離れて、代わりに非同期リクエストを使うことをお勧めします。</p> + +<p><code>timeout</code> や <code>abort</code> 等の XHR の新機能は同期 XHR では許可されていません。実行すると <code>InvalidAccessError</code> が発生するでしょう。</p> + +<h3 id="Example_HTTP_synchronous_request" name="Example_HTTP_synchronous_request">例: HTTP 同期リクエスト</h3> + +<p>この例は単純な同期リクエストの作成方法を示しています。</p> + +<pre class="brush: js notranslate">var request = new XMLHttpRequest(); +request.open('GET', '/bar/foo.txt', false); // `false` で同期リクエストになる +request.send(null); + +if (request.status === 200) { + console.log(request.responseText); +} +</pre> + +<p>3行目でリクエストを送信しています。引数が <code>null</code> であることは、 <code>GET</code> リクエストに本文が必要ないことを示しています。</p> + +<p>5行目ではトランザクション完了後，ステータスコードをチェックしています。結果のコードが 200 -- HTTP の "OK" の結果 -- ならば、文書のテキストコンテンツがコンソールに出力されます。</p> + +<h3 id="Example_Synchronous_HTTP_request_from_a_Worker" name="Example_Synchronous_HTTP_request_from_a_Worker">例: ワーカーからの同期 HTTP リクエスト</h3> + +<p>同期リクエストが通常、実行をブロックしない稀な例として、 <code><a href="/ja/docs/Web/API/Worker">Worker</a></code> 内での {{domxref('XMLHttpRequest')}} の利用があります。</p> + +<p><code><strong>example.html</strong></code> (主ページ):</p> + +<pre class="brush: html notranslate"><!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> +</pre> + +<p><code><strong>myFile.txt</strong></code> ({{domxref('XMLHttpRequest')}} 同期呼出しの対象):</p> + +<pre class="notranslate">Hello World!! +</pre> + +<p><code><strong>myTask.js</strong></code> (<code><a href="/ja/docs/Web/API/Worker">Worker</a></code>):</p> + +<pre class="brush: js notranslate">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); + } +}; +</pre> + +<div class="note"><strong>注:</strong> 但し、 <code>Worker</code> を使っているため結果的に非同期になります。</div> + +<p>これは、バックグラウンドでサーバーとやり取りしたり、一部のコンテンツを先読みしたりするために便利です。例と詳細については <a class="internal" href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">Web Worker の利用</a>を参照して下さい。</p> + +<h3 id="Adapting_Sync_XHR_use_cases_to_the_Beacon_API" name="Adapting_Sync_XHR_use_cases_to_the_Beacon_API">同期 XHR を使用する場面を Beacon API で対応する</h3> + +<p>{{domxref('XMLHttpRequest')}} の同期的な使用が置き換えられない場面がいくつかあります。例えば {{domxref("Window.unload_event", "unload")}}, {{domxref("Window.beforeunload_event", "beforeunload")}}, {{domxref("Window.pagehide_event", "pagehide")}} などのイベントの処理中などです。 <code>fetch()</code> API を <code>keepalive</code> フラグ付きで使用することを検討してください。 <code>fetch</code> API を <code>keepalive</code> フラグ付きで使用できないのであれば、ふつうは快適なユーザー操作を提供するために {{domxref("navigator.sendBeacon()")}} API でこれらの場合に対応することができます。</p> + +<p>次の例は、 unload ハンドラー内で同期 {{domxref('XMLHttpRequest')}} を使用してサーバーにデータを送信することを試みる、実験的な分析コードを示しています。この結果、ページのアンロードに遅延が発生します。</p> + +<pre class="brush: js notranslate">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); +} +</pre> + +<p><strong><code>sendBeacon()</code></strong> メソッドを使用すると、ユーザーエージェントに機会があるとき、<strong>アンロードを遅延させたり次の操作の性能に影響を与えたりすることなく</strong>データがウェブサーバーに非同期で送信されます。</p> + +<p>次の例は、 <strong><code>sendBeacon()</code></strong> メソッドを使用してサーバーにデータを送信する実験的な分析コードパターンを示しています。</p> + +<pre class="brush: js notranslate">window.addEventListener('unload', logData, false); + +function logData() { + navigator.sendBeacon("/log", analyticsData); +} +</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using <code>XMLHttpRequest</code></a></li> + <li><a href="/ja/docs/Web/Guide/AJAX">AJAX</a></li> + <li><code><a href="/ja/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a></code></li> +</ul> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><code><strong>XMLHttpRequest.timeout</strong></code> はリクエストが自動的に終了するまでの時間をミリ秒で示す <code>unsigned long</code> 型のプロパティです。既定値はタイムアウトが無いことを示す 0 に設定されています。 timeout は{{Glossary('document environment', '文書環境')}}で利用される同期型や <code>InvalidAccessError</code> の例外を投げる XMLHttpRequests に利用することはできません。タイムアウトとなった場合、 <a href="/ja/docs/Web/Events/timeout">timeout</a> イベントが発火します。 {{gecko_minversion_inline("12.0")}}</p> + +<dl> + <dd> + <div class="note"><strong>メモ:</strong> timeout は自分のウィンドウを持つ場合に同期で利用することは認められていません。</div> + </dd> + <dd><a href="/ja/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">非同期リクエストでの timeout の使用</a></dd> +</dl> + +<p>Internet Explorer においては、 timeout プロパティは <a href="/ja/docs/Web/API/XMLHttpRequest/open">open()</a> メソッドを呼んでから <a href="/ja/docs/Web/API/XMLHttpRequest/send">send()</a> メソッドを呼ぶまでの間しかセットすることはできません。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">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);</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.timeout")}}</p> 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: 'XMLHttpRequest: timeout イベント' +slug: Web/API/XMLHttpRequest/timeout_event +tags: + - Reference + - XHR + - XMLHttpRequest + - timeout + - イベント + - タイムアウト +translation_of: Web/API/XMLHttpRequest/timeout_event +--- +<div>{{APIRef}}</div> + +<p><code><strong>timeout</strong></code> イベントは、設定された時間が経過し進捗が終了すると発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <td>バブリング</td> + <td>なし</td> + </tr> + <tr> + <td>キャンセル</td> + <td>不可</td> + </tr> + <tr> + <td>インターフェイス</td> + <td>{{domxref("ProgressEvent")}}</td> + </tr> + <tr> + <td>イベントハンドラープロパティ</td> + <td>{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js line-numbers language-js">const client = new XMLHttpRequest(); +client.open('GET', 'http://www.example.org/example.txt'); +client.ontimeout = () => { + console.error('Timeout!!') +}; + +client.send();</pre> + +<p>イベントハンドラーは {{domxref("EventTarget/addEventListener", "addEventListener()")}} メソッドを使用して設定することもできます。</p> + +<pre class="brush: js">client.addEventListener('timeout', () => { + console.error("Timeout!!"); +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#event-xhr-timeout', 'timeout event')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>{{Compat("api.XMLHttpRequest.timeout_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("XMLHttpRequest")}}</li> +</ul> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary">{{domxref("XMLHttpRequest")}} の <code>upload</code> プロパティは、アップロードの進捗を監視することができる {{domxref("XMLHttpRequestUpload")}} オブジェクトを返します。</span>これは不透過なオブジェクトですが、 {{domxref("XMLHttpRequestEventTarget")}} でもあるため、進捗を追跡するために添付することができます。</p> + +<p>以下のイベントは upload オブジェクトを起動してアップロードを監視する目に使用することができます。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">イベント</td> + <td class="header">イベントリスナー</td> + <td class="header">解説</td> + </tr> + <tr> + <td>{{event("loadstart")}}</td> + <td>{{domxref("XMLHttpRequest.onloadstart", "onloadstart")}}</td> + <td>アップロードが始まった。</td> + </tr> + <tr> + <td>{{event("progress")}}</td> + <td>{{domxref("XMLHttpRequest.onprogress", "onprogress")}}</td> + <td>進捗の量を示すために定期的に発生する。</td> + </tr> + <tr> + <td>{{event("abort")}}</td> + <td>{{domxref("XMLHttpRequest.onabort", "onabort")}}</td> + <td>アップロード操作が中断された。</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("XMLHttpRequest.onerror", "onerror")}}</td> + <td>アップロードがエラーのために失敗した。</td> + </tr> + <tr> + <td>{{event("load")}}</td> + <td>{{domxref("XMLHttpRequest.onload", "onload")}}</td> + <td>アップロードが完全に成功した。</td> + </tr> + <tr> + <td>{{event("timeout")}}</td> + <td>{{domxref("XMLHttpRequest.ontimeout", "ontimeout")}}</td> + <td>返事が {{domxref("XMLHttpRequest.timeout")}} で指定された時間間隔内に届かなかったため、アップロードがタイムアウトされた。</td> + </tr> + <tr> + <td>{{event("loadend")}}</td> + <td>{{domxref("XMLHttpRequest.onloadend", "onloadend")}}</td> + <td>アップロードが終了した。このイベントでは成功か失敗かを区別することはできず、結果にかかわらずアップロードが終了したときに送信されます。このイベントの前に、 <code>load</code>, <code>error</code>, <code>abort</code>, <code>timeout</code> のうちの1つがアップロードが終了した理由を示すために配信されます。</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-upload-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest.upload")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> + <li><a href="/ja/docs/Web/API/File_Handle_API">FileHandle API</a></li> + <li><a href="/ja/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> +</ul> 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 +--- +<div>{{APIRef("XMLHttpRequest")}}</div> + +<p><span class="seoSummary">このガイドでは、ウェブサイトとサーバーの間でデータ交換をするために、 {{domxref("XMLHttpRequest")}} を使用して <a href="/ja/docs/Web/HTTP">HTTP</a> リクエストを発行する方法を紹介します。</span> <code>XMLHttpRequest</code> のよくある使用例やもっと分かりにくい使用例も含まれています。</p> + +<p>HTTP リクエストを送るには、 <code>XMLHttpRequest</code> オブジェクトを作成し、 URL を開いてリクエストを送信します。トランザクションが完了すると、オブジェクトには結果の <a href="/ja/docs/Web/HTTP/Status">HTTP ステータスコード</a>やレスポンスの本文などの有益な情報が格納されます。</p> + +<pre class="brush: js notranslate">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();</pre> + +<h2 id="Types_of_requests" name="Types_of_requests">リクエストの種類</h2> + +<p><code>XMLHttpRequest</code> によって作成されたリクエストは、非同期または同期のいずれかの方法でデータを取得することが可能です。リクエストをどちらの方法で行うかは、 {{domxref("XMLHttpRequest.open()")}} メソッドの <code>async</code> 引数 (第3引数) で指示できます (オプション)。このプロパティを <code>true</code> に指定するか指定しなければ <code>XMLHttpRequest</code> は非同期で処理され、それ以外だと同期的に扱われます。これら二つの種類のリクエストに関する詳細および使用例は、<a href="/ja/docs/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">同期および非同期リクエスト</a>のページを参照してください。ウェブワーカー以外では同期リクエストを使用しないでください。</p> + +<div class="note"><strong>注:</strong> Gecko 30.0 {{ geckoRelease("30.0") }} から、メインスレッドにおける同期リクエストはユーザーの使い勝手に悪影響を与えるため、非推奨になりました。</div> + +<div class="note"><strong>注:</strong> コンストラクター関数 <code>XMLHttpRequest</code> は XML 文書に限定されていません。 <strong>"XML"</strong> で始まっているのは、これが作成されたときに非同期データ交換に使用されていた主要な形式が XML であったからです。</div> + +<h2 id="Handling_responses" name="Handling_responses">レスポンスの取り扱い</h2> + +<p>HTML Living Standard 仕様書で定義されている {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} コンストラクターの <a href="https://xhr.spec.whatwg.org/">response 属性</a>は何種類かがあります。これらはクライアントに <code>XMLHttpRequest</code> にレスポンスのステータスに関する重要な情報を作るように指示します。テキスト以外のレスポンス型を扱う場合は、後の節で概説する操作や解析が入ることがあるかもしれません。</p> + +<h3 id="Analyzing_and_manipulating_the_responseXML_property" name="Analyzing_and_manipulating_the_responseXML_property">responseXML プロパティの解析と操作</h3> + +<p>リモートの XML 文書のコンテンツを得るために <code>XMLHttpRequest</code> を使う場合、 <code>responseXML</code> プロパティが解析済みの XML 文書を含む DOM オブジェクトとなります。これによって、操作や解析が難しくなる可能性があります。この XML 文書を解析するには主な4つの方法があります。</p> + +<ol> + <li>部品を指すために <a href="/ja/docs/Web/XPath">XPath</a> を使う。</li> + <li>手動で <a href="/ja/docs/Web/Guide/Parsing_and_serializing_XML">XML を解析及びシリアライズして</a>文字列やオブジェクトにする。</li> + <li>{{domxref("XMLSerializer")}} を使って <strong>DOM ツリーを文字列やファイルに</strong>シリアライズする。</li> + <li>事前に XML 文書の中身が常に分かっている場合は {{jsxref("RegExp")}} を使うこともできます。改行を <code>RegExp</code> でスキャンする場合に、改行を除去した方がよく見えることもありますが、 XML 文書が少しでも変更されると、メソッドは失敗しがちなため、このメソッドは「最後の手段」です。</li> +</ol> + +<div class="note"> +<p><strong>注:</strong> <code>XMLHttpRequest</code> は {{domxref("XMLHttpRequest.responseXML", "responseXML")}} プロパティを使用することによって、 HTML を解釈できるようになりました。この方法について学ぶには、 <a href="/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest での HTML</a> についての記事をお読みください。</p> +</div> + +<h3 id="Processing_a_responseText_property_containing_an_HTML_document" name="Processing_a_responseText_property_containing_an_HTML_document">HTML 文書を含む responseText プロパティの処理</h3> + +<p><code>XMLHttpRequest</code> を使ってリモート HTML ウェブページのコンテンツを取得する場合、 {{domxref("XMLHttpRequest.responseText", "responseText")}} プロパティは生の HTML が入った文字列です。これは操作や解析が難しいことを示しています。この生の HTML 文字列を分析し解析するには、主に3つの方法があります。</p> + +<ol> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest での HTML</a> の記事で紹介されている <code>XMLHttpRequest.responseXML</code> プロパティを使用する。</li> + <li><code>fragment.body.innerHTML</code> を通して<a href="/ja/docs/Web/API/DocumentFragment">文書フラグメント</a>の本文をコンテンツに挿入し、そのフラグメントの DOM を巡る。</li> + <li>事前に HTML の <code>responseText</code> の中身が常に分かっている場合は {{jsxref("RegExp")}} を使うこともできます。改行を RegExp でスキャンする場合に、改行を除去した方がよく見えることもありますが、 HTML 文書が少しでも変更されると、メソッドは失敗しがちなため、このメソッドは「最後の手段」です。</li> +</ol> + +<h2 id="Handling_binary_data" name="Handling_binary_data">バイナリデータの扱い</h2> + +<p>{{domxref("XMLHttpRequest")}} はテキストデータの送受信に最もよく使われますが、バイナリコンテンツの送受信にも使えます。 <code>XMLHttpRequest</code> のレスポンスをバイナリデータ送信に強制するためのテストされたメソッドがいくつかあります。この中には <code>XMLHttpRequest</code> オブジェクトの {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} メソッドを活用して使える解決法としているものも入っています。</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +oReq.open("GET", url); +// バイナリ文字列として未処理のデータを取得する +oReq.overrideMimeType("text/plain; charset=x-user-defined"); +/* ... */ +</pre> + +<p>しかし、もっと新しいテクニックも使用でき、 {{domxref("XMLHttpRequest.responseType", "responseType")}} 属性がいくつもの追加のコンテンツ型に対応するようになったので、データの送信や受信がずっと簡単になりました。</p> + +<p>例えばこのスニペットでは、 <code>responseType</code> に "<code>arraybuffer</code>" を使用して、生のバイナリデータを格納できる {{jsxref("ArrayBuffer")}} オブジェクトにリモートコンテンツを取得しています。</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.onload = function(e) { + var arraybuffer = oReq.response; // responseText ではない + /* ... */ +} +oReq.open("GET", url); +oReq.responseType = "arraybuffer"; +oReq.send();</pre> + +<p>その他の例は、<a href="/ja/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a> ページを確認してください。</p> + +<h2 id="Monitoring_progress" name="Monitoring_progress">進捗の監視</h2> + +<p><code>XMLHttpRequest</code> は、リクエストが処理されている間に発生する様々なイベントを待受けする機能を提供しています。これには定期的な進捗の通知、エラーの通知、などが含まれます。</p> + +<p><code>XMLHttpRequest</code> の転送を監視する DOM 進捗イベントの対応は、 <a href="https://xhr.spec.whatwg.org/#interface-progressevent">specification for progress events</a> に従います。このイベントは {{domxref("ProgressEvent")}} インターフェイスを実装します。進行中の転送の状態を特定するために監視することができる実際のイベントは、以下の通りです。</p> + +<dl> + <dt>{{event("progress")}}</dt> + <dd>受取済みのデータ量が変化したとき。</dd> + <dt>{{event("load")}}</dt> + <dd>転送が完了したとき。すべてのデータが <code>response</code> に入っています。</dd> +</dl> + +<pre class="brush:js notranslate">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("ユーザーが転送をキャンセルしました。"); +}</pre> + +<p>3-6 行目で <code>XMLHttpRequest</code> を使ってデータ転送を行うときに送られる色々なイベントへのためのイベントリスナーを追加しています。</p> + +<div class="note"><strong>注:</strong> イベントリスナーはリクエストの <code>open()</code> を呼び出す前に追加する必要があります。そうしないと <code>progress</code> イベントは発火しません。</div> + +<p>進捗のイベントハンドラーは、この例では <code>updateProgress()</code> 関数で指定され、全転送バイト数と、これまで転送されたバイト数をイベントの <code>total</code> と <code>loaded</code> フィールドで受け取ります。しかし、<code>lengthComputable</code> フィールドが false なら、全体の長さは不明で、ゼロになります。</p> + +<p>進捗イベントはダウンロード、アップロードの両方で存在します。ダウンロードイベントは、上記サンプルのように、<code>XMLHttpRequest</code> オブジェクトそのもので発火されます。アップロードイベントは下記のように、 <code>XMLHttpRequest.upload</code> オブジェクトで発火されます:</p> + +<pre class="brush:js notranslate">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(); +</pre> + +<div class="note"><strong>注:</strong> 進捗イベントは <code>file:</code> プロトコルでは利用できません。</div> + +<div class="note"> +<p><strong>注:</strong> {{Gecko("9.0")}} から、進捗イベントは受け取ったデータチャンクごとに起こり、最後のパケットを受け取って進捗イベントが発火する前に接続が閉じた場合のチャンクも含まれます。この場合、進捗イベントはそのパケットのロードイベントが起きた時に自動的に発火します。これで「進捗」イベントをウォッチするだけで安定した進捗を監視できます。</p> +</div> + +<div class="note"> +<p><strong>注:</strong> {{Gecko("12.0")}} 以降、"moz-blob" の <code>responseType</code> で進捗イベントが呼ばれた場合、レスポンスの値はこれまで受け取ったデータを含む {{domxref("Blob")}} となります。</p> +</div> + +<p>ロードを終える3つの条件 (<code>abort</code>, <code>load</code>, か <code>error</code>) を <code>loadend</code> イベントで検出することもできます:</p> + +<pre class="brush:js notranslate">req.addEventListener("loadend", loadEnd); + +function loadEnd(e) { + console.log("The transfer finished (although we don't know if it succeeded or not)."); +} +</pre> + +<p>注意点として、<code>loadend</code> イベントで受け取った情報から、どの条件で動作が終了したのかを確かめる方法はありません。しかし、これを使ってすべての転送終了シナリオにて行う必要のあるタスクを処理できます。</p> + +<h2 id="Submitting_forms_and_uploading_files" name="Submitting_forms_and_uploading_files">フォームの投稿とファイルのアップロード</h2> + +<p><code>XMLHttpRequest</code> のインスタンスはフォームの投稿をするのにも次の2つの方法で利用することができます。</p> + +<ul> + <li>AJAX だけを使う</li> + <li>{{domxref("XMLHttpRequest.FormData", "FormData")}} API を使う</li> +</ul> + +<p><code>FormData</code> API を使うのが最もシンプルで速く、しかし集めたデータを<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">文字列化</a>できない短所があります。<br> + AJAX だけを使うのはもっと複雑ですが、ふつうより柔軟で強力です。</p> + +<h3 id="Using_nothing_but_XMLHttpRequest" name="Using_nothing_but_XMLHttpRequest"><code>XMLHttpRequest</code> だけを使う</h3> + +<p><code>FormData</code> API を使用せずにフォームを送信する場合は、多くの場合は他の API が必要ではありません。追加の API が必要な場合は、<strong>１つ以上のファイルをアップロードしたい場合</strong>に {{domxref("FileReader")}} API を使用する場合だけです。</p> + +<h4 id="A_brief_introduction_to_the_submit_methods" name="A_brief_introduction_to_the_submit_methods">submit メソッドの簡単な入門</h4> + +<p>html {{ HTMLElement("form") }} は、次の４つの方法で送ることができます。</p> + +<ul> + <li><code>POST</code> メソッドを使い、 <code>enctype</code> 属性を <code>application/x-www-form-urlencoded</code> (既定値) に設定する</li> + <li><code>POST</code> メソッドを使い、 <code>enctype</code> 属性を <code>text/plain</code>にセットする;</li> + <li><code>POST</code> メソッドを使い、 <code>enctype</code> 属性を <code>multipart/form-data</code>にセットする;</li> + <li><code>GET</code> メソッドを使う (この場合 <code>enctype</code> 属性は無視される)。</li> +</ul> + +<p>ここで、たった2つの<code>foo</code> と <code>baz</code>の名前のフィールドを持つフォームの投稿を考えます。 <code>POST</code> メソッドを使うとサーバーは、使っている encoding type によって次の3つのサンプルのうちのどれかの文字列を受け取ります:</p> + +<ul> + <li> + <p>メソッド: <code>POST</code>; エンコーディングタイプ: <code>application/x-www-form-urlencoded</code> (default):</p> + + <pre class="brush:plain notranslate">Content-Type: application/x-www-form-urlencoded + +foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A</pre> + </li> + <li> + <p>メソッド: <code>POST</code>; エンコーディングタイプ: <code>text/plain</code>:</p> + + <pre class="brush:plain notranslate">Content-Type: text/plain + +foo=bar +baz=The first line. +The second line.</pre> + </li> + <li> + <p>メソッド: <code>POST</code>; エンコーディングタイプ: <code><a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">multipart/form-data</a></code>:</p> + + <pre class="brush:plain notranslate">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + +-----------------------------314911788813839 +Content-Disposition: form-data; name="foo" + +bar +-----------------------------314911788813839 +Content-Disposition: form-data; name="baz" + +The first line. +The second line. + +-----------------------------314911788813839--</pre> + </li> +</ul> + +<p>しかし、 <code>GET</code> メソッドを使っている場合、次のような文字列が URL に追加されます。</p> + +<pre class="brush:plain notranslate">?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> + +<h4 id="A_little_vanilla_framework" name="A_little_vanilla_framework">小さな vanilla フレームワーク</h4> + +<p>こうしたすべての効果は {{HTMLElement("form")}} を投稿するたびにウェブブラウザーで自動的に行われます。 JavaScript を使って同じ効果を実行したい場合、<em>すべて</em>をインタープリターに教えなければなりません。ゆえに、<em>純粋な</em> AJAX でフォームを送る方法をここで詳しく説明するには複雑すぎます。このため、<strong>完全な (しかし教訓的な) フレームワーク</strong>を置いて、この4つの<em>送信</em>の方法すべてを使い、<strong>ファイルをアップロードします</strong>。</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html notranslate"><!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></pre> +</div> + +<p>これをテストするには、 <strong>register.php</strong> というページ (サンプルフォームの <code>action</code> 属性の内容) を作って下記の<em>最小の</em>コンテンツを置きます。</p> + +<pre class="brush: php notranslate"><?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); + +</pre> + +<p>このスクリプトを有効化する文法は単純です。</p> + +<pre class="syntaxbox notranslate">AJAXSubmit(myForm);</pre> + +<div class="note"><strong>注:</strong> このフレームワークはファイルのアップロード送信に {{domxref("FileReader")}} API を使っています。これは最近の API であり、 IE9 以下では実装されていません。このため、 AJAX のみのアップロードは<strong>実験的なテクニック</strong>と考えられています。バイナリーファイルをアップロードする必要がなければ、このフレームワークはたいていのブラウザーでうまく動作します。</div> + +<div class="note"><strong>注:</strong> バイナリコンテンツを送信する場合、 {{jsxref("ArrayBuffer", "ArrayBuffers")}} 又は {{domxref("Blob", "Blobs")}} を使用して {{domxref("XMLHttpRequest.send()", "send()")}} メソッド及び、できれば <code>FileReader</code> API の {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} メソッドと組み合わせて送信するのが最良の方法です。しかし、このスクリプトのねらいは<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">文字列化可能</a>な生データを扱うことであり、 {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} メソッドに、<code>FileReader</code> API の {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} メソッドを組み合わせて使用しました。このように、上記のスクリプトは小さいファイルを扱うときのみ意味を持ちます。バイナリコンテンツをアップロードするのでなければ、代わりに <code>FormData</code> API を使用することを検討してください。</div> + +<div class="note"><strong>注:</strong> 標準外の <code>sendAsBinary</code> メソッドは Gecko 31 {{geckoRelease(31)}} から非推奨と扱われるようになり、まもなく削除されます。その代わりに標準の <code>send(Blob data)</code> メソッドを使用できます。</div> + +<h3 id="Using_FormData_objects" name="Using_FormData_objects">FormData オブジェクトの使用</h3> + +<p>{{domxref("XMLHttpRequest.FormData", "FormData")}} コンストラクターでは <code>XMLHttpRequest</code> を使用して送信するためのキー/値の組のセットをコンパイルできます。この主な使い方はフォームの送信ですが、フォームとは独立してキー付きのユーザーデータを転送するときにも使用することができます。フォームのエンコーディングタイプが "multipart/form-data" に設定された場合、送信されたデータは、データ送信に使うフォームの <code>submit()</code> メソッドと同じ書式です。 FormData オブジェクトは色々な方法で <code>XMLHttpRequest</code> と一緒に使うことができます。例や FormData と XMLHttpRequests を使用方法についての説明は、 <a href="/ja/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a>のページをご覧ください。ここでは説明目的で、<strong><a href="#A_little_vanilla_framework">前の例</a>の<em>翻訳</em>を <code>FormData</code> API を使用するよう変換</strong>してみます。コードの簡潔さに注目してください。</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html notranslate"><!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></pre> +</div> + +<div class="note"><strong>注:</strong> 前述のように、 <strong>{{domxref("FormData")}} オブジェクトは<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">文字列化できる</a> オブジェクトではありません</strong>。送信データを文字列化したい場合、<a href="#A_little_vanilla_framework">前の<em>純粋な</em> AJAX の例</a>を使ってください。また、この例では <code>file</code> {{ HTMLElement("input") }} フィールドがいくつかあり、 <strong><code>FormData</code> API を使ってフォームを送信するときに {{domxref("FileReader")}} API を使う必要もありません</strong>。ファイルは自動的に読み込まれてアップロードされます。</div> + +<h2 id="Get_last_modified_date" name="Get_last_modified_date">最終更新日を取得する</h2> + +<pre class="brush: js notranslate">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();</pre> + +<h3 id="Do_something_when_last_modified_date_changes" name="Do_something_when_last_modified_date_changes">最終更新日付が変わった時に何かする</h3> + +<p>２つの関数を作ってみましょう。</p> + +<pre class="brush: js notranslate">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(); +}</pre> + +<p>そしてテストします。</p> + +<pre class="brush: js notranslate">/* 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() + "!"); +});</pre> + +<p><strong><em>現在のページ</em>が変更された<em>かどうか</em></strong>を知りたい場合は、 {{domxref("document.lastModified")}} についての記事をお読みください。</p> + +<h2 id="Cross-site_XMLHttpRequest" name="Cross-site_XMLHttpRequest">サイト間の XMLHttpRequest</h2> + +<p>現在のブラウザーは、<ruby><a href="/ja/docs/Web/HTTP/CORS">オリジン間リソース共有</a><rp> (</rp><rt>Cross-Origin Resource Sharing</rt><rp>) </rp></ruby> (CORS) を実装することでサイト間リクエストに対応しています。サーバーがウェブアプリケーションのオリジンからのリクエストを許可するように構成されている場合のみ、 <code>XMLHttpRequest</code> は動作します。それ以外の場合は、 <code>INVALID_ACCESS_ERR</code> 例外が投げられます。</p> + +<h2 id="Bypassing_the_cache" name="Bypassing_the_cache">キャッシュをバイパスする</h2> + +<p>キャッシュをバイパスするブラウザー間で互換性のあるアプローチは、 URL にタイムスタンプを追加することで、適切に "?" 又は "&" を付け加えます。例えば以下のようにします。</p> + +<pre class="brush:plain notranslate">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 +</pre> + +<p>ローカルのキャッシュは URL によって索引づけられるため、これですべてのリクエストが固有のものとなり、それによってキャッシュをバイパスします。</p> + +<p>以下のコードを使用すると、自動的に URL を調整することができます。</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime()); +oReq.send(null);</pre> + +<h2 id="Security" name="Security">セキュリティ</h2> + +<p>{{fx_minversion_note(3, "Firefox 3 以前のバージョンの Firefox は、設定の <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> を <code>allAccess</code> に設定することで、特定のサイトのサイト間アクセスを許可することができます。これはもう対応されていません。")}}</p> + +<p>{{fx_minversion_note(5, "Firefox 5 以前のバージョンの Firefox は、 <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> を使用してサイト間アクセスをリクエストすることができます。これはもう対応されていませんが、警告は表示されず、アクセス権のダイアログは現在も表示されます。")}}</p> + +<p>サイト間スクリプトを有効にするための推奨される方法は、 XMLHttpRequest へのレスポンスの中で HTTP の <code>Access-Control-Allow-Origin</code> ヘッダーを使用することです。</p> + +<h3 id="XMLHttpRequests_being_stopped" name="XMLHttpRequests_being_stopped">XMLHttpRequests の停止</h3> + +<p>XMLHttpRequest が <code>status=0</code> 及び <code>statusText=null</code> を受信して終了すると、リクエストを実行することが許可されていないことを意味します。これは未送信 (<code><a href="https://xhr.spec.whatwg.org/#dom-xmlhttprequest-unsent">UNSENT</a></code>) 状態です。この原因の多くは、 XMLHttpRequest が <code>open()</code> の時に <a href="https://www.w3.org/TR/2010/CR-XMLHttpRequest-20100803/#xmlhttprequest-origin"><code>XMLHttpRequest</code> のオリジン</a> (XMLHttpRequest が作成された場所) が変更されたことによるものです。これは例えば、 XMLHttpRequest を持ったページで onunload イベントが発生し、ウィンドウが閉じようとしている時に XMLHttpRequest が作成され、ウィンドウがフォーカスを失って他のウィンドウがフォーカスを得たときにリクエストの送信 (言い換えれば <code>open()</code>) が行なわれた場合に発生することがあります。この問題を防ぐ最も効果的な方法は、 {{event("unload")}} イベントが発生したときに、新しいウィンドウの {{event("activate")}} イベントのリスナーを設定することです。</p> + +<h2 id="Workers" name="Workers">ワーカー</h2> + +<p>overrideMimeType を設定すると、 {{domxref("Worker")}} では動作しません。詳しくは {{bug(678057)}} を参照してください。他のブラウザーは扱いが異なるかもしれません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>ライブスタンダードの最新版</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.XMLHttpRequest")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ol> + <li><a href="/ja/docs/AJAX/Getting_Started">MDN の AJAX 入門</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest での HTML</a></li> + <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP アクセス制御</a></li> + <li><a href="/ja/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL">SSL 経由の XMLHTTPRequest のセキュリティ状態をチェックする方法</a></li> + <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a href="https://msdn.microsoft.com/library/ms535874">Microsoft documentation</a></li> + <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a href="https://xhr.spec.whatwg.org/">The <code>XMLHttpRequest</code> object: WHATWG specification</a></li> +</ol> 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 +--- +<p><a href="/en/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest">XMLHttpRequest</a> は、 Microsoft によって Internet Explorer 5.0 で ActiveX control として最初に導入されました。ただし、 IE7 およびその他のブラウザーでは XMLHttpRequest はネイティブ JavaScript オブジェクトです。</p> + +<p>最近のすべてのブラウザーでは、次のコードを使用して新規の XMLHttpRequest オブジェクトを作成できます:</p> + +<pre class="brush: js notranslate">var request = new XMLHttpRequest() +</pre> + +<p>ただし、 Internet Explorer 6 以前もサポートする必要がある場合、次のようにコードを拡張する必要があります:</p> + +<pre class="brush: js notranslate">if (window.XMLHttpRequest) { + //Firefox、 Opera、 IE7、およびその他のブラウザーはネイティブオブジェクトを使用します + var request = new XMLHttpRequest(); +} else { + //IE 5 および 6 は ActiveX control を使用します + var request = new ActiveXObject("Microsoft.XMLHTTP"); +} +</pre> + +<h3 id="関連項目">関連項目</h3> + +<ul> + <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> +</ul> 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 +--- +<div>{{draft}}{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary"><code><strong>XMLHttpRequest()</strong></code> コンストラクターは新しい {{domxref("XMLHttpRequest")}} を生成します。</span></p> + +<p><code>XMLHttpRequest</code> の使用方法についての詳細は、 <a class="internal" href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a>を参照してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>新しい {{domxref("XMLHttpRequest")}} オブジェクト。このオブジェクトは {{domxref("XMLHttpRequest.send", "send()")}} を呼び出してサーバーにリクエストを送る前に、少なくとも {{domxref("XMLHttpRequest.open", "open()")}} を呼び出して初期化をしなければなりません。</p> + +<h2 id="Non-standard_Firefox_syntax" name="Non-standard_Firefox_syntax">標準外の Firefox の構文</h2> + +<p>Firefox 16 ではコンストラクターに標準外の引数を追加して、匿名モードを有効にできるようにしました（{{Bug("692677")}} を参照）。 <code>mozAnon</code> フラグを <code>true</code> に設定することで、効率的に旧バージョンの XMLHttpRequest 仕様書で記述されていた <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> コンストラクターに似せることができます。</p> + +<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(<var>paramsDictionary</var>);</pre> + +<h3 id="Parameters_(non-standard)" name="Parameters_(non-standard)">引数 (標準外)</h3> + +<dl> + <dt><code>objParameters</code> {{gecko_minversion_inline("16.0")}}</dt> + <dd>設定できるフラグが2つあります。 + <dl> + <dt><code>mozAnon</code></dt> + <dd>論理型: このフラグを <code>true</code> に設定すると、ブラウザーがリソースを読み込むときに{{Glossary("origin", "オリジン")}}と<a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="XMLHttpRequest 仕様書の「ユーザー資格情報」の定義">ユーザー資格情報</a>を示しません。重要なことは、つまり明示的に setRequestHeader を使用して追加しない限り、{{Glossary("Cookie", "クッキー")}}が送信されないということです。</dd> + <dt><code>mozSystem</code></dt> + <dd>論理型: このフラグを <code>true</code> に設定すると、 {{Glossary("CORS")}} を使用してサーバーにオプトインを必要とせずにサイト間コネクションを作成できるようになります。<em><code>mozAnon: true</code>の設定が必要です。つまり、これはクッキーやその他のユーザー資格情報の送信と組み合わせることができません。これは特権を持つ (レビューされた) アプリのみで動作します ({{Bug("692677")}})。 Firefox に読み込まれた任意のウェブページでは動作しません。</em></dd> + </dl> + </dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest における HTML の扱い</a></li> +</ul> |