このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
XMLHttpRequestEventTarget: load イベント
load イベントは XMLHttpRequest のトランザクションが完全に完了したときに発行されます。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("load", (event) => { })
onload = (event) => { }
イベント型
ProgressEvent です。 Event から継承しています。
イベントプロパティ
親である Event からプロパティを継承しています。
lengthComputable読取専用-
論理値のフラグで、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示します。言い換えれば、進捗が計測可能かどうかを示します。
loaded読取専用-
64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、
totalをこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。 total読取専用-
64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは
Content-Length(メッセージの本文のサイズ)であり、ヘッダーやその他のオーバーヘッドは含まれません。
例
XMLHttpRequest での使い方
HTML
<div class="controls">
<input
class="xhr success"
type="button"
name="xhr"
value="クリックで XHR 開始(成功)" />
<input
class="xhr error"
type="button"
name="xhr"
value="クリックで XHR 開始(エラー)" />
<input
class="xhr abort"
type="button"
name="xhr"
value="クリックで XHR 開始(中止)" />
</div>
<textarea readonly class="event-log"></textarea>
.event-log {
width: 25rem;
height: 4rem;
border: 1px solid black;
margin: 0.5rem;
padding: 0.2rem;
}
input {
width: 13rem;
margin: 0.5rem;
}
JavaScript
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("image.jpg");
});
xhrButtonError.addEventListener("click", () => {
runXHR("https://somewhere.org/i-dont-exist");
});
xhrButtonAbort.addEventListener("click", () => {
runXHR("image.jpg").abort();
});
結果
XMLHttpRequestUpload での使い方
load イベントを使用すると、アップロードが正常に終了したことを検出することができます。ファイルをアップロードしてプログレスバーを表示する完全なコード例については、メインの XMLHttpRequestUpload ページを参照してください。
// アップロードが完了したら、プログレスバーを非表示にする
xhr.upload.addEventListener("load", (event) => {
progressBar.classList.remove("visible");
log.textContent = "Upload finished.";
abortButton.disabled = true;
});
仕様書
| Specification |
|---|
| XMLHttpRequest # event-xhr-load |
| XMLHttpRequest # handler-xhr-onload |
ブラウザーの互換性
api.XMLHttpRequest.load_event
Loading...
api.XMLHttpRequestUpload.load_event
Loading...