diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-30 00:16:51 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-05 13:19:57 +0900 |
commit | c04ddc269bfffa89e31578ae74d57f109e831af4 (patch) | |
tree | 54a4812e6682643a5278e576b2ab11f201e6ece4 /files/ja/web/api/xmlhttprequest/loadend_event/index.html | |
parent | 2d51d3cc6c2d97bca7365fc4c83b10a085626477 (diff) | |
download | translated-content-c04ddc269bfffa89e31578ae74d57f109e831af4.tar.gz translated-content-c04ddc269bfffa89e31578ae74d57f109e831af4.tar.bz2 translated-content-c04ddc269bfffa89e31578ae74d57f109e831af4.zip |
XMLHttpRequest のイベントの記事を移行
Diffstat (limited to 'files/ja/web/api/xmlhttprequest/loadend_event/index.html')
-rw-r--r-- | files/ja/web/api/xmlhttprequest/loadend_event/index.html | 148 |
1 files changed, 0 insertions, 148 deletions
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 ---- -<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> - -<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> |