: O. Yuanying

テキストデータをリモートから取得し、現在のページに表示する

というわけでXMLHttpRequestを使った最初のサンプル。基本的な使い方は「はじめてのXMLHttpRequestをしてみよう。」を参照。

今回のサンプルは、

  1. リモートファイル、「/log/archives/fraction.html」からテキストデータを読み込む。
  2. 読み込んだデータを「<p id="demo"></p>」の中にテキストデータとして表示する。

となります。

表示するテキストデータ(/log/archives/fraction.html)。

ソース。

<script 
  language="javascript"
  src="/log/js/xmlhttprequest.js">
</script>
<script language="javascript">
<!---
// 読み込んできたデータを表示したい領域のID。
var id = "demo";

// データを読み込む関数。
function loadcode() {
  var req = new XMLHttpRequest();
  if (req) {
    // XMLHttpRequestの状態変化をハンドルする関数を登録。
    // この関数で行いたい処理を実装する。
    req.onreadystatechange = function() {
      show(req);
    }
  };
  // 読み込むデータのURL。
  var url = 
    "/log/archives/fraction.html";
  req.open('GET', url);
  req.send(null);
  return false;
}

// 表示領域を消す。
function removecode() {
  var demo = document.getElementById(id);
  while (demo.hasChildNodes()) {
    demo.removeChild(demo.firstChild);
  }
}

// 読み込んできたデータを表示する。
function show(req) {
  // requestの状態が変化するたびに、
  // この関数が呼ばれているかチェック。
  alert("req.readyState: "+req.readyState+
    "\nreq.status: "+req.status);
  // XMLHttpRequestのオブジェクトの状態が、
  // readyState = 4でstatus = 200のとき。(*1)
  if (req.readyState == 4 && req.status == 200) {
    removecode();
    // 表示領域。
    var demo = document.getElementById(id);
    // 表示領域のinnerHTMLに、
    // 読み込んできたデータのテキストデータを代入する。
    alert(req.responseText);
    demo.innerHTML = req.responseText;
  }
}
//--->
</script>

<form>
<p><input type="button" 
  value="読み込む" 
  onClick="loadcode();" />
<input type="button" 
  value="消去" 
  onClick="removecode();" />
</form>

<blockquote>
<p id="demo">ここに読み込んできたデータが表示されます。</p>
</blockquote>

ここに読み込んできたデータが表示されます。

補足1
XMLHttpRequest#readyStateの値は0から4までの値をとる。それらの値の意味は、
  • 0: UNINITIALIZED まだOpen()関数がXMLHttpRequestオブジェクトから呼ばれていない。
  • 1: LOADING リクエストがまだ作成されていない。(send()メソッドがまだ呼ばれていない。)
  • 2: LOADED サーバとの接続が確立し、HTTPステータスを受け取っている。
  • 3: INTERACTIVE In Mozilla, called multiple times while response is fetched - every 4096 bytes of response
  • 4: COMPLETED レスポンスをすべて受け取った状態。
よって上のコードは、HTTPステータスが200で、readyStateが4、すなわちレスポンスがCOMPLETEDな場合に、処理を行うということになる。