解説1. XMLHttpRequest
"XMLHttpRequest"のオブジェクト、メソッド、プロパティについての解説

XMLHttpRequest 解説

XMLHttpRequest 解説

XMLHttpRequest

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest()

解説
XMLHttpRequest を使用出来るようにする為の宣言。ブラウザにより異なる。
IE では、ActiveXObject("Microsoft.XMLHTTP") を使用。
IE のバージョンによっては、ActiveXObject("Msxml2.XMLHTTP.5.0") , ActiveXObject("Msxml2.XMLHTTP.4.0") ,
ActiveXObject("Msxml2.XMLHTTP.3.0") , ActiveXObject("Msxml2.XMLHTTP") なども使用出来る。
Mozilla 系ブラウザでは、XMLHttpRequest() を使用。

使用例サンプル
var xmlhttp = false;
if(typeof ActiveXObject != "undefined"){
  try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e) {
    xmlhttp = false;
  }
}
if(!xmlhttp && typeof XMLHttpRequest != "undefined") {
  xmlhttp = new XMLHttpRequest();
}

メソッド

abort()

解説
現在実行中の送受信の停止

使用例サンプル
xmlhttp.open("GET", "./sample001.txt");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var disp = document.getElementById("disp");
    disp.innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.send(null);
xmlhttp.abort();
}

getAllResponseHeaders()

解説
全てのHTTPヘッダを取得する

使用例サンプル
xmlhttp.open("GET", "./sample001.txt");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var disp = document.getElementById("disp");
    disp.innerHTML = xmlhttp.getAllResponseHeaders();
  }
}
xmlhttp.send(null);

getResponseHeader("headerLabel")

解説
指定したHTTPヘッダを取得する
headerLabel には、Content-Type や Last-Modified などのヘッダラベル名を指定する。

使用例サンプル
xmlhttp.open("GET", "./sample001.txt");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var disp = document.getElementById("disp");
    disp.innerHTML = xmlhttp.getResponseHeader("Content-Type");
  }
}
xmlhttp.send(null);

open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])

解説
指定したメソッド method ( GET|POST|PUT|PROPFIND )で指定URL URL にリクエストする。
リクエストの成功・失敗に関わらず次の処理を実行する場合があれば、asynFlag を False に。
それ以外は Ture にする。省略すると True で実行。
userNamepassword は認証が必要な場合にのみ指定。

使用例サンプル
xmlhttp.open("GET", "./sample001.txt", "True");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var disp = document.getElementById("disp");
    disp.innerHTML = xmlhttp.responseText;
  }
}
xmlhttp.send(null);

send(content)

解説
サーバに HTTP リクエストを送信する。content には送信するデータを設定出来る。
送信先の URL、送信方式(GET や POST など)は、open で指定したものになる。
データを送信しても、送信先でそのデータを処理するようにしていないと何も変化なし。
データを送信しない時でも必要で、その時は send(null) とする。

使用例サンプル
xmlhttp.open("POST", "./sample001.php");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var disp = document.getElementById("disp");
    disp.innerHTML = xmlhttp.responseText;
  }
}
xmlhttp.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
xmlhttp.send("name=ponpon&body=test");
受け取り側 PHP のサンプル
<?php
  print $_POST["name"];
?>

setRequestHeader("label", "value")

解説
HTTP要求時に送られるヘッダーを追加する。
label は、追加したいヘッダー名。value は、その値。
注意!リクエスト送信時にサンプルのようにヘッダーを追加しておかないと
ブラウザによってはデータを送信出来ません。

使用例サンプル
xmlhttp.open("GET", "./sample001.php");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var disp = document.getElementById("disp");
    disp.innerHTML = xmlhttp.responseText;
  }
}
xmlhttp.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
xmlhttp.send("name=ponpon&body=test");

プロパティ

onreadystatechange

解説
XMLHttpRequestオブジェクトの状態(readyState)が変化する度に呼び出されるイベントハンドラ

使用例サンプル
xmlhttp.open("GET", "./sample001.txt");
xmlhttp.onreadystatechange = function() {
  window.alert("readyState の値 : " + xmlhttp.readyState);
}
xmlhttp.send(null);

readyState

解説
XMLHttpRequest の通信の状態
0 = uninitialized(読み込み開始前の初期状態)
1 = loading(読み込み中)
2 = loaded(とりあえず読み込んだ)
3 = interactive(読み込んだデータを解析中)
4 = complete(読み込んだデータの解析完了、または失敗した。つまり処理が終わった)

使用例サンプル
xmlhttp.open("GET", "./sample001.txt");
xmlhttp.onreadystatechange = function() {
  window.alert("readyState の値 : " + xmlhttp.readyState);
}
xmlhttp.send(null);

responseBody

解説
レスポンスをバイト配列で取得。IE のみで使用可
ただし、responseBody で取得したデータは ADODB.Stream を用いて操作するのだが、
肝心の ADODB.Stream は、 2004年7月の修正で IE から使用出来なくなっているので、
実際にはどのブラウザでも使用出来ないのと同じようなもの。動作するサンプルは無し。
C/S アプリなどの ADODB.Stream が使用出来る環境が必要。
また、Windows サーバであれば、サーバ側の処理での使用も OK のようだが未確認。

responseStream

解説
レスポンスを IStream 形式で取得。IE のみで使用可
よくわからないのでサンプル無し。

responseText

解説
レスポンスをテキスト形式で取得。

使用例サンプル
xmlhttp.open("GET", "./sample001.xml");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var disp = document.getElementById("disp");
    disp.appendChild(document.createTextNode(xmlhttp.responseText));
  }
}
xmlhttp.send(null);

responseXML

解説
レスポンスを XML DOM 形式で取得。

使用例サンプル
xmlhttp.open("GET", "./sample001.xml");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var disp = document.getElementById("disp");
    var xmlDoc = xmlhttp.responseXML;
    window.alert(xmlDoc.xml);
  }
}
xmlhttp.send(null);

status

解説
HTTPステータスコードを取得。(参考 : Studying HTTP
200 : ファイルを見つけた
404 : ファイルが見つかりません("Not Found")(しかし、IE では 0 に、Firefox では 302 になった・・・)
など

使用例サンプル
xmlhttp.open("GET", "./sample002.txt");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4) {
    window.alert(xmlhttp.status);
  }
}
xmlhttp.send(null);

statusText

解説
HTTPステータの詳細メッセージを取得

使用例サンプル
xmlhttp.open("GET", "./sample002.txt");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4) {
    window.alert(xmlhttp.statusText);
  }
}
xmlhttp.send(null);