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

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？

参考

• XMLHttpRequest - Web API Interfaces | MDN
• 十三章第一回　XMLHTTPRequest — JavaScript初級者から中級者になろう — uhyohyo.net