Internet ExplorerでHTTP通信を行う場合にはActive Xを利用します。前に説明したXMLHttpRequestの代わりにActiveXObject("Microsoft.XMLHTTP")を指定します。単純にこれだけの変更で済めば楽ですが、このオブジェクトにはデータの読み込みが完了した際に発生するonloadイベントがありません。このため、onloadイベントでなくonreadystatechangeイベント（状態が変化した時に発生します）を利用します。
この場合、状態が変化するイベントはクライアントとサーバーからの応答を示します(*1 readyStateプロパティの値が0, 1, 2の場合はリクエスト、3と4の場合はサーバーからの応答)。サーバーからの応答があるとActive XオブジェクトのreadyStateプロパティとstatusプロパティに読み込み状態とサーバーからのステータスが入ります。サーバーのステータスコード（HTTPレスポンスコード[
参照] が200の場合には要求されたデータがありデータを送った事になります。ただし、データが送られたから読み込みが完了したことにはなりません。データサイズの大きいものでは送信に時間がかかるためです。このためデータの読み込みが完了したかどうかを示すreadyStateプロパティの値も調べる必要があります。データの読み込みが完了した場合、readyStateプロパティの値は4になります。つまりreadyStateプロパティの値が4で、statusプロパティの値が200の場合、データの読み込みが完了したことになります。この2つのプロパティの値をif命令で調べて処理を行えば良い事になります。実際のプログラムは以下のようになります。(
実行する)
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>XMLHttpRequest()の基本(Win IEの場合)</title>
<script type="text/javascript"><!--
function loadTextFile()
{
httpObj = new ActiveXObject("Microsoft.XMLHTTP");
httpObj.onreadystatechange = statusCheck;
httpObj.open("GET","data.txt",true);
httpObj.send(null);
}
function statusCheck()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
displayData();
}
}
function displayData()
{
document.ajaxForm.result.value = httpObj.responseText;
}
// --></script>
</head>
<body>
<h1>XMLHttpRequest()の基本 (Win IEの場合)</h1>
<form name="ajaxForm">
<input type="button" value="読み込み" onClick="loadTextFile()"><br>
<textarea name="result" cols="40" rows="5"></textarea>
</form>
</body>
</html>
このプログラムはInternet Explorer 5 以降で動作します。ただし、このMicrosoft.XMLHTTPは動作速度がよいわけではなく、より性能のよい（パフォーマンスのよい）Msxml2.XMLHTTPがあります。Internet Explorer 6以降で利用できます。2005年現在Windows XP利用者、Internet Explorer 6の利用者が大半を占めているわけですから、なるべくなら処理速度の速い快適なものを利用するのがベストです。このMsxml2.XMLHTTPを利用したプログラムは以下のようになります。異なるのはActiveX("Msxml2.XMLHTTP")の部分だけで他は全く同じです。(
実行する)
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>XMLHttpRequest()の基本(Win IE6の場合)</title>
<script type="text/javascript"><!--
function loadTextFile()
{
httpObj = new ActiveXObject("Msxml2.XMLHTTP");
httpObj.onreadystatechange = statusCheck;
httpObj.open("GET","data.txt",true);
httpObj.send(null);
}
function statusCheck()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
displayData();
}
}
function displayData()
{
document.ajaxForm.result.value = httpObj.responseText;
}
// --></script>
</head>
<body>
<h1>XMLHttpRequest()の基本 (Win IE6の場合)</h1>
<form name="ajaxForm">
<input type="button" value="読み込み" onClick="loadTextFile()"><br>
<textarea name="result" cols="40" rows="5"></textarea>
</form>
</body>
</html>
OSとブラウザによって個別のプログラムを用意するのは大変面倒です。Firefox/Safari, Internet Explorer 6と6以前でうまく処理を分けて共通のスクリプトが利用できると便利です。2005年現在、すでに多くのプログラムが共通の関数またはオブジェクトを定義して利用しています。ほとんど定型パターンとも言える状態です。次項では、HTTP通信を共通に行うための関数を作成します。
[
5:共通に利用できる関数を作成するへ]
[
目次へ]
(2005.12.19, 2005.12.20追加修正, 2005.12.21修正)