Ajaxアプリケーション (Web Study)

ボタンを押すとサーバから取得した文字列をページに表示する簡単なAjaxアプリケーションを試す。
(実践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など、どのような開発環境でも利用できる。

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

5. これで、ボタンがクリックされるとサーバから取得したデータで、ページ内の指定した部分が書き換えられる。 Sample:




ボタンを押すとこのテキストが書き換わります。


【注】phpソースはunicodeで保存しないと文字化けするようだ。
ＩＥ６およびＦｉｒｅｆｏｘで正常動作することを確認した。