今回はAjax通信を利用したWEBサイト構築についてお話しします。
Ajaxは2000年代中頃に誕生した技術でAsynchronous JavaScript + XMLの略称です。
最近のWEBサイト構築手法の標準となっています。
Ajax通信を利用した代表的なサイトとしてGoogle Mapがあります。
とはいえ、イメージがしずらいかと思いますので、Ajaxが登場する前後でのWEBサイト構築例について比較してみます。
Ajax登場前後のWEBサイト構築手法の比較
Ajax登場前（～2000年初頭）
サーバー側の仕事
- HTML文で書かれたページを生成
- 一回の通信に係る情報量～WEBページサイズ
クライアント側の仕事
- サーバー側が作成したページを解読して表示する。
動きがないページが多かった。
Ajax登場後（2000年中頃～）
※Google Mapをイメージしています。
サーバー側の仕事
- クライアント側からの位置情報に対して更新用の地図画像をクライアントへ返す(Javaサーブレット)。
クライアント側の仕事
- ページ中の地図表示領域にマウス入力を待つ「JavaScript」プログラムが常駐している。
- 地図表示領域上でマウス操作した時の位置情報を検出し、次に表示すべき基準の位置情報（※）をサーバー側へ送信し、サーバー側からの応答を非同期で待つ。
この間もページ内のマウス操作は可能（非同期処理で動作している。）
※「XMLHttpRequest（JavascriptのHTTP通信用ライブラリ）」により送信される軽量の「XML」データ - サーバー側から新たな基準位置の地図画像が送られてくる。
- ページ中の地図表示領域のみ更新する。また関連するテキスト情報も関連する部分だけ更新する（「DOM」）。
最近ではリアルタイムで同期したRSSの広告やニュース、天気情報など動作に富んだページが多い。
まとめ
サーバー側
- Ajax通信におけるメインの開発言語はJava言語であるが１からスクラッチで作成することは稀で、ある程度、WEBサイトの土台が出来上がった状態のフレームワーク環境をカスタマイズしていくことが多くなってきている。
（別の記事のJavaサーブレットの開発の流れの手順を踏むことは少ない。） - フレームワーク環境を利用する利点としては、短期間で見た目も優れ、高機能なサイトを構築できることであるが、カスタマイズを行うために必要なリバースエンジニアリング（ソースコードから内部設計を調査すること）に相当な時間を要する場合が多い。
※成熟したフレームワーク環境は長い年月をかけて改良を重ねてきているため,、ソースファイルの数も数千ファイルに及ぶことがめずらしくない。
- 上記で触れませんでしたが、Javascript同様、古くてWEBサイトで見直しがされているものとしてApache Velocityと呼ばれるエンジンがあります。
これはVelocity テンプレート言語 (VTL) で書かれたものをHTML言語のページに変換するものですが、Javascript言語の埋め込みやJava言語との連携（データベースの結果を反映）などの応用もでき、特にサーバー側のデータベースと連動するページを作成する時は威力を発揮するという印象です。
クライアント側
- Ajax通信を利用したWEBサイト構築ではクライアント側もページ表示以外の重要な機能を担っている。
- メインの開発言語はJavascriptだが、Ajax通信（サーバー側との連動）においては昔からあるJavascriptの機能だけで開発することは少なく、Javascript向けライブラリ(jQueryまたは dojo)を通常使用することが多い。
同ライブラリを利用することで何十行も書く必要があるコードが数行で済んだりする。 - Ajax通信の登場によりJavascript言語の重要度は高まり、サーバー側のJava言語と同様にJavascript言語をメインとして技術者が増えた。
その他
- Ajax通信を利用したWEBサイトの通信量は軽量（XML形式のテキストデータまたはJSON形式のテキストデータ）
これによりサーバ側の役割もページを生成からページの構成部品の生成に変化した。
とてもざっくりとした説明でしたがAjax通信のイメージの理解に少しはお役にたてたでしょうか。
Ajax通信の登場によりそれまで趣味言語、娯楽言語といわれていたJavascriptが今や進化を遂げ、様々なライブラリ(dojo,jquey等)が生みだされ、今日、WEBサイト開発において重要度面でJava言語と方を並べる状況は、
ここ10年Javascriptから離れていた方にとってはとても驚きの内容だったのではと思います。