AJAX で、動的にテーブルを作る方法（初級）

AJAX でサーバから XML データを読み込んでそこからテーブルを作る。今回は列（カラム）の個数とその名前は決め打ちとする。まずは HTML を次のようにしておいて、 2007/01/10 追記： IE では、DIVタグに付けた ID を JavaScript から利用する場合は、JavaScript の前に DIV を宣言しなければならないらしい。document.getElementByID(...) is null or not an object というエラーが出る。Firefox だとその順番は関係がない。また、document.getElementByID(DIV_DATA).insertBefore(table, null); は、IE だと table オブジェクトに tbody オブジェクトを追加してからでないとダメらしい。

<div id="data"></div>
<script src="https://<font color="red"><strong>your</strong></font>domain.com/your_javascript.js" type="text/javascript">
</script>

以下の JavaScript を呼び出す。

//<![CDATA[

var isInitialized = false;
var isLock = false;

var isInitialized = false;
var isLock = false;
var INTERVAL = 5000;
var url = 'https://yourdomain.com/your_file.php';
var DIV_DATA = 'data';

init();

function init() {
	getContent(url);
	setInterval("getContent('" + url + "'\)", INTERVAL);
}

function createXmlHttp() {

  try {
    return new ActiveXObject ("Msxml2.XMLHTTP");
  } catch(e) {
    try {
      return new ActiveXObject ("Microsoft.XMLHTTP");
    } catch(e1) {
      try {
        return new XMLHttpRequest();
      } catch(e2) {
        return null;
      }
    }
  }
}

function getContent(url) {

  if(isLock) return;

  var xmlhttp = null;

  if ((xmlhttp = createXmlHttp()) == null) {
    window.alert("XMLHTTP Initialization Failed.");
  } else {
    xmlhttp.abort();
  }

  xmlhttp.onreadystatechange = function() {
    // readyState value:
    // 0: uninitialized / 1: loading / 2: loaded /  3: interactive /  4: complete
    if (xmlhttp.readyState == 4
    &&  xmlhttp.status     == 200) { // 200 HTTP OK
      xml = xmlhttp.responseXML;
      !isInitialized ? createTable(xml) : parse(xml);
    }
  }
  xmlhttp.open('GET', url + '&t=' + new Date(), true);  // for avoiding IE's cache  xmlhttp.setRequestHeader('Content-Type', 'text/html');
  xmlhttp.overrideMimeType('text/xml');  // optional
  xmlhttp.send(null);
}

function createTable(xml) {

  isLock = true;
  if(xml) {

    if(xml.documentElement) {  // for IE

      var books = xml.documentElement.getElementsByTagName('books');

      var table = document.createElement('table');
      var tr = document.createElement('tr');
      var td = document.createElement('td');

      var label_title  = document.createTextNode('Title');
      var label_author = document.createTextNode('Author');
      var label_date   = document.createTextNode('Date');

      table.insertBefore(tr, null);

      // 1列目
      td = document.createElement('th');
      tr.insertBefore(td, null);
      td.insertBefore(label_title, null);

      // 2列目
      td = document.createElement('th');
      tr.insertBefore(td, null);
      td.insertBefore(label_author, null);

      // 3列目
      td = document.createElement('th');
      tr.insertBefore(td, null);
      td.insertBefore(label_date, null);

      for (var i = 0; i < books.length; i++) {

        tr = document.createElement('tr');
        table.insertBefore(tr, null);

        // 1列目
        td = document.createElement('td');
        tr.insertBefore(td, null);
        text = document.createTextNode('');
        td.insertBefore(text, null);
        td.setAttribute('id', 'title'  + i);

        // 2列目
        td = document.createElement('td');
        tr.insertBefore(td, null);
        text = document.createTextNode('');
        td.insertBefore(text, null);
        td.setAttribute('id', 'author' + i);

        // 3列目
        td = document.createElement('td');
        tr.insertBefore(td, null);
        text = document.createTextNode('');
        td.insertBefore(text, null);
        td.setAttribute('id', 'date'   + i);

      } // End of for
      document.getElementById(DIV_DATA).insertBefore(table, null);
      this.parse(xml);
      isInitialized = true;
    }
  }
  isLock = false;
}

function parse(xml) {

  if(xml) {

    if(xml.documentElement) {  // for IE

      var books = xml.documentElement.getElementsByTagName('books');

      for (var i = 0; i < books.length; i++) {

        var title  = books[i].getElementsByTagName('title')[0].firstChild.nodeValue;
        var author = books[i].getElementsByTagName('author')[0].firstChild.nodeValue;
        var date   = books[i].getElementsByTagName('date')[0].firstChild.nodeValue;

        document.getElementById('title'  + i).innerHTML = title;
        document.getElementById('author' + i).innerHTML = author;
        document.getElementById('date'   + i).innerHTML = date;

      } // End of for
    }
  }
}
//]]>