Ajax推進委員会
監修:ゼロベース
2005/8/2

 実践Ajaxアプリケーション
- PR -

 では、簡単なAjaxアプリケーションを作ってみよう。ボタンを押せばサーバから取得した文字列をページに表示するものだ(ここではAjaxの基本的な動作を示すために細かいエラー処理などは行っていない)。

 まず、JavaScriptでXMLHttpRequestオブジェクトを作成するコードを作る。ブラウザがIEならばActiveXオブジェクトとして、それ以外ではJavaScriptオブジェクトとして作成する。

ajax = false;
// IE以外
if(window.XMLHttpRequest) {
   ajax = new XMLHttpRequest();
// IE用
} else if(window.ActiveXObject) {
   try {
      ajax = new ActiveXObject("Msxml2.XMLHTTP");
   } catch(e) {
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
   }
}

 次に、サーバと通信してデータを取得し、ページを書き換えるAjaxエンジンとなる関数を作る。この関数は、第1引数に指定されたURLにアクセスして、返された文字列で、第2引数で指定されたIDを持つページ内のオブジェクトの中身を書き換える。

function getData(serverURL, objID) {
   ajax.open("GET", serverURL);
   ajax.onreadystatechange = function() {
      if (ajax.readyState == 4 && ajax.status == 200) {
         var obj = document.getElementById(objID);
         obj.innerHTML = ajax.responseText;
      }
   }
   ajax.send(null);
}

 次に、このJavaScriptを使うHTMLページを作る。ページ内には段落(p要素)を1つと、Ajaxを実行するためのボタンを1つ配置する。ボタンは通常のsubmit動作は行わずに、JavaScriptの関数を呼び出すだけだ。onClickイベントハンドラで指定しているURLは、スクリプトの置かれているURLに置き換えること。

<html>
<head><title>最も簡単なAjaxサンプル</title></head>
<body>
<form>
<input type=button value="取得&書き換え" onClick="getData('http://www.example.jp/server.php', 'maintext'); return false;">
</form>
<div id="maintext"><p>ボタンを押すとこのテキストが書き換わります。</p></div>
</body>
</html>

 これでクライアント側は完成だ。次に、サーバ側のスクリプトを作る。今回はサンプルなので、単にHTMLテキストを返すだけのスクリプトにして、クライアント側で指定されている/server.phpとして配置する。サーバ側はPerl、PHP、ASP.NET、J2EEなど、どのような開発環境でも利用できるが、今回はPHPを利用した。

<?php
echo '<p>ボタンがクリックされました。</p>';
?>

 これで、ボタンがクリックされるとサーバから取得したデータでページが書き換えられる。

Ajax-XML=Aja?

XMLHttpRequestは、XMLによってデータをやりとりするためのもので、本来の「Ajax」では、responseXMLプロパティを使ってサーバから送られたXMLドキュメントを取得し、XSLTやDOMを利用してページ内容を書き換えることになるだろう。しかし、responseTextプロパティを使えばXMLドキュメント内のテキストデータを利用できるため、これを使って、XML構造は気にしない手法を使うことも多いだろう。それもまたAjaxだ。

3/4

 INDEX
古くて新しいAjaxの真実を見極める
  Page1<画面遷移を使わない非同期データ処理>
AjaxではないWebアプリケーションの動き/Ajaxアプリケーションの動き
  Page2<古い技術に付けられた新しい名前>
Page3<実践Ajaxアプリケーション>
  Page4<まとめ:Ajaxとリッチクライアントの今後>
Ajaxのデメリット/Ajaxのメリット


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間
ソリューションFLASH