Webアプリケーションのサーバ通信

通常、Webアプリケーションでは、サーバからデータを取得する場合、サーバから次画面のHTMLを全てロードし、表示します。

この方法では、実際にロードしなければならないデータは少量でも、画面表示に必要なHTML全てをロードするため、不要なネットワークトラフィックを増加させる上、クライアントPCのCPUリソースを、本来なら必要ない画面の再描画に、多くを割くことになります。

この問題を解決するには、Webアプリケーションのクライアントが、直接サーバと通信する必要があります。Javaアプレットを使えば、解決するのですが、この場合もっと多くの問題が発生する可能性があります(Javaのバージョンの問題や、起動時のパフォーマンス。そもそもアプレットを作成するお金や期間の問題など等)。

一番スマートな解決策は、多分WebブラウザがSOAPを実装することでしょう。実際一部のWebブラウザは、SOAPクライアントの機能を実装しています。これを使えば、サーバとxmlベースのデータを自由にやり取りできます。

しかし、現実には、SOAPクライアントの機能を実装したWebブラウザの利用率は数パーセント程度で、これを前提としたアプリケーションなどは、到底受け入れられる状態ではありません。最低でも70～80パーセント程度の利用率がないと、顧客に提案もできません。

解決策其の一

そこで、HTMLのフレームを利用して、サーバとの通信を行う方法を考えて見ましょう。サーバからのデータをバッファ用のフレームに読み込み、読み込んだHTMLのonloadイベントで、データをアプリケーション用フレームの画面にコピーします。データのコピーにはJavaScriptによるDOMを利用します。

HTMLのフレームや、単純にデータコピーをする程度のDOMは、現在利用されている、かなりのWebブラウザが実装しているため、作成したアプリケーションを、多くの利用者が使えないということは、殆ど無いと思われます。

実現方法は至って簡単です。以下のようなHTMLとスクリプトがあれば、完成です。

アプリケーション画面のHTML

<title>アプリケーション画面</title>
<body>
    <form action="./result.html" method="get" target="buffer">
        ID:<input name="code" type="text" />
        <input type="submit" value="サブミット" />
    </form>
    <input id="name" name="name" type="text" />
    <iframe name="buffer" width="0" height="0"
    scrolling="no" frameborder="0">
    </form>
</body>

処理結果を返すHTMLとスクリプト

<title>結果</title>
<script type="text/javascript">
    function result() {
        top.document.getElementById('name').value = '名前';
    }
</script>
<body onLoad="result()"></body>

上記の例では、Formから直接result.htmlをロードしていますが、ここをCGIやJSPに変更し、その中でコードから名前を検索して返すよう実装すれば、Webアプリケーションのできあがりです。

ここで、HTMLを使って画面を作成する時の注意事項ですが、xhtmlの利用を強くお勧めします。これは、xmlの仕様に則ってコーディングすることができるからです。xmlの仕様に則ってコーディングされていれば、DOMやXSLTなどを使ってインターフェイス仕様を作成したり、複数の画面を統一的に変更したりすることが、簡単になります。

100画面の特定のボタンに、クラス属性を追加する時に、全画面をHTMLエディターで開いて属性を付けるのと、特定のIDのボタンにクラス属性を追加するのとでは、労力は雲泥の差です。また、DOMが正しく動作しないなどのトラブルも、少なくなります。

上のサンプルの実装です。効果のほどを確認してください。サンプルに多少手を加えています。

解決策其の二（こちらが本命？）

iframeを使う方法は、殆どのWebブラウザで使えるうえ方式も簡単なので、ある程度JavaScriptが分かっていれば、誰にでも利用できるという大きな利点があります。

しかし、この世の中を動かしているのは、プログラマ（またはSE）と呼ばれる、一種独特の人達です。彼ら（実は私も含めて）の鉄則は、「難しいものほど優れている」なのです（うそ）。

現在一般的に使用されているWebブラウザの多くで実装されている機能に、XMLHttpRequestというものがあります。最近流行なので、いろいろなサイトで紹介されていますが、たしかにそれなりの利点があります（残念ながら欠点もあります！）。

欠点を論（あげつら）う

Formの内容を簡単にPOSTできない

Formの内容をPOSTしたい場合は、全てのコントロールからデータを取得して、編集するという処理が必要になります。

ファイルのアップロードができない

上記の内容とも多少関連しますが、サーバへ送るデータを、独自に編集しなければならないため、ローカルのファイルをアップロードするような処理には使えません。これに関しては回避策がないので、ファイルのアップロードが必要な場合は、アップロードのみ従来のFormのサブミットを利用し、それ以外にXMLHttpRequestを利用するなどの対策が必要になります。

Webブラウザによって、実装が異なる

元々、マイクロソフトがActiveXオブジェクトとして実装したものなので、当り前といえば当り前なのですが、ActiveXをサポートしないIE以外のWebブラウザとIEでは、XMLHttpRequestオブジェクトのインスタンスを取得する方法が異なります。

利点を褒め湛える

同期通信ができる

リクエストを投げてレスポンスが帰るまで、処理をブロックすることができます。サーバからのレスポンスを、確実に取得したい場合などに利用します。

エラーを検知できる

XMLHttpRequestを利用する、最大の理由かもしれません。Webサーバが返してくるレスポンスコードを取得して、処理を振り分けることができます。

HTTPの制御ができる

XMLHttpRequestには、リクエストのHTTPヘッダを変更／追加するメソッドが用意されています。このメソッドを利用することで、ひとつのファイルを分割して取得するなど、サーバ間との通信を細かく制御できます。