Help us understand the problem. What is going on with this article?

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

More than 5 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?

参考

foom
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away