readystatechangeイベントよりももっと便利なイベント群が定義されているこのイベントモデルでは、XMLHttpRequestオブジェクトからリクエストの定義ごとに異なるイベントが発生する。この結果、readyStateプロパティを確認する必要がなくなる
loadstartイベント
send()メソッドが呼び出されたとき一度だけ発生する。
progressイベント
サーバーのレスポンスがダウンロードされているとき発生する。 XMLHttpRequestオブジェクトが発生させる 50ミリ秒ごとに発生させる リクエストが非常に早く完了した場合、発生しない場合もある
loadイベント
リクエストが完了したとき発生する loadイベントハンドラで、XMLHttpRequestオブジェクトのstatusコードをチェックする。
HTTPリクエストが完了できない場合は3通り、対応するイベントも3通りある
timeoutイベント abortイベント(18.5.1項) errorイベント
ブラウザは、任意のリクエストに対して、load、abort、timeout、errorイベントのいずれか1つだけを発生する。
以下の例のように、イベントプロパティが存在するかどうかで、ブラウザがプログレスイベントをサポートしているかをテストできる
if("onprogress" in (new XMLHttpRequest())) { //プログレスイベントがサポートされている }
プログレスイベント用のイベントオブジェクトの3つの便利なプロパティ
loadedプロパティ
現在までに転送されたバイト数が格納される
totalプロパティ
「Content-Length」ヘッダから転送するデータの大きさがわかっていれば、 データの大きさが格納される。 もしもわからない場合は0が格納される
lengthComputableプロパティ
コンテンツの大きさがわかっていれば、trueが わかっていなければfalseが格納される。
request.onprogress = function(e) { if(e.lengthComputable) progress.innerHTML = Math.round(100 * e.loaded / e.total) + "% Complete"; }
参考書籍:
オライリー JavaScript 第6版