From c04ddc269bfffa89e31578ae74d57f109e831af4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 30 Jan 2022 00:16:51 +0900 Subject: XMLHttpRequest のイベントの記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/xmlhttprequest/abort_event/index.html | 146 -------------------- .../ja/web/api/xmlhttprequest/abort_event/index.md | 146 ++++++++++++++++++++ .../web/api/xmlhttprequest/error_event/index.html | 146 -------------------- .../ja/web/api/xmlhttprequest/error_event/index.md | 146 ++++++++++++++++++++ .../web/api/xmlhttprequest/load_event/index.html | 146 -------------------- .../ja/web/api/xmlhttprequest/load_event/index.md | 146 ++++++++++++++++++++ .../api/xmlhttprequest/loadend_event/index.html | 148 --------------------- .../web/api/xmlhttprequest/loadend_event/index.md | 148 +++++++++++++++++++++ .../api/xmlhttprequest/loadstart_event/index.html | 147 -------------------- .../api/xmlhttprequest/loadstart_event/index.md | 147 ++++++++++++++++++++ .../api/xmlhttprequest/progress_event/index.html | 147 -------------------- .../web/api/xmlhttprequest/progress_event/index.md | 147 ++++++++++++++++++++ .../api/xmlhttprequest/timeout_event/index.html | 81 ----------- .../web/api/xmlhttprequest/timeout_event/index.md | 81 +++++++++++ 14 files changed, 961 insertions(+), 961 deletions(-) delete mode 100644 files/ja/web/api/xmlhttprequest/abort_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/abort_event/index.md delete mode 100644 files/ja/web/api/xmlhttprequest/error_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/error_event/index.md delete mode 100644 files/ja/web/api/xmlhttprequest/load_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/load_event/index.md delete mode 100644 files/ja/web/api/xmlhttprequest/loadend_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/loadend_event/index.md delete mode 100644 files/ja/web/api/xmlhttprequest/loadstart_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/loadstart_event/index.md delete mode 100644 files/ja/web/api/xmlhttprequest/progress_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/progress_event/index.md delete mode 100644 files/ja/web/api/xmlhttprequest/timeout_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/timeout_event/index.md (limited to 'files') diff --git a/files/ja/web/api/xmlhttprequest/abort_event/index.html b/files/ja/web/api/xmlhttprequest/abort_event/index.html deleted file mode 100644 index 56de4e98ac..0000000000 --- a/files/ja/web/api/xmlhttprequest/abort_event/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: 'XMLHttpRequest: abort イベント' -slug: Web/API/XMLHttpRequest/abort_event -tags: - - API - - Event - - ProgressEvent - - Web - - XMLHttpRequest - - abort - - イベント - - ウェブ -translation_of: Web/API/XMLHttpRequest/abort_event ---- -
{{APIRef}}
- -

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

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

例

- -

ライブデモ

- -

HTML

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

JS

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

結果

- -

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

- -

仕様書

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

ブラウザーの対応

- -

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

- -

関連情報

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

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

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

例

+ +

ライブデモ

+ +

HTML

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

JS

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

結果

+ +

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

+ +

仕様書

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

ブラウザーの対応

+ +

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

+ +

関連情報

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

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

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

例

- -

ライブデモ

- -

HTML

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

JS

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

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

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

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

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

例

+ +

ライブデモ

+ +

HTML

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

JS

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

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

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

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

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

例

- -

ライブデモ

- -

HTML

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

JS

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

結果

- -

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

- -

仕様書

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

ブラウザーの対応

- -

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

- -

関連情報

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

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

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

例

+ +

ライブデモ

+ +

HTML

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

JS

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

結果

+ +

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

+ +

仕様書

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

ブラウザーの対応

+ +

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

+ +

関連情報

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

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

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

例

- -

ライブデモ

- -

HTML

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

JS

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

結果

- -

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

- -

仕様書

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

ブラウザーの対応

- -

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

- -

関連情報

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

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

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

例

+ +

ライブデモ

+ +

HTML

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

JS

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

結果

+ +

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

+ +

仕様書

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

ブラウザーの対応

+ +

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

+ +

関連情報

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

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

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

例

- -

ライブデモ

- -

HTML

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

JS

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

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

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

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

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

例

+ +

ライブデモ

+ +

HTML

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

JS

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

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

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

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

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

例

- -

ライブデモ

- -

HTML

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

JS

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

結果

- -

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

- -

仕様書

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

ブラウザーの対応

- -

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

- -

関連情報

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

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

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

例

+ +

ライブデモ

+ +

HTML

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

JS

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

結果

+ +

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

+ +

仕様書

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

ブラウザーの対応

+ +

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

+ +

関連情報

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

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

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

例

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

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

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

仕様書

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

ブラウザーの対応

- -

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

- -

関連情報

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

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

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

例

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

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

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

仕様書

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

ブラウザーの対応

+ +

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

+ +

関連情報

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