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

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>");
                 }
        });
    });
} );