From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/xmlhttprequest/error_event/index.html | 148 +++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 files/ja/web/api/xmlhttprequest/error_event/index.html (limited to 'files/ja/web/api/xmlhttprequest/error_event') diff --git a/files/ja/web/api/xmlhttprequest/error_event/index.html b/files/ja/web/api/xmlhttprequest/error_event/index.html new file mode 100644 index 0000000000..a36639cbaa --- /dev/null +++ b/files/ja/web/api/xmlhttprequest/error_event/index.html @@ -0,0 +1,148 @@ +--- +title: 'XMLHttpRequest: error イベント' +slug: Web/API/XMLHttpRequest/error_event +tags: + - API + - Error + - Event + - ProgressEvent + - Web + - XMLHttpRequest + - イベント + - ウェブ +translation_of: Web/API/XMLHttpRequest/error_event +--- +
{{APIRef}}
+ +

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

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

+ +

ライブデモ

+ +

HTML

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

JS

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

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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