• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
PerlでAJAX(.ppt)
 

PerlでAJAX(.ppt)

on

  • 1,454 views

 

Statistics

Views

Total Views
1,454
Views on SlideShare
1,452
Embed Views
2

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    PerlでAJAX(.ppt) PerlでAJAX(.ppt) Presentation Transcript

    • prototype.js と Perl で Ajax 株式会社はてな 伊藤 直也 naoya@hatena.ne.jp 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 で表示させる
      • 裏でCUD
        • XMLHttpRequest で POST、DB にCUD
        • 画面遷移なしにデータを永続化
    • Ajax 用ライブラリ
      • ありがちな処理はライブラリで楽をしよう
      • Survey of AJAX/JavaScript Libraries
        • http ://d.hatena.ne.jp/brazil/20050909/1126254775
        • Prototype
          • Rico
          • Scriptaculous
        • MochiKit
        • SAJAX
        • Dojo
        • DWR
    • Prototype
      • prototype.js
        • Sam Stephenson
        • http://prototype.conio.net/
      • 動的アプリケーション用フレームワーク
      • Ajax向け"にも"色々機能を提供
      • Ruby on Rails
    • prototype.js 特徴
      • JavaScript書きが割りと楽になる
      • 様々な機能
        • クラスベースOO
        • Ajax
        • DHTML用ユーティリティ
        • Form
        • Effect
        • イベント処理
        • 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 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); } } );
    • Prototype の Ajax 機能
      • Ajax.Request
      • Ajax.Updater
      • Ajax.PeriodicalUpdater
    • Ajax.Request
      • Ajaxなリクエストを飛ばす
      <a href=&quot; new Ajax.Request( '/hello', { parameters : Form.serialize(this.form), asynchronous : 1, onComplete : function(request){ alert(request.responseText); } } ); &quot;>blah blah.</a>
    • Ajax.Updater
      • 特定のエレメントを動的に更新
      <a href=&quot;#&quot; onclick=&quot; new Ajax.Updater( 'result', '/hello', { asynchronous: 1 } ); return false&quot;>Hello?</a> <div id=&quot;result&quot;></div>
    • Ajax.PeriodicalUpdater
      • 特定のエレメントを定期的に更新
    • PeriodicalExecuter + AjaxRequest
      • 定期的にサーバーサイドのデータを更新
      <script type=&quot;text/javascript&quot;> new PeriodicalExecuter ( function () { new Ajax.Request ( '/autosave', { asynchronous: 1, parameters: Form.serialize($('textform')) }) }, 10 ); </script>
    • Ajax 以外でも便利なの多し <script type=&quot;text/javascript&quot;> var name = $('name') ; // getElementById('name'); alert( $F('age') ); Form.selialize($('profile')) ; // name=...&age=...&sex=... </script> <form id=&quot;profile&quot;> <input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot; /> <input type=&quot;text&quot; id=&quot;age&quot; name=&quot;age&quot; /> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot; /> male <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;famale&quot; /> famale <select name=&quot;favorite_language&quot;> <option value=&quot;perl&quot;>Perl</option> <option value=&quot;ruby&quot;>Ruby</option> <option value=&quot;php&quot;>PHP</option> </select> <input type=&quot;submit&quot;> </form>
    • フレームワークと Prototype
      • script src=&quot;prototype.js&quot; より楽に
      • HTML::Prototype
      • プラグインによる拡張
        • Catalyst::Plugin::Prototype
        • CGI::Application::Plugin::Prototype
        • Sledge::Plugin::Prototype
        • Template::Plugin::Prototype
    • HTML::Prototype
      • 各種プラグインの中で使われている
      • JavaScriptレスで prototype.js
      • HTML::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::Prototype
      • Template-Toolkitと一緒に使うと吉
      <head> [% prototype.define_javascript_functions %] </head> ... [% prototype.link_to_remote('Hello?', { update => 'result', url => '/hello', }) %]
    • 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( ... ) %]
    • まとめ
      • Prototype を使うと JavaScript で楽できる
      • Ajax もフレームワークから使う時代
      • 今日紹介し切れなかったいろんな機能も一杯
      • Perl プログラマも JS を書こう !