diff options
Diffstat (limited to 'files/ja')
-rw-r--r-- | files/ja/web/api/xmlhttprequest/progress_event/index.md | 143 |
1 files changed, 64 insertions, 79 deletions
diff --git a/files/ja/web/api/xmlhttprequest/progress_event/index.md b/files/ja/web/api/xmlhttprequest/progress_event/index.md index ac988ffdfc..786cf34e03 100644 --- a/files/ja/web/api/xmlhttprequest/progress_event/index.md +++ b/files/ja/web/api/xmlhttprequest/progress_event/index.md @@ -3,59 +3,60 @@ title: 'XMLHttpRequest: progress イベント' slug: Web/API/XMLHttpRequest/progress_event tags: - API - - Event + - イベント - ProgressEvent - - Reference - - Web + - リファレンス + - ウェブ - XMLHttpRequest - progress - - イベント - - ウェブ +browser-compat: api.XMLHttpRequest.progress_event translation_of: Web/API/XMLHttpRequest/progress_event --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><strong><code>progress</code></strong> イベントは、リクエストがもっとデータを受信した際に定期的に発生します。</p> +**`progress`** イベントは、リクエストがもっとデータを受信した際に定期的に発行されます。 <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/onprogress", "onprogress")}}</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> + {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} + </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; @@ -67,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'); @@ -100,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-progress')}}</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.progress_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/loadend_event", "loadend")}}, {{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/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}} +- [進捗の監視](/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#monitoring_progress) |