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 オブジェクトを追加してからでないとダメらしい。



<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() {
<pre>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
}
  }
}
//]]>

感じをつかんでもらうためにしつこく列1～3まで書いているけど、同じような処理をしていることにすぐに気づくはず。なので JavaScript の最初で


var TAGS = Array('title', 'author', 'date');

として、処理をまとめた方がいいと思う。

この方法を使えば XML データ中のカラム数が変化しても対応可能なように作り替えることができると思う。それはご自身でトライしてみて欲しい。わからなかったらコメント欄にヘルプしてください。できる範囲でお答えします。

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

Comments

AJAX で、getElementsByTagName で DOM にアクセスする

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