ダイナミックロード
Ajaxと同様、WebページをリロードすることなくWebブラウザがWebサーバと非同期通信する手段として「ダイナミックロード」という手法があります。
この手法は、大まかに説明すると以下のような手法です。
- Webページにsrc属性を指定していないscriptタグを用意しておきます。
- JavaScriptは、CGIと通信したいタイミングで、scriptタグのsrc属性に任意のJavaScriptを指定します。
(このときに指定するJavaScriptはCGIで出来ていて、GETによるパラメータで引数を渡すこともできます。) - サーバは渡されたパラメータをもとに、任意のスクリプトを持つJavaScriptをブラウザに返します。
- ブラウザでは渡されたJavaScriptによって、Webページの内容を書き換えます。
<script id="dload"></script>
ダイナミックロードを使った場合のアーキテクチャ
ダイナミックロードを使ったCGIでゲームを作った場合、以下のようなアーキテクチャになります。
- クライアントのWebブラウザは、サーバに対しWebページを要求。
- サーバは、ブラウザへWebページを返信し、ブラウザにゲーム画面を表示。
- クライアントのWebブラウザは、JavaScriptの処理でscriptタグのsrc属性が指定され、JavaScriptファイルを要求。
- サーバのCGIは、データの抽出や更新を行う。
- サーバのCGIは、抽出したデータを使ってゲームの処理を行う。
- サーバのCGIは、ゲームデータをJavaScriptで描画できる形に変換したものを返信し、Webブラウザのゲーム画面を書き換え。
(3〜6を繰り返す)
プロセス3で要求されるJavaScriptファイルはCGIで作っておく必要があるため、かなり斬新な手法だと思います。
長所と短所
たしかAjaxでは「Webページの置かれているドメイン」と「CGIが置かれているドメイン」が同一でなければならないのに対し、ダイナミックロードは異なるドメイン上に置かれたCGIへもアクセスできたと思います。
ですが、IEなどでやってみると、サーバと通信する際にマウスカーソルが砂時計になるので、それが気になるところです。