JQueryのajaxでステータスコードに0が返ってくる場合

久々のコーディングメモ♪
JQueryのajaxを使ってPHPの外部コードから値を取得するのにこんな感じのコードを書いてみた。

$("#test_btn").on("click",function(){
    var param = {"action": "getText"};
    $.ajax({
        type: "GET",
        url: "getText.php",
        data: param
    })
    .done(function(data){
        console.log(data);
    })
    .fail(function(data, textStatus, errorThrown){
        alert("通信エラーが発生しました。");
        console.log(data);
    });
});

呼び出されるgetText.phpのコードはたったこれだけ。ほんとは処理が入るけど簡略化してみた。

で、これがstatus=0、statusText=”error”を返すのですな。直前まで同じコードで通常に200が返ってきていたのだけとワケがわからずハマってしまった。。。
ローカル環境ではあるけどもちろんブラウザでアクセスしてちゃんと表示されることは確認済み。

readyState: 0
responseText: ""
status: 0
statusText: "error"

いろいろ調べてみてわかったのは、そもそもステータスでサーバは0を返さないので(404とか50xとかが返る）CrossOriginでブロックされたかURL間違いが濃厚。しかしどちらも当てはまらず。

最終的に分かったのはレスポンスが返ってくる前に表示されてるみたい。というわけで

$("#test_btn").on("click",function(){
    var param = {"action": "getText"};
    $.ajax({
        type: "GET",
        async: false,
        url: "getText.php",
        data: param
    })
    .done(function(data){
        console.log(data);
    })
    .fail(function(data, textStatus, errorThrown){
        alert("通信エラーが発生しました。");
        console.log(data);
    });
});

と以下を追加して

async: false,

非同期通信を同期通信にしたらちゃんと行けた。ロックされるので使いたくないけど。。。
これやるならtimeout入れないと。。。