それでは今後のために（少しでも楽をするために）、HTTP通信を行うための共通関数を用意しましょう。Internet Explorer 6とそれ以前、Firefox/Safari/Operaを判別しますが、navigator.userAgentを使ってブラウザを振り分けるのではなく、オブジェクトが存在するかどうかで処理を振り分けます。オブジェクトが存在するかどうかはtry...catchを利用して振り分けます。振り分けの順番ですが、Internet Explorer 6以降で利用できるMsxml2.XMLHTTPが存在するかどうかを調べた後にMicrosoft.XMLHTTPが存在するかどうかを調べます。これ以外は判別順序は関係ありません。
次にHTTP通信が行われた際に呼び出される関数も、まとめて設定するようにします。この関数の戻り値は作成した通信用オブジェクト（インスタンス）になります。また、いずれの通信用オブジェクトが存在しない場合にはnullを返すようにします。これにより通信可能なオブジェクトが作成されたかどうかはnullか、nullでないかで判別することができます。nullであれば別のページに移動するようにするといった処理ができます。
実際のスクリプトは以下のものになります。（以下のスクリプトを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTTP通信用、共通関数</title>
<script type="text/javascript"><!--
function loadTextFile()
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","data.txt",true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
document.ajaxForm.result.value = httpObj.responseText;
}
}
// HTTP通信用、共通関数
function createXMLHttpRequest(cbFunc)
{
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
return XMLhttpObject;
}
// --></script>
</head>
<body>
<h1>HTTP通信用、共通関数のサンプル</h1>
<form name="ajaxForm">
<input type="button" value="読み込み" onClick="loadTextFile()"><br>
<textarea name="result" cols="40" rows="5"></textarea>
</form>
</body>
</html>
これでかなり楽になりましたが、この関数を複数のスクリプトで再利用するために別ファイルにします。ここではxmlhttp.jsというファイル名にします。実行時には、このファイルを読み込むようにするだけで済みます。実際のスクリプトは以下のようになります。（
実行する）
●HTML部分
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTTP通信用、共通関数</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadTextFile()
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","data.txt",true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
document.ajaxForm.result.value = httpObj.responseText;
}
}
// --></script>
</head>
<body>
<h1>HTTP通信用、共通関数のサンプル</h1>
<form name="ajaxForm">
<input type="button" value="読み込み" onClick="loadTextFile()"><br>
<textarea name="result" cols="40" rows="5"></textarea>
</form>
</body>
</html>
●xmlhttp.js
// HTTP通信用、共通関数
function createXMLHttpRequest(cbFunc)
{
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
return XMLhttpObject;
}
ここまでは、ネットワークに問題がなく通信も正常な場合という前提条件でプログラムを作成しています。しかし、ネットワークが切断されたり、読み出すべきデータが存在せずエラーになってしまう可能性もあります。次項では、エラーが発生した場合の処理について説明します。
[
6:データが受け取れなかった場合の処理へ]
[
目次へ]
(2005.12.21)