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/load_event/index.html | 146 --------------------- .../ja/web/api/xmlhttprequest/load_event/index.md | 146 +++++++++++++++++++++ 2 files changed, 146 insertions(+), 146 deletions(-) delete mode 100644 files/ja/web/api/xmlhttprequest/load_event/index.html create mode 100644 files/ja/web/api/xmlhttprequest/load_event/index.md (limited to 'files/ja/web/api/xmlhttprequest/load_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")}}

+ +

関連情報

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