XMLHttpRequestのreadystatechangeイベントとロードイベントの違い

1289 ワード

それぞれオンレディステージで とonload コードを書き込む:
xhr.onload = function () {
    console.log(`load:xhr.readyState == ${xhr.readyState} ,xhr.status=${xhr.status}`);
}
xhr.onreadystatechange = function () {
    console.log(`readystatechange:xhr.readyState == ${xhr.readyState} ,xhr.status=${xhr.status}`);
}
xhr.open(...);
xhr.send(...);
出力結果は以下の通りです.
readystatechange : xhr.readyState == 1 ,xhr.status=200
readystatechange : xhr.readyState == 2 ,xhr.status=200
readystatechange : xhr.readyState == 3 ,xhr.status=200
readystatechange : xhr.readyState == 4 ,xhr.status=200
load : xhr.readyState == 4 ,xhr.status=200
見られます.readystatechange. 事件がロードに先行する イベント実行.ロード 事件はreadyStateに相当する. の値は4です 後にトリガするイベント.トレース要求が必要でない場合は、前のプロセスに戻るときは、ロードを使います. 事件はもっと手っ取り早い.
しかし…
ロード イベントは常にトリガされていません.例えば、ネットワークが間違っている場合、ターゲットアドレスがアクセスできない場合、errorをトリガします. イベント、ロード イベントはトリガーされません.404のようなエラーはサーバが返信した状態コードだけです.要求プロセスエラーではないので、ロードします. イベントはトリガー、そしてerror 事件はかえって触発されない.
どちらの場合も触発される場合は、loadendを使用してください. イベント
OKですloadendがある以上 イベントはもちろん、loadstartもあります. イベント
これらのイベントのトリガ順序は以下の通りです.
readystatechange> loadstart>readystatechange'readystatechange'progress'readystatechange'load/error'loadend 
readystatechange トリガするたびに readyState 値が違う.