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

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

Posted at October 1,2014 1:23 AM
Tag:[jQuery, JSON, JSONP]

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

1.問題点

次のような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

2.原因

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

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

3.対処方法

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

{"foo":"bar"}

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

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

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

4.パースエラーを確認する方法

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

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

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

NG:parsererror

と表示されます。

5.JSONPの場合

JSONPの場合、

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

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

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

JSONPデータ

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

スクリプト

…前略…
    $.ajax({
        url: "sample.jsonp",
        dataType: 'jsonp',
        jsonpCallback: 'hoge',
    })
…後略…
関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)