JavaとAjaxでページを作る(5) - エラーを処理する
「JavaとAjaxでページを作る」5回目の今回は、Ajaxの処理中に発生するエラーに対処する方法を紹介します。
Ajaxの処理中に発生するエラーは、大きく分けてサーバーがエラーのレスポンスを返す場合と、通信が何らかの理由で中断される場合が考えられます。前者のエラーの対処は、「status」にセットされるHTTPのレスポンスコードを参照し、対処を行うことができます。エラーのレスポンスコードは404や500などいろいろありますが、200以外をエラーとして処理してしまえば簡単です。次にやっかいなのが通信が中断されてしまうケースです。この場合、クライアントは中断された通信が完了するまで、待機するので何かしらの不都合が発生することが考えられます。これに対する対処には、JavaScriptのsetTimeout()関数を使用します。setTimeout()関数は、第2引数で指定された時間(ミリ秒)後に第1引数で指定された関数を実行するためのものです。正常に通信が完了した場合は、clearTimeout()でタイマーを解除します。解除されるまでの間に時間が経過した場合は、指定した関数がコールされますので、コールされる関数の中で、abort()メソッドを使用して通信をキャンセルします。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>javaとajaxでページを作る(5)-エラーを処理する</title>
<script type="text/javascript"><!--
function loadData()
{
if(typeof window.XMLHttpRequest == "undefined" ||
typeof window.XMLHttpRequest == "object")
{
try{
xhObj = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xhObj = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
xhObj.onreadystatechange = setForm;
}
else
{
xhObj = new XMLHttpRequest();
xhObj.onload = setForm;
}
xhObj.open("GET","ajax/AjaxServlet",true);
xhObj.send(null);
//タイマーをセットする
tid = setTimeout("abort()",1000);
}
function setForm()
{
if (xhObj.readyState == 4)
{
//タイマーを解除する
clearTimeout(tid);
if(xhObj.status == 200)
{
data = xhObj.responseXML;
document.form1.lastname.value = data.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
document.form1.firstname.value = data.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
}
//レスポンスコードが200以外の場合はエラーとする
else
{
document.getElementById("display").innerHTML = "エラーが発生しました。";
}
}
}
function abort()
{
//通信をキャンセルする
xhObj.abort();
document.getElementById("display").innerHTML = "通信途中にエラーが発生しました。"
}
// --></script>
</head>
<body>
<h1>javaとajaxでページを作る(5)-エラーを処理する</h1>
<form name="form1">
姓 <input type="text" name="lastname"/><br>
名 <input type="text" name="firstname"/><br>
<input type="button" value="ロード" onClick="loadData()"><br>
</form>
<div id="display"></div>
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>javaとajaxでページを作る(5)-エラーを処理する</title>
<script type="text/javascript"><!--
function loadData()
{
if(typeof window.XMLHttpRequest == "undefined" ||
typeof window.XMLHttpRequest == "object")
{
try{
xhObj = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xhObj = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
xhObj.onreadystatechange = setForm;
}
else
{
xhObj = new XMLHttpRequest();
xhObj.onload = setForm;
}
xhObj.open("GET","ajax/AjaxServlet",true);
xhObj.send(null);
//タイマーをセットする
tid = setTimeout("abort()",1000);
}
function setForm()
{
if (xhObj.readyState == 4)
{
//タイマーを解除する
clearTimeout(tid);
if(xhObj.status == 200)
{
data = xhObj.responseXML;
document.form1.lastname.value = data.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
document.form1.firstname.value = data.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
}
//レスポンスコードが200以外の場合はエラーとする
else
{
document.getElementById("display").innerHTML = "エラーが発生しました。";
}
}
}
function abort()
{
//通信をキャンセルする
xhObj.abort();
document.getElementById("display").innerHTML = "通信途中にエラーが発生しました。"
}
// --></script>
</head>
<body>
<h1>javaとajaxでページを作る(5)-エラーを処理する</h1>
<form name="form1">
姓 <input type="text" name="lastname"/><br>
名 <input type="text" name="firstname"/><br>
<input type="button" value="ロード" onClick="loadData()"><br>
</form>
<div id="display"></div>
</body>
</html>
| (2007年11月25日) |
ちょっと一休み. Javaキーワード並び替えゲーム
画面に表示される文字列を並び替えるとJavaに関連するキーワードになります。ヒントをたよりに並び替えを行ってエンターを押してください。
ユーザ登録をしてログインするとランキングに参加できます。
 |
Flex Tips |  |
|
 |
|
DWRでリッチなWebページを作る！ | |
|
|
Java Tips java.io 編 | |
|
|
|
Java Tips java.lang 編 | |
|
|
|
Java Tips java.math 編 | |
|
|
|
Java Tips java.util 編 | |
|
|
|
Java Tips java.nio 編 | |
|
|
|
Java Tips java.management 編 | |
|
|
|
Javaからデータベースを利用する | |
|
|