jQueryのgetJSON()でエラーをハンドリングする

jQueryのgetJSON()でエラーをハンドリングする

Posted at December 11,2012 12:55 AM
Tag:[jQuery, JSON]

jQuery.getJSON()でエラーをハンドリングする方法を紹介します。

1.はじめに

JSONの取得でエラーをハンドリングにはjQuery.ajax()を利用するか、googleで公開されているjquery-jsonpプラグインを利用するといった先入観がありましたが、公式サイトのドキュメントを読むと1.5からサポートされているようで、まったく気がついてませんでした。

jQuery.getJSON()

As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.getJSON() implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). For convenience and consistency with the callback names used by $.ajax(), it provides .error(), .success(), and .complete() methods. These methods take a function argument that is called when the request terminates, and the function receives the same arguments as the correspondingly-named $.ajax() callback.

jQuery関連の書籍を購入すればこういう情報は既知の内容かもしれませんが、ネットでは日本語リファレンス系サイトのコンテンツが古かったりなど、今回紹介するような情報がうまくみつけられません。

2.エラーをハンドリングする

ということで、getJSON()でエラーをハンドリングするサンプルを掲載しておきます。ハンドリングのお作法はjQuery.ajax()と同じです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$.getJSON("example.json", function() {
    console.log("実行");
})
.success(function(json) {
    console.log("成功");
})
.error(function(jqXHR, textStatus, errorThrown) {
    console.log("エラー:" + textStatus);
    console.log("テキスト:" + jqXHR.responseText);
})
.complete(function() {
    console.log("完了");
});
</script>

サンプルコードでお分かりのとおり、エラーだけでなく、成功時・完了時もjQuery.ajax()と同様、ハンドリングすることが可能です。

成功時のFirefoxコンソールログ
成功時のFirefoxのコンソールログ

失敗時のFirefoxコンソールログ(jqXHR.responseTextは省略)
失敗時のFirefoxのコンソールログ

1.6以降であれば、done()、fail()、always()が適用可能です。

$.getJSON("example.json", function() {
    console.log("実行");
})
.done(function(json) {
    console.log("成功");
})
.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("エラー:" + textStatus);
    console.log("テキスト:" + jqXHR.responseText);
})
.always(function() {
    console.log("完了");
});

getJSON()の第2パラメータのコールバックは、上のスクリーンショットでお分かりのとおり、エラー時には実行されません。不要であれば以下でもよいかと思います。

$.getJSON("example.json")
.done(function(json) {
    //... 
})
.fail(function(jqXHR, textStatus, errorThrown) {
    //...
})
.always(function() {
    //...
});

3.getJSON()の結果をjqXHRに保存する

getJSON()の結果を変数jqXHRに保存して、ハンドラメソッドを独立して定義することも可能です。

var jqXHR = $.getJSON("example.json", function() {
    console.log("実行");
});
jqXHR.done(function(json) {
    console.log("成功");
});
jqXHR.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("エラー:" + textStatus);
    console.log("テキスト:" + jqXHR.responseText);
});
jqXHR.always(function() {
    console.log("完了");
});

1項と同様、getJSON()の第2パラメータのコールバックはエラー時に実行されません。不要であれば以下でもよいかと思います。

var jqXHR = $.getJSON("example.json");
…後略…

4.参考サイト

参考サイトは以下です。ありがとうございました。

Error handling in getJSON calls
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


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

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

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

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