第5章　「通信時のエラー処理」

通信は常に正常に行なわれるとは限りません。読み込むファイルが存在しなかったり、回線の切断やサーバーダウン、通信速度の低下による時間切れなどの障害があります。このようなエラーが発生した場合にエラー時の処理を行なうように指定することができます。
このエラー処理はjQuery.ajax()ではオプションパラメータでerrorを指定し、そのパラメータにはエラー発生時に処理する関数を指定します。
サンプル1は存在しないファイルを読み込もうとしているためエラーが発生します。エラーが発生するとアラートダイアログが表示されるようになっています。（サンプル1を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>非同期通信の処理</p>
</body>
</html>

【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
#err {
width:320px;
background-color:yellow;
border:1px solid red;
}

【JavaScript】
$(function(){
$.ajax({
url : "./news.txt",
type : "get",
success : function(data){
alert(data);
},
error : function(){
alert("読み込めませんでした");
}
});
});

時間切れ（タイムアウト）の場合も同様にオプションパラメータでtimeoutを指定します。指定する値はミリ秒になります。ただし、0を指定した場合はタイムアウトしなくなります。
サンプル2ではtimeoutに2000を指定しているため、2秒以内に読み込めなかった場合にはエラーメッセージアラートダイアログに表示されます。（サンプル2を実行する）

【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
#err {
width:320px;
background-color:yellow;
border:1px solid red;
}

【JavaScript】
$(function(){
$.ajax({
url : "./news.txt",
type : "get",
timeout : 2000,
success : function(data){
alert(data);
},
error : function(){
alert("読み込めませんでした");
}
});
});

[目次へ]

第5章 「通信時のエラー処理」

第5章　「通信時のエラー処理」