AjaxのHTTP通信のタイムアウト値の設定方法

ajax

AjaxでHTTP通信した際のタイムアウト値の設定方法について解説します。

タイムアウト値の設定自体は、Ajaxのオプションへ追加するのみで簡単に出来ます。

このページでは、タイムアウト値設定後、どのような動きをするのか実際のサンプル画面を使って確認することができます。

[スポンサーリンク]

このページでやること

Ajaxのタイムアウト値を設定します。

Ajaxのタイムアウト値を指定したサンプルプログラム

$( function() {
    $( '#ajax-button' ) .click(
    function() {
         $.ajax({
          url: 'http://localhost:8080/AplExample/family',
          type:'GET',
          dataType: 'jsonp',
          timeout:10000,
          success: function(data) {
                       alert("ok");
                   },
          error: function(data) {
                       alert("10秒でタイムアウトしました。");
                 },
          complete : function(data) {
                      $("#loading").empty();
                      $("#loading").html("<p>通信終了</p>");
                 }
        });
    });
} );

解説

タイムアウト値は、ミリ秒で設定します。
サンプルプログラムは、タイムアウト値が10000なので、10秒間HTTP通信をして応答がなければエラーとなります。

デモ

こちらで実際に動かすことが出来ます。

タイムアウト値は、10秒で設定したデモページです。
demo

タイムアウト値は、1秒で設定したデモページです。
demo

さいごに

Ajaxのタイムアウト値は、長すぎず短すぎずに調整しながら設定しましょう。

わたしはだいたい10秒を基準にしています。長くても30秒くらいが限度かなと思います。
それでは!