サイテック株式会社 > 【連載】jQuery Tips - 第1回 Ajaxエラー時のハンドリング

Ajaxエラー時のハンドリング

記念すべき第1回目の投稿ですが、今回はAjax通信時のエラー処理について紹介します。

1回目から、いきなりですが何も突っ込まないでください。。

jQuery.ajax(options)

jQueryでは非同期通信をする場合は下記の用なコードを用いることで簡単に実装できます。

  1.jQuery

ajaxError

$.ajax({
    type: "GET",
    url: "alert.js",
    dataType: "script"
});

  2.alert.js

alert("test");

上記1.のjQueryはalert.js内のJavaScriptを実行します。

今回の場合は警告ダイアログに「test」と表示されます。

非常に簡単ですね。

この時、alert.jsが読み込まれなかった場合どのような挙動になるでしょうか？

...答えは何も起こらないです。

正確には読み込みに失敗した時点でエラー処理が走りますが、エラー処理が何も実装されていないため画面だけ見ると何も起きていないように見えます。

ではエラー処理を実装してみましょう。

jQuery.ajax() error オプション

1.のjqueryを下記の様に書き換えます。

  1.jQuery

$.ajax({
    type: "GET",
    url: "alert.js",
    dataType: "script",
    error: function(request, tatus, thrown){
        alert('Error');
        return false;
    }
});

上記のようにするとalert.jsの読み込みに失敗した場合は警告ダイアログに「Error」と表示させる事が出来ます。

非常に簡単にエラー処理を実装することが出来ますね。

コールバック関数のオプションにはサーバー側のステータスを格納しているのでエラーの種類によって挙動を変えることも楽にできます。

是非、活用して下さい。

次回は、もう少し詳しくajax() error について解説します。

By TwitterIcon.com