Ajax通信が今どの状態にあるかチェック

JSONファイルの読み込みが終わってから処理をしたい，などの場合が多々あるので備忘録
例えば下記の例

var ajax = new XMLHttpRequest();  

    //処理

ajax.onreadystatechange = function() {
    // 処理
};

XMLHttpRequest.readyState プロパティは今の読み込み状況を0〜4で表してくれる

0ー UNSENT インスタンスができた
1ー OPENED openメソッドを利用した
2ー HEADERS_RECEIVED ヘッダーが受信できた
3ー LOADING データを受信中
4ー DONE 通信が終了

例として，alert(ajax.readyState)を入れ状況を見てみると下記のようになる

var ajax = new XMLHttpRequest();　　// XMLHttpRequestオブジェクトを作成
// ここの場合は0
ajax.open('GET', 'http://jsonファイル');
//ここの場合は1
ajax.responseType = 'json';
ajax.send(null);

ajax.onreadystatechange = function() {
    alert(ajax.readyState) // ここの場合はajax.send(null);後の2~4が順番に表示される
};

Ajax通信が完了したのを待ってからレスポンスを返す場合

var ajax = new XMLHttpRequest();
ajax.open('GET', 'http://jsonファイル');
ajax.responseType = 'json';
ajax.send(null);


ajax.onreadystatechange = function() {
    if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {  
       //XMLHttpRequest.DONE = 通信状況4のこと
       // 処理 
    };
};
};

JQueyを使えば簡単になる

// jquery読み込んでから
$.getJSON('https://jsonファイル', function(data) {
    //処理
});

とすれば，JSONファイルの通信が終わってから処理することができる