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

　実践Ajaxアプリケーション

　では、簡単な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 記事ランキング

本日 月間
＠IT