この作業は、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'などに利用した、手軽にエンコードできるページを用意しました。