prototype.js と Perl で Ajax

©2005 株式会社はてな　本資料の一部または全部の無断複製・転載を禁じます

prototype.js とPerl で Ajax

株式会社はてな伊藤直也 [email protected]

http://www.hatena.ne.jp/



Ajax って ?Asynchronous JavaScript + XML定義はあいまい

JavaScript による動的ロードテクニック読み方

えーじゃっくすあじゃっくす



Ajax おさらい

JavaScript

XMLHttpRequestサーバーサイドアプリケーション

XML API

非同期通信

HTML + CSS

ブラウザ描写 (DHTML)

クライアント側サーバー側

DOM



Ajax でありがちなロジックHello, World!

XMLHttpRequest で GET + responseText を innerHTML で表示させる

裏で CUDXMLHttpRequest で POST 、 DB に CUD画面遷移なしにデータを永続化



Ajax 用ライブラリありがちな処理はライブラリで楽をしようSurvey of AJAX/JavaScript Libraries

http://d.hatena.ne.jp/brazil/20050909/1126254775

PrototypeRicoScriptaculous

MochiKitSAJAXDojoDWR





Prototypeprototype.js

Sam Stephensonhttp://prototype.conio.net/

動的アプリケーション用フレームワークAjax 向け " にも " 色々機能を提供Ruby on Rails



prototype.js 特徴JavaScript 書きが割りと楽になる様々な機能

クラスベース OOAjaxDHTML 用ユーティリティFormEffectイベント処理DOM の拡張



prototype.js のドキュメントないソース嫁Using prototype.js v1.3.1

http://www.sergiopereira.com/articles/prototype.js.html



使い方script タグで取り込むコード書く

// in html<script type=“text/javascript” src=“/path/to/prototype.js”></script>

// in jsvar Animal = Class.create();Animal.prototype = { initialize : function (name) { this.name = name; }, bark : function () { document.writeln(this.name); }}

var Dog = Class.create();Dog.prototype = (new Animal).extend({ bark : function() { Animal.prototype.bark.apply(this); }});



Prototype の Ajax 機能Ajax.RequestAjax.UpdaterAjax.PeriodicalUpdater



Ajax.RequestAjax なリクエストを飛ばす<a href="new Ajax.Request( '/hello', { parameters : Form.serialize(this.form), asynchronous : 1, onComplete : function(request){ alert(request.responseText); } });">blah blah.</a>



Ajax.Updater特定のエレメントを動的に更新<a href="#" onclick=" new Ajax.Updater( 'result', '/hello', { asynchronous: 1 } ); return false">Hello?</a>

<div id="result"></div>



Ajax.PeriodicalUpdater特定のエレメントを定期的に更新



PeriodicalExecuter + AjaxRequest

定期的にサーバーサイドのデータを更新<script type="text/javascript">new PeriodicalExecuter( function () { new Ajax.Request( '/autosave', { asynchronous: 1, parameters: Form.serialize($('textform')) }) }, 10 );</script>



Ajax 以外でも便利なの多し<script type="text/javascript">var name = $('name'); // getElementById('name');alert($F('age'));Form.selialize($('profile')); // name=...&age=...&sex=...</script>

<form id="profile"><input type="text" id="name" name="name" /><input type="text" id="age" name="age" /><input type="radio" name="sex" value="male" /> male<input type="radio" name="sex" value="famale" /> famale<select name="favorite_language"> <option value="perl">Perl</option> <option value="ruby">Ruby</option> <option value="php">PHP</option></select><input type="submit"></form>



フレームワークと Prototypescript src="prototype.js" より楽にHTML::Prototypeプラグインによる拡張

Catalyst::Plugin::PrototypeCGI::Application::Plugin::PrototypeSledge::Plugin::PrototypeTemplate::Plugin::Prototype



HTML::Prototype各種プラグインの中で使われているJavaScript レスで prototype.jsHTML::Prototype::Useful凝ったこともいくつかできるmy $prototype = HTML::Prototype->new;print $prototype->define_javascript_functions;print $prototype->periodically_call_remote { ... }



メソッド例define_javascript_functions

prototype.js を展開link_to_remote

Ajax.Updater として展開auto_comple_field

入力を補完するための JavaScript を展開



TT + HTML::PrototypeTemplate-Toolkit と一緒に使うと吉<head>[% prototype.define_javascript_functions %]</head>

...

[% prototype.link_to_remote('Hello?', { update => 'result', url => '/hello',}) %]



Catalyst で prototype.js

Agile Ajax development with CatalystCatalyst::Plugin::Prototype

// in your Catalyst applicationpackage MyApp;use strict;use Catalyst qw/-Debug Prototype/;

...

1;

// in your template[% c.prototype.link_to_remote( ... ) %]



まとめPrototype を使うと JavaScript で楽できるAjax もフレームワークから使う時代今日紹介し切れなかったいろんな機能も一杯Perl プログラマも JS を書こう !


Documents

prototype.js と Perl で Ajax