http://fitnessnavi.biz/
PEAR パッケージ HTML_AJAX スタートアップ
最近 Ajax が無性に気になったので調べてみた。しかし「AjaxはJavaScript + XMLの非同期通信です。とはいえ新しい技術ではなく既存の...略」なんて言われてもさっぱり意味がわからない。サンプルコードを見ても JavaScript 自体久しくいじってないので、ソースを見ても何が行われてるのかさっぱり。。JavaScript といえば昔、苦労して書き上げたスクリプトが他のブラウザで全く動かないことが判明して、「なんて始末の悪い言語なんだ!」とぶち切れたっきりだっけ。。こんなクソ言語は絶対に流行らないだろうと当際は思ってたんだけど、今やgoogle の追い風にのってWebプログラミングの先端に返り咲いたか。しかも PEAR のパッケージに HTML_AJAX なるものがあって、これを使えば簡単に Ajax のコードが書ける??なんて謳い文句は信用していいのやら。とりあえずスタートアップガイドのサンプルコードを動かして遊んでみる事にしました

さて、HTML_AJAX のインストール。うちは MacOSX なので、ターミナルから管理者権限でインストール。

bakabon# pear install HTML_AJAX-alpha
downloading HTML_AJAX-0.4.1.tgz ...
Starting to download HTML_AJAX-0.4.1.tgz (128,846 bytes)
.............................done: 128,846 bytes
install ok: HTML_AJAX 0.4.1

前にも書いたけど、PEAR は phpスクリプトで書かれたライブラリなので、
パッケージをそのままダウンロードしてきてパスを通すだけでもオッケーです。
*ただし、PEAR基本パッケージもいっしょにね。

それで、ドキュメントのサンプルを言われるままにコピペして、
server.php
output.php
ajax_test.php
の3つのファイルを作って置いてみたんですよ。そしたらあなた、見事に時刻とボタンが現れましたよ!!しかもボタンを押すと現在の時刻が表示されるんですよ!!

って、まてよ。。これって JavaScript だけで普通にできないか??

まぁいいさ。時刻を表示するという機能には違いはないが、その意味には違いがある。JavaScript だけなら、ローカルつまり自分のコンピュータの時刻が表示されるだけだけど、この場合はファイルの置いてあるWebサーバーの時刻が表示される。今はローカルで実験してるので、その違いも無きに等しいが。。

で、3つのファイルを眺めてみる。

まずは server.php

<?php
include ’HTML/AJAX/Server.php’;
$server = new HTML_AJAX_Server();
$server->handleRequest();
?>

HTTP_AJAX_Server のインスタンスを作成し、handleRequest()メソッドを実行してる。何やらこいつが JavaScript とPHPスクリプトの橋渡しをしてるらしい。今の所さっぱり。

で、output.php

<?php
print("<h1>". strftime("%H:%M:%S") ."</h1>");
?>

現在の時刻をタグ付きで出力するスクリプト。こいつがHTMLファイルに非同期に埋め込まれるわけだ。非同期にってのは、ページを読み込むタイミングとは独立して、という意味か。一昔前のWEBチャットなんかは何秒かごとにページ全体を再読み込みして新しい書き込みを表示してたりしたけど、これを使えばページは再読み込みする必要がないね。

うんうん。そういう事か。

で、HTMLファイルだけど、

<html>

<script type="text/javascript" src="server.php?client=all"></script>
<div id="target">I’m the target</div>
<script type="text/javascript">
HTML_AJAX.replace(’target’,’output.php’);
</script>
<form>
<input type="button" onclick="HTML_AJAX.replace(’target’,’output.php’);" value="Update target">
</form>
</html>

ええと、、最初の script タグで server.php を読み込んで、client=all ってのは何だ?
よく分からないけど、server.phpをブラウザで開いたら真っ白、&client=all
って付けたらJavaScriptで書かれたコードがずらっと出てきたよ!!!

そして、二つ目の script タグ、そしてボタンの onClick にセットされてる JavaScript コード

HTML_AJAX.replace(’target’,’output.php’);

間違いなく、id=taget の付いた要素に PHPスクリプト output.php の出力を置換表示する関数だよね。実際、id=taget の付いた divタグに output.php の時刻の出力が表示されてる。

これらを眺めてたら何となく分かってきたね。
HTMLタグの id と PHPスクリプト を繋ぐ JavaScript コード 「 HTML_AJAX.replace 」。
そしてそれを定義してるのが server.php で(PEARによって)動的に作られた JavaScript ライブラリ。
ライブラリはカスタマイズできそうだし、JavaScript は埋め込み方に色んなバリエーションがあって、PHPスクリプトではDBを読み込んだりRSSを読み込んだり、などなど。
使い方が見えてきたような?


コメント

お気に入り日記の更新

テーマ別日記一覧

まだテーマがありません

この日記について

日記内を検索