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

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

---

1: 今回のサンプル
2: サーバー側のソース

サーバー側のソース

次に、サーバー側のソースです。単純に日時を返しています。
(今回はPHPですが、言語は何でもかまいませんし、普通のHTMLファイルでもOKです)

【gettime2.php】

<?php

  mb_http_output ( 'UTF-8' );
  header('Content-Type: text/html; charset:utf-8');
  print ('['.date ('Y,m,d,"D",H,i,s').']');

?>

1行目で、出力文字コードをUTF-8に設定し、2行目でContent-Typeヘッダを指定しています。(このデータの場合は日本語などが含まれていませんから、 実はUTF-8でなくても問題なく動作しますが、 一般にAjaxを利用する場合はUTF-8を使う方が安全な場合が多いので念のために書いておきました)。そして、3行目のdate()関数で日時を生成し、print文で出力しています。

ポイントは、返す際に、年月日曜日と時分秒を '[' と ']' でくくった文字列として返していることです。実際に、 gettime2.phpへアクセスしてみるとわかりますが、たとえば、つぎのような文字列が出力されます。

[2006,03,26,"Sun",09,13,49]

[年,月,日,"曜",時,分,秒]のデータが返ります。つまり、日時のデータが入ったJavaScript配列を意味する文字列が返る仕組みです。 これを、JavaScript側では、「r = eval(oj.responseText)」の部分でJavaScript化して「r」 という配列を作成してから「r[0]+"年"+r[1]+"月"...」のようにして出力文字を作成しています。 この配列には、年,月,日,"曜",時,分,秒がr[0]からr[6]まで順番に入っていますので、その番号で取り出せば良いわけです。

旧来のWebアプリケーションでは、一般的に、サーバー側でHTMLまで加工して、たとえば、つぎのように書いてから、 送信することが少なくなかったと思いますが、

  print ("サーバー着信は 着信は ".date ("Y年m月d日(D) <b>H時i分s秒</b>")."でした");

Ajaxでは、純粋にデータのみを送り、あとのHTML生成はクライアントにまかせるという方法を取ることが増えてきており、これによって送信するデータ量も減らすことができます。

特に、このデータのような、日本語部分の生成もクライアントに任せてしまえるデータの場合は、 ブラウザによる文字化けの問題も考慮する必要がなく(utf-8でなくてもかまいません)、Ajaxを使えるブラウザすべてで動作するものを簡単に作れるようになります。

結構細かいことのようですが、Ajaxではこのような細かいチューニング作業の積み上げの結果が、最終的なパフォーマンスに少なからず大きな体感速度の違いをもたらすことがあります。

WBCの話に戻るなら、更新ボタンでサーバーがページ内のHTML丸ごと全部(数百kから数Mということさえあります)を送り出すのをやめて、 たとえば、次のような、本当に更新が必要なわずかなデータだけに絞り込めば、送信するデータ量は、 比較するまでもなく、信じられないほど激減します。

{"jp":[4,0,0,0,2,0,0,0,4,10],
 "cu":[1,0,0,0,0,2,0,2,1,6]}

Ajax関連と言えそうな軽量高速化テクニックとしては、実はさらに、先方のファイル更新時間などをチェックしてから取りに行くとか、HTTP1.1のgzip圧縮を利用するといった HTTPクライアントらしい技もあるのですが、今回はブラウザに依存しない手軽で基本的な方法ということで紹介してみました。

また、インジケータのところで説明しましたが、このような、手軽なリフレッシュを考えるのと同時に、Ajaxでは、逆に手軽であるだけに、 無駄な(過剰な)リロードの発生を防ぐことへの心配りも必要になってくると思います。

たとえば、大量のアクセスが予想される場合には、Ajaxによる軽量化を過信せず、 逆にリフレッシュインターバルをなんらかの方法で限定することや、Ajax以外の処置も含めて、 様々な対策が必要になることは言うまでもありません。