小粋空間  -  a cheap joke and a play on words site

jQuery.ajax()のJSONやJSONP取得で200 OKなのにエラーになる件のまとめ

jQuery.ajax()のJSONやJSONP取得で、200 OKにもかかわらずエラーになる件についてまとめました。

１．問題点

次のようなJSONデータを読み込むスクリプトを書きました。

JSONデータ

{'foo':'bar'}

スクリプト

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
    $.ajax({
        url: "sample.json",
        dataType: 'json',
    })
    .done(function(data) {
        console.log("OK");
    })
    .fail(function(xhr, textStatus, errorThrown) {
        console.log("NG:" + xhr.status);
    });
});
</script>

このスクリプトを実行するとfail()が起動しますが、コンソールに出力されるxhr.statusは「200（HTTPの200 OK）」が表示されます。

NG:200

２．原因

fail()が起動する原因は、JSONデータのパースエラーが発生しているためです。

jQuery.ajax()ではJSONパースエラーの場合、200 OKの場合でもfail()が起動します。

３．対処方法

今回の事例ではJSONデータを下記のようにシングルクォーテーションからダブルクォーテーションに修正することで解消します。

{"foo":"bar"}

上記以外の場合、たとえば

• JSONに余計なHTMLヘッダーが付加されている
• レスポンスにJSONデータが存在しない（ファイル自体は存在）
• カッコの対応が不一致

なども同じ事象になります。

４．パースエラーを確認する方法

パースエラーかどうか確認するには、fail()の第2パラメータtextStatusから知ることができます。

…前略…
    .fail(function(xhr, textStatus, errorThrown) {
        console.log("NG:" + textStatus.status);
    });
…後前略…

としておけば、パースエラーの場合に、

NG:parsererror

と表示されます。

５．JSONPの場合

JSONPの場合、

• デフォルトcallbackの名称がJSONPの関数と不一致
• オプションjsonpCallbackで指定した値とJSONPの関数名が一致していない

などの場合にパースエラーになります。

下記は正常に動作するサンプルです。

JSONPデータ

hoge({"foo":"bar"})

スクリプト

…前略…
    $.ajax({
        url: "sample.jsonp",
        dataType: 'jsonp',
        jsonpCallback: 'hoge',
    })
…後略…