Javascript

【Javascript】Ajaxによる軽量高速化テクニック

Javascript関連情報

更新日：2006年03月26日

Ajaxによる軽量高速化テクニック

高橋登史朗

今回は、Ajaxのメリットのひとつである、ページの一部だけを高速軽量リフレッシュするという方法を確認してみます。

Ajaxによる軽量高速化テクニック

1: 今回のサンプル

2: サーバー側のソース

ワールドベースボールクラッシックは、日本が初代チャンピオンとなり、TV視聴率は50%を超えるほどの人気でしたが、インターネットでもスポーツ関係のページのアクセスはかなりのものだったと思います。

刻々と変るスコアボードを見るために、何度も更新ボタンでページをリフレッシュしていた方も少なくないはずです。

おそらく、当サイトの読者なら、なかなか書き換わらないブラウザの前で、「なぜ、わざわざページ全部をリフレッシュするんだよぉ」と思いつつ、王ジャパンの活躍を応援していたことでしょう。

そうです、Ajax的にみると、スコアデータを更新するだけのために、ページ全体のHTMLを全部取ってきて丸ごと書換えるような作業は無駄なのです。

回線のためにも、サーバーのためにも、そして何よりユーザーのためにもなりません。もし、仮に営業上、広告もリフレッシュしたいなら、スコアデータと広告だけをリフレッシュすれば良いのです。

というわけで、今回は、Ajaxのメリットのひとつである、ページの一部だけを高速軽量リフレッシュするという方法を確認してみます。

今回のサンプル

→サンプル

更新ボタンクリックでサーバーがそのリクエストを受信した時間を返し表示するというサンプルです。

Ajaxによる一部更新を使うと、全ページ更新に比べて、あまりにも軽く更新されるので、本当に動作しているのか不安になることもありますから、ここでは、前回のインジケータも利用しました。更新の手応えがないと、繰り返し過剰にボタンを押してしまう可能性が高くなるからです。

ちなみに、Ajax用とインジケータ用のライブラリは、もともと軽量でしたが、さらに Google Maps のように、コメントを削除してさらに軽量化してありますので、2つを足してもわずか3.4kしかありません。Ajax用簡易ライブラリはこちらを参照→暫定版Ajax用ライブラリの使い方メモ


<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<!-- Ajax簡易ライブラリ jslb_ajax.js 2.6k-->
<script type="text/javascript" src="./jslb_ajax050_c.js" charset="utf-8"></script>
<!-- インジケータ jsgt_indicator.js 0.7k-->
<script type="text/javascript" src="./jsgt_indicator003_c.js" charset="utf-8"></script>

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

  //インジケータ初期化(インジケータの使い方は→Ajaxで受信中のインジケータを表示する )
  var indi = new jsgt_Indicator('./file/indicator.white.gif') ;
  window.onload = function(){ indi.indi_append("indi1"); }

  //更新リクエストを送信
  function send(){
    //インジケータ開始
    indi.indi_start();
    //送信
    sendRequest(on_loaded1,'','GET','./gettime.php',true,true );
  }


  //コールバック関数 ( 受信時に実行されます )
  function on_loaded1(oj)
  {
    //レスポンスを取得
    var r  =  eval(oj.responseText)
    var msg  = "サーバー着信は "
             + r[0]+"年"+r[1]+"月"+r[2]+"日("+r[3]+")"
             + r[4]+"時<b>"+r[5]+"分"+r[6]+"秒</b>でした";

    //レスポンスされた文字列をDIVへ出力;
    document.getElementById("output1").innerHTML=msg;
    //インジケータ停止
    indi.indi_stop();
  }

//-->
</script>

<form>
  <input type    = "button"
         value   = "更新"
         onclick = "send()">
</form>

<!-- インジケータ -->
<div id="indi1"></div>

<table>
  <tr>
    <th bgcolor="#dddddd">データ</th>
  </tr>
  <tr>
    <td bgcolor="#eeeeee">
      <div id="output1">ここへ出力します</div>
    </td>
  </tr>
</table>

</body>
</html>

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

人気Javascriptランキング