Posted at

[Ajax] onreadystatechange の代わりに loadend イベントを使う

More than 3 years have passed since last update.

onreadystatechange を使うのはやめようと思った

そもそも readyState ってなんだろう

AJAX The XMLHttpRequest onreadystatechange Event によれば、


XMLHttpRequest のステータスを保持する。0 から 4 までに変化する:

0: リクエストは初期化されていない

1: サーバ接続は確立した

2: リクエストを受信した

3: リクエストの処理中

4: リクエストは終了してレスポンスの準備が完了


だそうだ

そして、onreadystatechange は readyState 属性が変更されるたびに呼び出されたイベントハンドラを返す

つまり、onreadystatechange は一回の通信で何回も呼び出される可能性があるということ

なので普通は readyState の確認をするわけだ

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.response);
}
}
xhr.open('GET', '/path/to/file', true);
xhr.send();

でも調べていくうちに load イベントとか error イベントとかあるじゃん。しかし、エラーなのに error でなく load が呼ばれることがあるそうで、loadend イベントならまとめて拾えるらしい

var xhr = new XMLHttpRequest();

xhr.addEventListener('loadend', function(){
if(xhr.status === 200){
console.log(xhr.response);
}else{
console.error(xhr.status+' '+xhr.statusText);
}
});
xhr.open('GET', '/path/to/file', true);
xhr.send();

ってことでこれでOK?


参考