prototype.js と perl で ajax
Post on 14-Feb-2016
70 Views
Preview:
DESCRIPTION
TRANSCRIPT
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
prototype.js とPerl で Ajax
株式会社はてな伊藤 直也 naoya@hatena.ne.jp
http://www.hatena.ne.jp/
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Ajax って ?Asynchronous JavaScript + XML定義はあいまい
JavaScript による動的ロードテクニック読み方
えーじゃっくすあじゃっくす
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Ajax おさらい
JavaScript
XMLHttpRequestサーバーサイドアプリケーション
XML API
非同期通信
HTML + CSS
ブラウザ描写 (DHTML)
クライアント側 サーバー側
DOM
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Ajax でありがちなロジックHello, World!
XMLHttpRequest で GET + responseText を innerHTML で表示させる
裏で CUDXMLHttpRequest で POST 、 DB に CUD画面遷移なしにデータを永続化
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Ajax 用ライブラリありがちな処理はライブラリで楽をしようSurvey of AJAX/JavaScript Libraries
http://d.hatena.ne.jp/brazil/20050909/1126254775
PrototypeRicoScriptaculous
MochiKitSAJAXDojoDWR
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Prototypeprototype.js
Sam Stephensonhttp://prototype.conio.net/
動的アプリケーション用フレームワークAjax 向け " にも " 色々機能を提供Ruby on Rails
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
prototype.js 特徴JavaScript 書きが割りと楽になる様々な機能
クラスベース OOAjaxDHTML 用ユーティリティFormEffectイベント処理DOM の拡張
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
prototype.js のドキュメントないソース嫁Using prototype.js v1.3.1
http://www.sergiopereira.com/articles/prototype.js.html
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
使い方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); }});
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Prototype の Ajax 機能Ajax.RequestAjax.UpdaterAjax.PeriodicalUpdater
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Ajax.RequestAjax なリクエストを飛ばす<a href="new Ajax.Request( '/hello', { parameters : Form.serialize(this.form), asynchronous : 1, onComplete : function(request){ alert(request.responseText); } });">blah blah.</a>
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Ajax.Updater特定のエレメントを動的に更新<a href="#" onclick=" new Ajax.Updater( 'result', '/hello', { asynchronous: 1 } ); return false">Hello?</a>
<div id="result"></div>
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Ajax.PeriodicalUpdater特定のエレメントを定期的に更新
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
PeriodicalExecuter + AjaxRequest
定期的にサーバーサイドのデータを更新<script type="text/javascript">new PeriodicalExecuter( function () { new Ajax.Request( '/autosave', { asynchronous: 1, parameters: Form.serialize($('textform')) }) }, 10 );</script>
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
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>
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
フレームワークと Prototypescript src="prototype.js" より楽にHTML::Prototypeプラグインによる拡張
Catalyst::Plugin::PrototypeCGI::Application::Plugin::PrototypeSledge::Plugin::PrototypeTemplate::Plugin::Prototype
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
HTML::Prototype各種プラグインの中で使われているJavaScript レスで prototype.jsHTML::Prototype::Useful凝ったこともいくつかできるmy $prototype = HTML::Prototype->new;print $prototype->define_javascript_functions;print $prototype->periodically_call_remote { ... }
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
メソッド例define_javascript_functions
prototype.js を展開link_to_remote
Ajax.Updater として展開auto_comple_field
入力を補完するための JavaScript を展開
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
TT + HTML::PrototypeTemplate-Toolkit と一緒に使うと吉<head>[% prototype.define_javascript_functions %]</head>
...
[% prototype.link_to_remote('Hello?', { update => 'result', url => '/hello',}) %]
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
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( ... ) %]
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
まとめPrototype を使うと JavaScript で楽できるAjax もフレームワークから使う時代今日紹介し切れなかったいろんな機能も一杯Perl プログラマも JS を書こう !
top related