Catalystでajax - 実践編

概要

前回のエントリに関して、MM/Memoで、「うーん、便利なのかなー。perl（とかのサーバサイド）コード中にjavascriptが混ざるのって嫌な気がするけど。」と書いている方がいらっしゃったのですが、ちょっと勘違いをされているような気がします。自分でJavascriptのコードを一切書かずに済ませるための、HTML::PrototypeならびにCatalyst::Plugin::Prototypeですから。

なので、今回は実践編っつーことで、Javascriptを一切書かずにajaxなウェブアプリ（ってほどのものではないけど）をCatalystで作ってみたいと思います。といっても、けんたろさんのCatalyst で作る簡単 Web アプリケーション: Feed2JS 解説で、既にCatalystでajaxで自分ではJavascriptを書いていないという、素晴らしいサンプルがあるのですが、ここではよりシンプルな（しょぼい）サンプルで、「こんなに簡単にajaxできるぜ」ってことを示したいと思います。

プロジェクト生成

$ catalyst.pl Ajax

ビューの生成

$ cd Ajax
$ ./script/ajax_create.pl view TT TT

perlコード作成

lib/Ajax.pmを修正します。修正した部分だけ以下に示します。

use Catalyst qw/Prototype/;

sub default : Private {
    my ( $self, $c ) = @_;
    $c->stash->{template} = 'default';
    $c->forward('Ajax::V::TT');
}

sub get : Global {
    my ( $self, $c ) = @_;
    $c->res->output('success.');
}

テンプレート作成

以下の内容のroot/default というファイルを作成します。

[% c.prototype.define_javascript_functions %]
<p>
This is a sample of ajax web app using Catalyst.
</p>

<p>
[% c.prototype.link_to_remote('click here and you will see the string "success."',
                  {
                update => 'container',
                url => '/get',
                }) %]
</p>

<div id="container">
</div>

アクセスしてみる

cgiで起動する場合には、以下の様なスクリプトを作成します。

#!/usr/local/bin/perl -w

use strict;
use lib '/path/to/Ajax/lib';
use Ajax;

Ajax->run;

実際にアクセスしてみるとこうなります。リンクをクリックすると、画面遷移せずに「success.」という文字を表示します。

以上で完了です。Javascriptを一切書かずにajaxなウェブアプリが作れる、ということがお分かり頂けたと思います。

xmlHttpRequestで取得したデータを、単純にそのままHTMLにはめ込むだけなので、サーバ側で生成したデータを、Javascript側で何らかの処理をしてからHTMLにはめ込むという用途には使えませんが、単純なajaxアプリであれば十分使えるかと。

↑ newer post older post ↓