Javascript

【Javascript】Ajax　動的なテーブル書き換え(XML)

Javascript関連情報

更新日：2005年10月28日

Ajax　動的なテーブル書き換え(XML)

高橋登史朗

XMLデータを、サーバーへ別ファイルとして用意し、ページ構築後の好きなタイミングでAjaxで動的に読み込んでから、テーブルへ流し込みます。

動的なテーブル書き換え (XML)

以前紹介した記事「動的なテーブル書き換え」では、 XMLHttpRequestで読み込むファイルをJSON形式で記述しました。このデータ形式は、JavaScriptのオブジェクトとして直接記述しますので、Ajaxのクライアント側であるJavaScriptで扱いやすく、かつ軽量で、さらにJavaScriptのみならず、PHP/Perl/Java/PythonなどのC言語系のサーバー側言語との親和性も高いという特色があります。

しかし、JSONを受信する場合は、XMLHttpRequestオブジェクトのresponseTextを利用しますので、 responseXMLよりも、データ取り出しは簡単ですが、ブラウザ毎の差異による日本語の扱いにくさがあります(文字コードによって生じる文字化け調査)。上記記事や、そのPHP版記事でも、Mac Safariなど用のエンコード処理を行っています。

今回は、動的なテーブル書き換え処理を、responseTextではなく、XMLを利用したresponseXMLによって取り出す方法を試してみます。もちろん、今回もAjaxですから、ページ構築後の好きなタイミングで動的に読み込んでから、テーブルへ流し込む、という流れになります。

1: とりあえず、体感してみよう

2: [ソース] 暫定Ajax用ライブラリv038

3: [ソース] テーブル出力処理用ライブラリ

とりあえず、体感してみよう

→Sample
（＊このサンプルは上記リンク参照）

このサンプも以前のサンプルと同じ動作で、「算数」「国語」などのリンクに触ると、成績表が切り替わります。ただし、切り替わるデータは、このページ内には無く、動的に、今回はXMLファイルから読み込まれています。今回も、そこがAjaxなのです。

動作ブラウザ

win					mac				linux
n7	m1	e6	o7	o8	n7	m1	e5	s1.2	n7	m1	k3.4
○	○	○	×	○	○	○	×	○	○	○	○

＊k3.3(konqueror3.3)以前は、日本語は文字化けします。

使ったソースは、下記の通りです。太文字部分は、JSONを利用した記事「動的なテーブル書き換え」のソースと異なる、XMLの処理に関する部分です。

【JavaScript側】

<!-- 暫定Ajaxライブラリ jslb_ajax04.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "./jslb_ajax038.js"></script>

<!-- テーブル処理用js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "./jslb_writetable.js"></script>

<script type=text/javascript>
<!--

// XMLファイルを書き換えるだけで
// テーブルを書き換えられます。

//テーブルを出力するDIVのID名
var outputDivId = 'tdiv'


//====================================================================
// Ajax処理
//

var dataAry //データ用配列

//リクエスト送信
function setData(dataFileName)
{
   sendRequest(onloaded,'','GET',dataFileName,true,true)
}

//受信時処理
function onloaded(res)
{
   //受信    xmldoc = res.responseXML
   //2次元配列化    dataAry = Xml2Ary(xmldoc)
   //HTMLテーブル生成
   writeTable(outputDivId,dataAry)
}

//responseXMLで受け取ったデータを2次元配列化して返します function Xml2Ary(xmldoc) {    //ヘッダ行の列データを2列分(名前と科目名)セットします    var th1 = xmldoc.getElementsByTagName('th')[0] ;    var th2 = xmldoc.getElementsByTagName('th')[1] ;        //itemとnameとtenの配列をセットします    var items  = xmldoc.getElementsByTagName('item') ;    var names  = xmldoc.getElementsByTagName('name') ;    var tens   = xmldoc.getElementsByTagName('ten') ;     //作業用配列    var dataArywk = [] ;    //ヘッダ行を配列化して追記    dataArywk.push([ th1.firstChild.nodeValue , th2.firstChild.nodeValue]) ;    //データ行を配列化して追記    for(i=0 ; i <= items.length-1 ; i++){       dataArywk.push([ names[i].firstChild.nodeValue                       , tens[i].firstChild.nodeValue]) ;    }    return dataArywk ; } 
//-->
</script>

