今までにAjaxのフレームワークで「Prototype.js」「jQuery」「Yahoo！ UIライブラリ」を紹介してきました。
今回は、PEARのHTML_AJAXの基本的な機能を紹介します。名前の通りPHPでAjaxを使う機能です。
2007年1月6日現在でのヴァージョンは0.5.0(beta版)を使っています。
HTML_AJAXは以下のサイトからダウンロードしてください。
・PEAR::HTML_AJAXダウンロード
PEAR::HTML_AJAX
インストールについて知りたい方は、過去の記事をご参照ください。
レンタルサーバーでPEARを使う方法
WindowsでPEARを自動インストールしてみよう
それでは早速、サンプルを作ってみます。
今回は全てのファイルの文字コードを「UTF-8」で統一しています。（文字化け防止）
適当にディレクトリを作ります。（仮に「home」とします）
homeディレクトリの中に「server.php」と「sample.html」の2つのファイルを作ります。
[home]
└─server.php
└─sample.html
└─message.txt
server.phpではAjax用のJavaScriptファイルを自動生成するファイルです。
sample.htmlにAjaxを書き込みます。
message.txtにはAjaxで読み込むテキストファイルです。「はじめてのHTML_AJAX」など適当にテキストを記述してください。
まず、server.phpをテキストエディタで以下の以下の3行を記述します。
require_once("HTML/AJAX/Server.php");
$server = new HTML_AJAX_Server();
$server->handleRequest();
handleRequestメソッドでAjax用のJavascriptを自動生成します。
次にsample.htmlにhtmlタグやheadタグ、bodyタグなどの基本的なタグを記述します。
headタグ内に、以下のスクリプトを記述します。
<script type="text/javascript" src="server.php?client=all"></script>
通常は「src」の中に「xxx.js」と記述することが基本ですが、拡張子を「php」にすることで動的にJavascript（Ajax）を生成しています。
引数「client=all」はHTML_AJAXで使えるjsファイルを全て呼び出します。
次に以下の2行を追加します。
<input type="button" onClick="HTML_AJAX.replace('message', 'message.txt')" value="HTML_AJAX.replaceの起動">
<div id="message">メッセージ表示領域</div>
これで完成です。ボタンをクリックすると「メッセージ表示領域」が「message.txt」の内容に切り替わります。
replaceメソッドの引数は以下のように指定します。
HTML_AJAX.replace(id, file)
id：id属性名
file：読み込むファイル名
他にもappendメソッドやgrabメソッドなどがあります。
ボタンの
<input type="button" onClick="HTML_AJAX.replace('message', 'message.txt')" value="HTML_AJAX.replaceの起動">
を
<input type="button" onClick="HTML_AJAX.append('message', 'message.txt')" value="HTML_AJAX.appendの起動">
に変えてみてください。
メッセージが上書きされるのではなく、追記されます。
appendメソッドの引数はreplaceメソッドと同じように指定します。
HTML_AJAX.append(id, file)
id：id属性名
file：読み込むファイル名
最後にgrabメソッドについて紹介します。
以下のディレクトリやファイルを新たに作ります。
[home]
└─server.php
└─sample.html
└─message.php
server.phpは以前作成したファイルをそのまま持ってきます。
sample.htmlにAjaxを書き込みます。
message.phpにはAjaxで読み込むテキストファイルです。grabメソッドの機能を分かりやすくするためにPHPにしています。詳細は後ほど説明します。
message.phpに以下の3行を記述します。
sleep(3);
echo "初めてのHTML_AJAX<br />";
echo "UTF-8で作成！3秒停止後に表示";
アクセスしてから3秒後にテキストを表示させます。
replaceメソッドやappendメソッドではid属性を直接指定していますが、grabメソッドは単体でファイルを読み込むことが出来ます。
grabメソッドを使うことにより、javascriptのalert機能やxmlの処理などを別途で指定することが出来ます。
更に、grabメソッドには同期通信と非同期通信の2種類があります。
同期通信は、プログラムが処理中の場合、ユーザーの操作を受け付けませんが、
非同期通信は、プログラムが処理中であってもユーザーの操作を受け付けてくれます。
この非同期通信がAjaxの最大の魅力だと思います。
言葉で説明しても分からないよ！という方は実際に体験してみましょう。
まずは、同期通信を体験してみましょう。sample.htmlに以下の記述をします。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML_AJAX.grad同期モードのテスト</title>
<script type="text/javascript" src="server.php?client=all"></script>
<script type="text/javascript">
<!--
function grab() {
document.getElementById("message").innerHTML = HTML_AJAX.grab('message.php');
}
//-->
</script>
</head>
<body>
<input type="button" onClick="grab()" value="HTML_AJAX.grad同期モードの起動">
<div id="message">メッセージ表示領域</div>
</body>
</html>
ボタンをクリックすると、3秒後に「メッセージ表示領域」のテキストが切り替わります。
その3秒間ブラウザはユーザーの操作を受け付けません。
今度は非同期通信ですが、以下のように記述してください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML_AJAX.grad非同期モードのテスト</title>
<script type="text/javascript" src="server.php?client=all"></script>
<script type="text/javascript">
<!--
function callback(message) {
document.getElementById("message").innerHTML = message;
}
function grab() {
HTML_AJAX.grab('message.php', callback);
}
//-->
</script>
</head>
<body>
<input type="button" onClick="grab()" value="HTML_AJAX.grad非同期モードの起動">
<div id="message">メッセージ表示領域</div>
</body>
</html>
非同期通信では、ボタンをクリックした後でもユーザーの操作を受け付けてくるのが分かると思います。
grabメソッドは以下のように指定します。
同期通信の場合
HTML_AJAX.grab(file)
file：読み込むファイル名
非同期通信の場合
HTML_AJAX.grab(file, callback)
file：読み込むファイル名
callback：コールバック関数
今回紹介した機能以外にも沢山の機能があります。
ただし、PHP5では自動で沢山のことをやってくれるのですが、私のようにPHP4で仕事をすることが多い方にはあまり向かないと思います。（無理やり作ることは出来るのですが、ほぼ手作業でPHPを使う意味がありません＾＾；）
・関連記事
prototype.jsの使い方
jQueryを使ってみよう
Yahoo! UIライブラリを使ってみよう
| 固定リンク
| コメント (0)
| トラックバック (1)
