Ajaxを理解する4つのポイント：Web2.0で変わるWebプログラミングの常識（1/6 ページ）

Ajaxはどのように実現されているのだろうか？　こんな疑問に応えるべく、サンプルを挙げてみよう。Ajaxの基本は、単に「JavaScriptでHTTP通信をする」というだけに過ぎないことが分かる。

[大澤文孝，ITmedia]

　オンライン・ムックPlus「Web2.0で変わるWebプログラミングの常識」の第1回目では、Ajaxが使われる背景と、どのような場合に適しているかを解説した。

　今回はサンプルアプリケーションを取り上げていこう。ポイントは、もっとも基本的な例に限定したことであり、開発者である読者が今すぐにでも既存のWebアプリケーションへ組み込むことができるよう配慮した点だ。

　まず最初に、以下の図2に示す2つのテキストボックスに注目してほしい。その「和」と「差」をそれぞれ計算し、結果を埋め込むという処理を挙げてみよう。

　「和」と「差」を計算する処理の部分は、サーバ側に用意したPHPプログラムで行うことにする（図3）。

図2■サンプルアプリケーション

図3■サンプルアプリケーションの構成（クリックで拡大）

Ajaxアプリケーションの書き方

　実際にソースコードリストを示す前に、Ajaxアプリケーションを構成するHTMLの書き方について説明しておく。

　下記に示す事柄は、必ずしも守る事柄ではないが、守ったほうが、問題が少なくなる。

1. UTF-8で書くこと

　XMLHttpRequestオブジェクトで送受信するデータは、UTF-8でないと文字化けを起こす。HTML自身はUTF-8でなくても構わないが、送受信されるデータに合わせてUTF-8にしておいたほうが問題が起こる可能性が少ないのだ。

2. XHTMLが望ましい

　DOMを使ってJavaScriptからコンテンツを書き換えるという都合上、コンテンツはXHTMLで記述すると、構造上のミスが少なくなる。

　また、XHTMLであればタグのネスト関係が明確であるため、どのようなWebブラウザでもDOMツリーが同一になるためだ。HTMLを使っても動作自体に問題はないが、タグの構成が正しくない場合にはDOMツリーのズレが起き（これは終了タグのヌケやタグのネストの間違いなど正しくないHTMLを書いてしまったことが原因だ）、問題の解決が面倒なことになる。

Ajaxアプリケーションの構造

　図2に示したサンプルのリストを6ページ目のリスト1、リスト2に示す。クライアントサイドの入力フォームは、次のようになっている。

<form>

<input type="text" id="value1"/><br/>

<input type="text" id="value2"/><br/>

<input type="button" value="送信"

onClick="javascript:calc();"/>

</form>

　ここでは「送信」ボタンがクリックされると、calcというメソッドが呼び出されることに注目したい。