動的なテーブル書き換え2 (+PHP)



前回は、Ajaxによる動的なテーブル書き換えを行いました。 ページ構築後の好きなタイミングでAjaxで動的にデータファイルを読込み、テーブルを出力するというものでした。  今回は、クライアントとデータファイルとの間に、サーバー側スクリプトを介して、受信してみます。

このように、間に一工程増えれば、非効率になるのが普通ですが、この場合は、必ずしもそうではありません。

これまでの一般的な作り方では、このような場合は、サーバー側でデータからHTMLを生成し出力します。 しかし、Ajaxでは、サーバーはデータのHTML化を行う必要がありません。 クライアントが直接、データのままで、受け取れるからです。

サーバーは、Ajaxのリクエストに応じた、軽量のデータを受け渡すだけでよいのです。

つまり、今まで、サーバー側が負荷を背負ってきた、全アクセス分のHTML化などの処理を、 あっさりと、クライアント側へ分散できるというわけです。 たとえば、アクセス100万件分のHTML化を、サーバーがたった一人で背負う必要は、ないのです。

これにより、サーバー負荷が減り、待ち時間が減り、しかも、HTML化する前の 軽量なデータで渡せますから転送量も減らせます。

今回は、このような視点を頭に入れつつ、動作を確認してみてください。 サーバー側の言語は何でもよいのですが、今回は、PHPを使用してみます。

クライアントにできることはクライアントに任せましょう。



  • 1: 試してみよう
    (*このサンプルは上記リンク参照)

    このサンプルは、前回とまったく同じ動作です。 「算数」「国語」などのリンクに触ると、成績表が切り替わります。 違うのは、切り替わるデータを、PHPがファイルから取り出し、JavaScriptがHTML化しているということです。

    サーバー送出時のエンコードはPHPで自動的に行えますから、 前回のように、あらかじめデータをエンコードしておく必要が無いのは便利です。

    動作ブラウザ
    win mac linux
    n7 m1 e6 o7 o8 n7 m1 e5 s1 n7 m1 k3
    × ×


    使ったソースは、下記の通りです。リクエスト時のメソッドは、前回は「GET」でしたが、今回は「POST」を使ってみました。 ファイル名を関数setData2()の第二引数へ「&fn=sansu」のように「&fn=」の後ろへ続けて書くようにしてあります。ここでは、 文字列「sansu」は、サーバー側で「.txt」という文字列と合成されて「sansu.txt」というファイル名になるという仕組みです。

    【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>
    <!--
    
    // データファイル内の配列を書き換えるだけで
    // テーブルを書き換えられます。
    
    //テーブルを出力するDIVのID名
    var outputDivId = 'tdiv'
    
    
    //====================================================================
    // Ajax処理
    //
    
    var dataAry            // 受信したデータ配列
    
    //リクエスト送信
    function setData2(dataFileName,data)
    {
    	sendRequest(onloaded,data,'POST',dataFileName,true,true)
    }
    
    //受信時処理
    function onloaded(res)
    {
    	var resdata = res.responseText
    	
    	//デコードとevalしてJavaScript化
    	eval('dataAry='+ decodeURIComponent(resdata))
    	writeTable(outputDivId,dataAry)
    }
    
    //-->
    </script>
    
    <body>
    
    <div style="margin-left : 40px">
    
    <a href="javascript:void(0)" 
    	 onmouseover="setData2('./file/test1.php','&fn=sansu')">算数</a> | 
    <a href="javascript:void(0)" 
    	 onmouseover="setData2('./file/test1.php','&fn=kokugo')">国語</a> | 
    <a href="javascript:void(0)" 
    	 onmouseover="setData2('./file/test1.php','&fn=rika')">理科</a> | 
    <a href="javascript:void(0)" 
    	 onmouseover="setData2('./file/test1.php','&fn=syakai')">社会</a> | 
    <a href="javascript:void(0)" 
    	 onmouseover="setData2('./file/test1.php','&fn=eigo')">英語</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の文字化けを回避するため、エンコーダーーを使ってエンコードしましたが、 今回はPHPで自動エンコードしますので、このままUTF-8で保存するだけでOKです。
    [
    	[ '名前' , '国語' ] ,
    	[ '山田' , '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用ライブラリの中の受信処理などに書き込まれているブラウザ分岐の根拠等は、 レスポンスのタイミングについての(ブラウザごとの違いについての)調査などの結果に基づいています。


    次のページに、サーバー側のPHPスクリプトソースを用意しました。