特集
» 2006年08月10日 08時00分 UPDATE

Web2.0で変わるWebプログラミングの常識:Ajaxを理解する4つのポイント (1/6)

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

[大澤文孝,ITmedia]

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

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

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

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

fig02.gif 図2■サンプルアプリケーション
fig03.gif 図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というメソッドが呼び出されることに注目したい。

       1|2|3|4|5|6 次のページへ

Copyright© 2016 ITmedia, Inc. All Rights Reserved.

Loading

ピックアップコンテンツ

- PR -

注目のテーマ