XMLHttpRequest: progress イベント

progress イベントは、リクエストがもっとデータを受信した際に定期的に発行されます。

構文

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

addEventListener('progress', event => { })

onprogress = event => { }

イベント型

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

Event ProgressEvent

イベントプロパティ

下記のプロパティに加え、親インターフェイスである Event のプロパティを利用できます。

lengthComputable 読取専用

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

loaded 読取専用

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

total 読取専用

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

ライブデモ

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>

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://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();
});

結果

仕様書

Specification
XMLHttpRequest Standard
# event-xhr-progress
XMLHttpRequest Standard
# handler-xhr-onprogress

ブラウザーの互換性

BCD tables only load in the browser

関連情報