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のメリット

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする
  • ビヨンド・クールジャパン!? （2012/1/27）
    コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ
  • Qt5で10億人ユーザーへ、OSSコミュニティ化で健在に （2012/1/20）
    ノキアから売却されてQtはどうなったのか？ 弱体化してしまうのではとの心配をよそにダウンロード数は飛躍的に伸びている

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH