XMLHttpRequestEventTarget: loadend イベント

メモ: この機能はウェブワーカー内で利用可能ですが、サービスワーカーでは使用できません。

loadend イベントは、リクエストが完全に完了したとき（load の後）、または失敗したとき（abort またはerror の後）に発行されます。

構文

このイベント名をaddEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("loadend", (event) => { })onloadend = (event) => { }

イベント型

ProgressEvent です。Event から継承しています。

イベントプロパティ

親であるEvent からプロパティを継承しています。

lengthComputable読取専用: 論理値のフラグで、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示します。言い換えれば、進捗が計測可能かどうかを示します。
loaded読取専用: 64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、total をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。
total読取専用: 64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これはContent-Length （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例

XMLHttpRequest での使い方

HTML

html

<div>  <input       type="button"    name="xhr"    value="クリックで XHR 開始（成功）" />  <input       type="button"    name="xhr"    value="クリックで XHR 開始（エラー）" />  <input       type="button"    name="xhr"    value="クリックで XHR 開始（中止）" /></div><textarea readonly></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(    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json",  );});xhrButtonError.addEventListener("click", () => {  runXHR("http://i-dont-exist");});xhrButtonAbort.addEventListener("click", () => {  runXHR(    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json",  ).abort();});

結果

XMLHttpRequestUpload での使い方

loadend イベントを使用して、アップロードの終了（成功または失敗）を検出することができます。ファイルをアップロードして進捗バーを表示する完全なコード例については、メインのXMLHttpRequestUpload ページを参照してください。

// アップロードが完了したら、進捗バーを非表示にするxhr.upload.addEventListener("loadend", (event) => {  progressBar.classList.remove("visible");  if (event.loaded !== 0) {    // 成功裏に完了    log.textContent = "アップロードが完了しました。";  }  abortButton.disabled = true;});