<body>

<div style="margin-left : 40px">

<a href="javascript:void(0)" 
    onmouseover="setData('sansu.xml')">算数</a> | 
<a href="javascript:void(0)" 
    onmouseover="setData('kokugo.xml')">国語</a> | 
<a href="javascript:void(0)" 
    onmouseover="setData('rika.xml')">理科</a> | 
<a href="javascript:void(0)" 
    onmouseover="setData('syakai.xml')">社会</a> | 
<a href="javascript:void(0)" 
    onmouseover="setData('eigo.xml')">英語</a> |  |  


<a href="javascript:void(0)" 
    onmouseover="reWriteTable(outputDivId,dataAry,sortD)">▼降順</a> | 
<a href="javascript:void(0)" 
    onmouseover="reWriteTable(outputDivId,dataAry,sortA)">▲昇順</a> | 
    
</div>


<!-- テーブル用CSS -->
<style>
<!--
#tdiv {
   margin-left      : 40px     ;
}
/* 対象テーブル */
#tdiv table  { 
   margin           : 20px     ;
   border : solid 1px #bbbbbb  ;
   border-collapse  : collapse ;
   border-spacing   : 0px      ;
}
/* 1行目 */
#tdiv .row0  { 
   padding          : 8px      ;
   font-size        : 0.9em    ;
   font-weight      : 900      ;
   background-color : #6666cc  ;
   color            : #ffffff  ;
}
/* 1列目 (名前) */
#tdiv .col0  {  
   background-color : #ffcc00  ;
}
/* 2列目 (成績) */
#tdiv .col1  {  
   font-size        : 1em      ;
   font-weight      : 900      ;
   background-color : #dddddd  ;
}
/* 全セル */
#tdiv td  { 
   padding          : 4px      ;
   font-size        : 0.9em    ;
   border : solid 1px #bbb     ;
   border-spacing   : 0px      ;
}

-->
</style>

<!-- このDIVへテーブルを出力します -->
<div id="tdiv"></div>

データファイル(sansu.xml、kokugo.xml、etc...)の中身
＊XMLで用意します。

<?xml version="1.0" encoding="utf-8" ?> 
<lists>
  <heads>
    <th>名前</th>
    <th>英語</th>
  </heads>
  <item>
    <name>山田</name>
    <ten>82</ten>
  </item>
  <item>
    <name>田中</name>
    <ten>24</ten>
  </item>
  <item>
    <name>中山</name>
    <ten>68</ten>
  </item>
  <item>
    <name>山本</name>
    <ten>55</ten>
  </item>
  <item>
    <name>本井</name>
    <ten>18</ten>
  </item>
  <item>
    <name>井上</name>
    <ten>99</ten>
  </item>
  <item>
    <name>上山</name>
    <ten>26</ten>
  </item>
</lists>

下記2つの.jsライブラリは、中身には特に触らなくても、そのままコピーしファイルにするだけで使えます。

【テーブル出力処理用ライブラリ】[ ソース ]jslb_writetable.js
【今回の暫定Ajax用ライブラリ】[ ソース ]jslb_ajax038.js
このAjaxライブラリは、今後も随時修正しますのであらかじめご了承ください。
今回の暫定Ajax用ライブラリの中の受信処理などに書き込まれているブラウザ分岐の根拠等は、レスポンスのタイミングについての(ブラウザごとの違いについての)調査などの結果に基づいています。

人気Javascriptランキング

【Javascript】Ajax 動的なテーブル書き換え(XML)

Ajax 動的なテーブル書き換え(XML)

とりあえず、体感してみよう

【Javascript】Ajax　動的なテーブル書き換え(XML)

Ajax　動的なテーブル書き換え(XML)