XMLHttpRequestEventTarget: load イベント - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

XMLHttpRequestEventTarget: load イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

load イベントは XMLHttpRequest のトランザクションが完全に完了したときに発行されます。

構文

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

js
addEventListener("load", (event) => { })

onload = (event) => { }

イベント型

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

Event ProgressEvent

イベントプロパティ

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

lengthComputable 読取専用

論理値のフラグで、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示します。言い換えれば、進捗が計測可能かどうかを示します。

loaded 読取専用

64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、total をこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

total 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは Content-Length （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

例

XMLHttpRequest での使い方

HTML

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

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("image.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://somewhere.org/i-dont-exist");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR("image.jpg").abort();
});

結果

XMLHttpRequestUpload での使い方

load イベントを使用すると、アップロードが正常に終了したことを検出することができます。ファイルをアップロードしてプログレスバーを表示する完全なコード例については、メインの XMLHttpRequestUpload ページを参照してください。

js
// アップロードが完了したら、プログレスバーを非表示にする
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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年9月4日 by MDN contributors.

View this page on GitHub • Report a problem with this content

XMLHttpRequest API
XMLHttpRequestEventTarget
イベント
1. abort
2. error
3. load
4. loadend
5. loadstart
6. progress
7. timeout
継承
1. EventTarget
XMLHttpRequest API に関連するページ
ガイド
1. XMLHttpRequest の使い方
2. XMLHttpRequest における HTML の扱い
3. 同期と非同期のリクエスト
4. バイナリーデータの送受信
5. FormData オブジェクトの使い方

XMLHttpRequestEventTarget: load イベント

In this article

構文

イベント型

イベントプロパティ

例

XMLHttpRequest での使い方

HTML

JavaScript

結果

XMLHttpRequestUpload での使い方

仕様書

ブラウザーの互換性

api.XMLHttpRequest.load_event

api.XMLHttpRequestUpload.load_event

関連情報

Help improve MDN