diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-30 00:38:12 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-05 13:19:57 +0900 |
commit | 9aa43e5d87239108dcebbb44798c62538bae280c (patch) | |
tree | 03f0576bcb60f4d77a0aefcde31b1a5bc6bfcfb6 /files | |
parent | 02ac1594acdf9071a3e4112a0438e36cb7d867e8 (diff) | |
download | translated-content-9aa43e5d87239108dcebbb44798c62538bae280c.tar.gz translated-content-9aa43e5d87239108dcebbb44798c62538bae280c.tar.bz2 translated-content-9aa43e5d87239108dcebbb44798c62538bae280c.zip |
2021/09/15 時点の英語版に同期
Diffstat (limited to 'files')
-rw-r--r-- | files/ja/web/api/xmlhttprequest/loadend_event/index.md | 142 |
1 files changed, 63 insertions, 79 deletions
diff --git a/files/ja/web/api/xmlhttprequest/loadend_event/index.md b/files/ja/web/api/xmlhttprequest/loadend_event/index.md index 66c6554f0b..e423934310 100644 --- a/files/ja/web/api/xmlhttprequest/loadend_event/index.md +++ b/files/ja/web/api/xmlhttprequest/loadend_event/index.md @@ -3,60 +3,60 @@ title: 'XMLHttpRequest: loadend イベント' slug: Web/API/XMLHttpRequest/loadend_event tags: - API - - Event + - イベント - NeedsCompatTable - NeedsSpecTable - ProgressEvent - - Reference - - Web - - events - - loadend + - リファレンス + - ウェブ - イベント + - loadend +browser-compat: api.XMLHttpRequest.loadend_event translation_of: Web/API/XMLHttpRequest/loadend_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><strong><code>loadend</code></strong> イベントは、リクエストが完了したときに、成功した場合 ({{domxref("XMLHttpRequest/load_event", "load")}} の後)、成功しなかった場合 ({{domxref("XMLHttpRequest/abort_event", "abort")}} または {{domxref("XMLHttpRequest/error_event", "error")}} の後) のどちらでも発生します。</p> +**`loadend`** イベントは、リクエストが完了したときに、成功した場合 ({{domxref("XMLHttpRequest/load_event", "load")}} の後)、成功しなかった場合 ({{domxref("XMLHttpRequest/abort_event", "abort")}} または {{domxref("XMLHttpRequest/error_event", "error")}} の後) のどちらでも発行されます。 <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> + <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><code>onloadend</code></td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Live_example" name="Live_example">ライブデモ</h3> +### ライブデモ -<h4 id="HTML">HTML</h4> +#### HTML -<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> +```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> -<div class="hidden"> -<h4 id="CSS">CSS</h4> +<textarea readonly class="event-log"></textarea> +``` -<pre class="brush: css">.event-log { +```css hidden +.event-log { width: 25rem; height: 4rem; border: 1px solid black; @@ -68,12 +68,12 @@ input { width: 11rem; margin: .5rem; } -</pre> -</div> +``` -<h4 id="JS">JS</h4> +#### JS -<pre class="brush: js">const xhrButtonSuccess = document.querySelector('.xhr.success'); +```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'); @@ -101,48 +101,32 @@ function runXHR(url) { return xhr; } -xhrButtonSuccess.addEventListener('click', () => { - runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg'); +xhrButtonSuccess.addEventListener('click', () => { + runXHR('https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json'); }); -xhrButtonError.addEventListener('click', () => { - runXHR('https://somewhere.org/i-dont-exist'); +xhrButtonError.addEventListener('click', () => { + runXHR('http://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> +xhrButtonAbort.addEventListener('click', () => { + runXHR('https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json').abort(); +}); +``` + +#### 結果 + +{{ EmbedLiveSample('Live_example', '100%', '150px') }} + +## 仕様書 + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## ブラウザーの互換性 -<p>{{Compat("api.XMLHttpRequest.loadend_event")}}</p> +{{Compat}} -<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> +- 関連イベント: {{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")}} +- [進捗の監視](/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#monitoring_progress) |