Ajaxで用いるデータフォーマットの比較 (HTML)

Ajax では、XMLHttpRequestを用いてブラウザからサーバからデータを取得する。このときのデータフォーマットとしては、XML, JSON などが様々なフォーマットが用いられている。そこで、それらのフォーマットの優劣を比較する。

HTML

内容を変更するHTML要素の中身をサーバより取得し、そのまま表示する形式である。例として、ユーザが東京都を選択したので、東京都の市町村名一覧をサーバから取得して、ブラウザに表示させるとする。この場合、次のようなデータをサーバから送る。

<h3>あ</h3>
<ul>
<li>青ケ島青ケ島村
<li>足立区
<li>..
</ul>
<h3>か</h3>
....

そして、このHTMLデータを用いて、画面情報を変更する。

HTMLは、Ajaxの実装が比較的容易なフォーマットである。その理由は2点ある。
１点目は、サーバサイドでHTMLを生成する枠組みは確立されている点である。Webアプリケーションのフレームワークを用いれば、効率良く適切なHTMLを生成できる。
２点目は、JavaScriptプログラミングが容易な点である。表示内容を変更するには、サーバから取得したHTMLを、innerHTMLメソッドで変更したいDOM要素に流し込めばよい。

HTMLの最大の欠点は、長所の裏返しでもあるが、データの柔軟性が低い点である。HTMLは、JavaScriptによって解釈しにくいフォーマットであるため、DOM要素の置き換え以外の処理の実装が面倒である。また、データにデザインが埋め込まれているため、汎用性が低い欠点がある。

つづきは、次回。