解説 : 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();
}

メソッド

解説

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

使用例サンプル

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();
}

解説

全ての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);

解説

指定した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);

解説

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

使用例サンプル

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);

解説

サーバに 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"];
?>

解説

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");

プロパティ

解説

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

使用例サンプル

xmlhttp.open("GET", "./sample001.txt");
xmlhttp.onreadystatechange = function() {
  window.alert("readyState の値 : " + xmlhttp.readyState);
}
xmlhttp.send(null);

解説

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);

解説

レスポンスをバイト配列で取得。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);

Ajaxメニューへメインメニューへ