<< アクセス元の国名を判定 | main | xajax:ちょっとだけtips >>

2007.07.28 Saturday

xajaxで簡単AJAX

本格的にマッシュアップサイトを作る場合、
各APIの応答速度等が問題となる場合があります。
PHPってのは、動的にページを生成するので、何もしないと、ページ生成までWebページが表示されなくて、ユーザーのイライラ感を増し、せっかく来てくれたVisitorを逃してしまうことにもなります。
そこで、AJAXの登場となるわけですが、
AJAXの主役はJavascript。
ご存知のとおり、Javascriptってのは、ブラウザによって実行結果が変わる場合があるので、注意が必要です。
そこで、
xajax PHP and Javascript library
の登場となります。

--
このライブラリのすごいところは、
ライブラリをインストールし、既存のソースに数行の記述を加えるだけで、簡単にAJAXアプリにできるところにあります。

■ライブラリのインストール
xajax PHP and Javascript library
から、ZIPファイルをダウンロード&解凍後、
・xajaxディレクトリ直下にあるPHPファイル群をインクルードパスの通った場所にコピー
・xajax直下にあるxajax_jsディレクトリごと、適当なディレクトリにコピーします。例えば、/public_htmlがHTMLルートならば、/public_html/js以下にコピーするなどすればよいでしょう。コピーした先(ここでは、/js)は後で使うので、忘れないように。
インクルードパスが指定できない場合は、PHPファイルと同じ場所にコピーしておけばよいでしょう。

■サンプルを動かす
解凍したファイルには、xajax直下のexamplesディレクトリに、helloworld.phpが含まれているので、これをサーバーの適当な場所にコピーします。
そのままでは動作しないので、以下のように変更します。
サンプルファイルを見ると、
<?php $xajax->printJavascript('../'); // output the xajax javascript. This must be called between the head tags ?>
という行があるので、これを
<?php $xajax->printJavascript('/js/'); // output the xajax javascript. This must be called between the head tags ?>
と変更すればOKです。
(xajax_jsは、自動的に付加されます)
なお、ディレクトリパス指定は、インストールの項目で説明したxajax_jsディレクトリの転送先ディレクトリを指定します。
サンプルのままだと、相対ディレクトリ指定なので、あちこちにPHPファイルが散在しているようなサイト(このサイトもそうですが・・・)では、不便なので、こんな感じにするとよいでしょう。
もちろん、PHPファイルは、特定ディレクトリにのみ入れている、特定レベルのディレクトリにのみいれている、という方は、そのディレクトリと並列ディレクトリにxajax_jsディレクトリをコピーすれば、サンプルのままで動作します。

実際にサンプルを動かすと、AJAXで動いている感じがわかりますね。
出力されたページのソースコードを見てみると、Javascriptコードがxajaxによって自動生成されたことが分かります。

AJAXというと、Serverなんたら、Clientなんたら、なんて感じで複数ファイルで構成されるので、複雑になりがちなのですが、xajaxを使うと、
簡単にAJAX化できるのがgoodです。

もちろん、複雑なAJAXアプリを作る場合は、xajaxでは、対応できない場合もあるかもしれないので、その場合は、別のアプローチを考える必要がありますが・・・

当面は、これでしのげるかな?

あと、トップページにも書いたのですが、
AJAX対応サイトの実例サンプルとして、
AJAX版アーティストリンク
を作ってみました。
かなり気持ち良いです。
ページ自体の実用性はあまりない(ただ、自分にとっては有用なツール)のですが、後になって、AJAX化に踏み切れるきっかけになってしまった、と振り返ることになるかもしれません。

■参考
Japanese manual for xajax ( 日本語 マニュアル )

--

テクノラティお気に入りに追加する

Comments

コメント入力は停止しています

海外からと思われるコメントスパムが横行しているため、全記事のコメント入力を停止しています。メッセージのある方は、ホームページの一番下に連絡欄がありますので、そちらからお願いします。

Trackback URL

トラックバックする場合は、
トラックバック元の記事にこのエントリへのリンクを記載してください
このエントリのタイトル「xajaxで簡単AJAX」
このエントリのリンク「http://kommy.s254.xrea.com/blog/log/eid45.html」