[PHP-users 3845] Javascript でサーバの転送サイズを小さくする方法について

Mon, 26 Nov 2001 07:50:47 +0900

坂本です。

Javascriptを利用してサーバ側の転送サイズを
少なくするために下のような方法を考えてみました。
簡単にいうとサーバはたくさん働いているのでhtmlは
クライアント側でJavascriptで計算してもらうという方法です。

クライアント側に送信するデータをhtmlではなくjavascriptで送ります。
一般的に掲示板などは下のような内容(転送データ)で表示されるのが
多いと思いますが、下の例ように送信データサイズを小さくして
サーバの負担を少なくしてみました。あまり意味がないかも知れませんが、
転送サイズを半分以下にすることもできます。

<tr マウスオンオーバーなどの効果>
<td width=30>記事番号
<td width=200>内容.....
<td width=100>記事登録者
<td width=100>登録日...
<td width=50>照合数
<tr マウスオンオーバーなどの効果>
<td width=30>記事番号
<td width=200>内容.....
<td width=100>記事登録者
<td width=100>登録日...
<td width=50>照合数
<tr マウスオンオーバーなどの効果>
<td width=30>記事番号
<td width=200>内容.....
<td width=100>記事登録者
<td width=100>登録日...
<td width=50>照合数
..
..
..

サーバ側から掲示板のデータをJavascriptの配列変数で受け取ります。
それからそのデータをクライアントのforループで計算させる
簡単な方法です。

var name=new array('名前','名前','名前','名前','名前');
var subject=new array('題名','題名','題名','題名','題名');
var writeday=new array('2001/11/16','2000/11/15','2001/11/16',
'2001/11/16','2001/11/16');
var hit=new array(3,5,10,3,30);
for(var i=0;i<5;i++){
dcoument.write(<tr 効果>')
document.wirte('<td>'+name[i]);
document.write('<td>'+subject[i]);
document.write('<td>'+hit[i]);
document.write('<td>'+writeday[i]);
}

＜スクリプト例＞
下のonMouseOutの前の行に改行が入っていますが、
メーラーのせいです。貼り付けしてそのまま実行すると
スクリプトエラーになります。改行を外してから
試してください。

<html>
<head>
<title>javascriptでhtmlサイズを小さくする方法</title>
</head>
<body>
<table>
<tr><td>題名</td><td>名前<td>登録日<td>照合数
<script>
var subject=new Array(
"","テストだよ．．．",
"機能テスト","[返事]こんにちは。はめまして。",
"ハハハ．．．","[返事]はじめまして。 ハハハさん．．．",
"[返事]ハハハさんですか．．．","ハハハです．．．",
"テスト","いいですね．．．",
"このテーブルが．．．．．．","[返事]入力練習．．．",
"入力練習．．．","入力練習．．．",
"JavaScriptで転送サイズを小さくする方法",
"RisaPapaが作ってみました。");
var board_hit=new Array(0,16,22,6,18,2,9,12,5,10,3,1,4,4,6,3);
var write_day=new Array(
"","2001-11-13","2001-11-13",
"2001-11-14","2001-11-14","2001-11-17",
"2001-11-14","2001-11-14","2001-11-16",
"2001-11-16","2001-11-17","2001-11-17",
"2001-11-17","2001-11-17","2001-11-17",
"2001-11-17");
var name=new Array(
"","RisaPapa","RisaPapa","RisaPapa",
"ハハハ","さあ","RisaPapa","ハハハ",
"test","test","さあ","管理者",
"管理者","管理者","管理者","テスト");
for(var i=1;i<=15;i++){
document.write("<tr onMouseOver='this.style.backgroundColor=\"#E5E5E5\"'
 onMouseOut='this.style.backgroundColor=\"#Ffffff\"'>");
document.write("<td>"+subject[i]+"</font>");
document.write("<td align=center>"+name[i]+"</font>");
document.write("<td align=center>"+write_day[i]+"</font>");
document.write("<td align=center>"+board_hit[i]+"</font>");
}
</script>
</table>
</body>
</html>

Regards,
RisaPapa
http://www.osask.net