Prototype js perl ajax
Download
1 / 21

prototype.js と Perl で Ajax - PowerPoint PPT Presentation


  • 124 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' prototype.js と Perl で Ajax' - nitza


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Prototype js perl ajax

prototype.jsとPerlでAjax

株式会社はてな

伊藤 直也 [email protected]

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


Ajaxって?

  • Asynchronous JavaScript + XML

  • 定義はあいまい

    • JavaScriptによる動的ロードテクニック

  • 読み方

    • えーじゃっくす

    • あじゃっくす


Ajaxおさらい

クライアント側

サーバー側

HTML + CSS

ブラウザ描写(DHTML)

サーバーサイド

アプリケーション

DOM

JavaScript

XMLHttpRequest

非同期通信

XML API


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

  • prototype.js

    • Sam Stephenson

    • http://prototype.conio.net/

  • 動的アプリケーション用フレームワーク

  • Ajax向け"にも"色々機能を提供

  • Ruby on Rails


Prototype js
prototype.js 特徴

  • JavaScript書きが割りと楽になる

  • 様々な機能

    • クラスベースOO

    • Ajax

    • DHTML用ユーティリティ

    • Form

    • Effect

    • イベント処理

    • DOMの拡張


Prototype js1
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
PrototypeのAjax機能

  • Ajax.Request

  • Ajax.Updater

  • Ajax.PeriodicalUpdater


Ajax request
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>


Ajax updater
Ajax.Updater

  • 特定のエレメントを動的に更新

<a href="#" onclick="

new Ajax.Updater(

'result',

'/hello',

{ asynchronous: 1 }

);

return false">Hello?</a>

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


Ajax periodicalupdater
Ajax.PeriodicalUpdater

  • 特定のエレメントを定期的に更新


Periodicalexecuter ajaxrequest
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>


Prototype1
フレームワークとPrototype

  • script src="prototype.js" より楽に

  • HTML::Prototype

  • プラグインによる拡張

    • Catalyst::Plugin::Prototype

    • CGI::Application::Plugin::Prototype

    • Sledge::Plugin::Prototype

    • Template::Plugin::Prototype


Html 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
TT + HTML::Prototype

  • Template-Toolkitと一緒に使うと吉

<head>

[% prototype.define_javascript_functions %]

</head>

...

[% prototype.link_to_remote('Hello?', {

update => 'result',

url => '/hello',

}) %]


Catalyst prototype js
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を書こう!


ad