1 / 21

prototype.js と Perl で Ajax

prototype.js と Perl で Ajax. 株式会社はてな 伊藤 直也 naoya@hatena.ne.jp http://www.hatena.ne.jp/. Ajax って ?. Asynchronous JavaScript + XML 定義はあいまい JavaScript による動的ロードテクニック 読み方 えーじゃっくす あじゃっくす. Ajax おさらい. クライアント側. サーバー側. HTML + CSS. ブラウザ描写 (DHTML). サーバーサイド アプリケーション. DOM. JavaScript.

nitza
Download Presentation

prototype.js と Perl で Ajax

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. prototype.jsとPerlでAjax 株式会社はてな 伊藤 直也 naoya@hatena.ne.jp http://www.hatena.ne.jp/

  2. Ajaxって? • Asynchronous JavaScript + XML • 定義はあいまい • JavaScriptによる動的ロードテクニック • 読み方 • えーじゃっくす • あじゃっくす

  3. Ajaxおさらい クライアント側 サーバー側 HTML + CSS ブラウザ描写(DHTML) サーバーサイド アプリケーション DOM JavaScript XMLHttpRequest 非同期通信 XML API

  4. Ajaxでありがちなロジック • Hello, World! • XMLHttpRequest で GET + responseText を innerHTML で表示させる • 裏でCUD • XMLHttpRequest で POST、DB にCUD • 画面遷移なしにデータを永続化

  5. Ajax用ライブラリ • ありがちな処理はライブラリで楽をしよう • Survey of AJAX/JavaScript Libraries • http://d.hatena.ne.jp/brazil/20050909/1126254775 • Prototype • Rico • Scriptaculous • MochiKit • SAJAX • Dojo • DWR

  6. Prototype • prototype.js • Sam Stephenson • http://prototype.conio.net/ • 動的アプリケーション用フレームワーク • Ajax向け"にも"色々機能を提供 • Ruby on Rails

  7. prototype.js 特徴 • JavaScript書きが割りと楽になる • 様々な機能 • クラスベースOO • Ajax • DHTML用ユーティリティ • Form • Effect • イベント処理 • DOMの拡張

  8. prototype.js のドキュメント • ない • ソース嫁 • Using prototype.js v1.3.1 • http://www.sergiopereira.com/articles/prototype.js.html

  9. 使い方 • scriptタグで取り込む • コード書く // in html <script type=“text/javascript” src=“/path/to/prototype.js”></script> // in js var 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); } });

  10. PrototypeのAjax機能 • Ajax.Request • Ajax.Updater • Ajax.PeriodicalUpdater

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

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

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

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

  15. 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>

  16. フレームワークとPrototype • script src="prototype.js" より楽に • HTML::Prototype • プラグインによる拡張 • Catalyst::Plugin::Prototype • CGI::Application::Plugin::Prototype • Sledge::Plugin::Prototype • Template::Plugin::Prototype

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

  18. メソッド例 • define_javascript_functions • prototype.js を展開 • link_to_remote • Ajax.Updater として展開 • auto_comple_field • 入力を補完するための JavaScript を展開

  19. TT + HTML::Prototype • Template-Toolkitと一緒に使うと吉 <head> [% prototype.define_javascript_functions %] </head> ... [% prototype.link_to_remote('Hello?', { update => 'result', url => '/hello', }) %]

  20. Catalystでprototype.js • Agile Ajax development with Catalyst • Catalyst::Plugin::Prototype // in your Catalyst application package MyApp; use strict; use Catalyst qw/-Debug Prototype/; ... 1; // in your template [% c.prototype.link_to_remote( ... ) %]

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

More Related