Javascript

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

Javascript関連情報

更新日：2005年06月28日

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

高橋登史朗

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

算数 | 国語 | 理科 | 社会 | 英語 | | ▼降順 | ▲昇順 |

この作業は、Ajaxによる動的なローディングの理解の役に立つと思います。しかし、それだけではなく、読み込むサーバー側のデータをPHPやPerl/Javaなどの「動的な出力に変えた時に起こること」についての理解にも役立つと思います。

つまり、サーバーから、このような、配列やオブジェクトなデータの形式（たとえばJSON）で直に出力し、クライアントと話ができるということは、いままでPHPやPerl、Javaなどで行っていた「HTML化」などの処理の大半を、クライアント側に渡せる、ということなのです。

それは、サーバーにとって、たとえば、クライアント1000人のために行っていた「HTML化作業による負荷からの開放」を意味するするだけではなく、送信データのサイズさえもHTMLやXMLではなく「データそのものだけに圧縮」してくれます。

そして、今まで、能力を余らせて、ほとんど無駄に眠っていた、1000台のクライアントPCが、サーバーに待たされること無く、回線渋滞もなく、受け取った軽量データからHTMLを一瞬でレンダリングします。

これが、Ajaxの醍醐味の一つでしょう。

動作ブラウザ

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

使ったソースは、下記の通りです。

【JavaScript側】

 <!-- 暫定Ajaxライブラリ jslb_ajax04.js --> <script language = "JavaScript"          charset = "utf-8"         src     = "./jslb_ajax04.js"></script>  <!-- テーブル処理用js --> <script language = "JavaScript"          charset = "utf-8"         src     = "./jslb_writetable.js"></script>
        
<script type=text/javascript>
<!--

// データファイル(sansu.txt,kokugo.txt,rika.txt等)内の配列を書き換えるだけで
// テーブルを書き換えられます。
	 
//テーブルを出力するDIVのID名
var outputDivId = 'tdiv'


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

var dataAry            // 受信したデータ配列

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

//受信時処理
function onloaded(res)
{
	eval('dataAry='+ decodeURI(res.responseText))
	writeTable(outputDivId,dataAry)
}

//-->
</script>

<body>

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

<a href="javascript:void(0)" 
	 onmouseover="setData('sansu.txt')">算数</a> | 
<a href="javascript:void(0)" 
	 onmouseover="setData('kokugo.txt')">国語</a> | 
<a href="javascript:void(0)" 
	 onmouseover="setData('rika.txt')">理科</a> | 
<a href="javascript:void(0)" 
	 onmouseover="setData('syakai.txt')">社会</a> | 
<a href="javascript:void(0)" 
	 onmouseover="setData('eigo.txt')">英語</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.txt、kokugo.txt、etc...)の中身
＊JSONの配列形式で用意します。
これは、Safariの文字化けを回避するため、次のページのエンコーダーを使ってエンコードします。

[
	[ '名前' , '国語' ] ,
	[ '山田' , '12' ] ,
	[ '田中' , '28' ] ,
	[ '中山' , '56' ] ,
	[ '山本' , '98' ] ,
	[ '本井' , '12' ] ,
	[ '井上' , '18' ] ,
	[ '上山' , '48' ] 
]

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

【テーブル出力処理用ライブラリ】[ ソース ]jslb_writetable.js

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

次のページに、今回のサンプルで'sansu.txt'などに利用した、手軽にエンコードできるページを用意しました。

回答募集中のトピック（お題）

男のカバン完全カタログ

ビジネススタイルは、スーツの着こなしのルールを遵守しつつ、小物で個性を打ち出すのがセオリー。だからこそ、比較的自由度の高いバッグが重要だ。そこで今回は、「ブリーフケース」と「トートバッグ」という今おすすめのタイプから15点ずつアイテムをピックアップ。品質や素材が秀でているだけでなく、機能面も優れる才色兼備な逸品を厳選した。バッグを新調するだけで、不思議なほど心躍る。