ボタンを押すとサーバから取得した文字列をページに表示する簡単なAjaxアプリケーションを試す。
1.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");
}
}
2. サーバと通信してデータを取得し、ページを書き換える関数(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);
}
3. このJavaScriptを使うHTMLページを作る。ページ内には段落と、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>
4. サーバ側のスクリプトを作る。サンプルとしてHTMLテキストを返すだけのスクリプトを、クライアント側で指定されている /server.phpとして配置する。サーバ側はPerl、PHP、ASP.NET、J2EEなど、どのような開発環境でも利用できる。 ボタンがクリックされました。
echo '
?>
5. これで、ボタンがクリックされるとサーバから取得したデータでページが書き換えられる。