Lightweight_Ajax.ppt

Lightweight Ajax

Jon Allen

http://perl.jonallen.info - [email protected]

with OpenThought

Lightweight Ajax with OpenThought perl.jonallen.info

What is Ajax?

• Web programming technique where we can call server-side code and update content without reloading the complete page– Much richer interaction, closer to a standard GUI

(think of web applications like Gmail)– Potential for greatly improved usability

• Ajax = A---------- J-------- A-- X--– You don’t need to know the gory details– Mmmm, abstraction! :-)


Introducing OpenThought

• Ajax transport library• Written by Eric Andreychek

– http://search.cpan.org/dist/OpenThought – Dual-licensed (GPL / Artistic)

• Very lightweight:– Only 2 files - one Perl, one JavaScript– No external dependencies (good for hosting

accounts!)

• Simple API• Easy to integrate with existing sites


Example - Hello, World!

• Set the content of a <div> to “Hello, World!” when a link is clicked

<html> <head> <script src="OpenThought.js"></script> </head> <body> <a href="#" onClick= "OpenThought.CallUrl('hello.pl');return false;”>Run</a> <div id="result"></div> </body></html>


Hello, World! - Perl code

• Content of HTML elements can be changed by passing a hashref (of element IDs and new content) to the OpenThought param() method:use strict;use warnings;use CGI qw/:standard/;use OpenThought;

my $ot = OpenThought->new();$ot->param( { result => ’Hello, World’ } );

print header; # Standard HTTP ‘text/html’ headerprint $ot->response; # Sends data back to the browser


Passing parameters

• To build something more useful, we need to get data from the web page back to the server<html> <head><script src="OpenThought.js"></script></head> <body> <form onSubmit="return false;"> <input type="text" name="name"> </form> <a href="#" onClick= "OpenThought.CallUrl('hello_name.pl','name'); return false;”>Run</a> <div id="result"></div> </body></html>


Receiving parameters

• Exactly the same as a standard CGI script:

#! /Users/jj/bin/perl

use strict;use warnings;use CGI qw/:standard/;use OpenThought;

my $ot = OpenThought->new();my $name = param('name');

$ot->param( { result => "Hello, $name!” } );

print header;print $ot->response;


More OpenThought features

• Update multiple elements per request– Pass several element IDs in the hashref to param()

• Control order of page updates– The param() function can be called multiple times,

updates will then happen in that order

• Replace or append to existing content– Controlled by settings passed to param()

• Show and hide page elements• Enable and disable form elements


Even more OpenThought features

• Pass arbitrary data to server– Use for session IDs, dispatch tables, etc

OpenThought.CallUrl('alert.pl', 'param=value');

• Change images– Image ID as key, image URL as value

• Give focus to form elements• Load new page• Run JavaScript on client


Running JavaScript code

• Send JavaScript to be executed on the client:

#! /Users/jj/bin/perl

use strict;use warnings;use CGI qw/:standard/;use OpenThought;

my $ot = OpenThought->new();my $name = param('name');

$ot->param( {result=>"Hello, $name!”} );$ot->javascript( qq{alert("$name, you clicked 'Run'");} );

print header;print $ot->response;


GUI development

• Event-driven programming model– When this happens, run that code

• Similar to client-side GUI development– e.g. Perl/Tk, wxWidgets, GTK, etc– Event Loop controlled by browser– Much less “boilerplate code”

• Often a better choice for “web applications” than the MVC frameworks– These are more suitable for content-driven sites,

or those with complex database requirements


Other uses

• “Value-add” enhancement of pages– Loading external data (e.g. RSS feeds)– Manipulating page content (e.g. advertising tags)

• Running these functions asynchronously allows the main page content to render more quickly– Same concept as adding size tags to images– Improves user experience

• Example: Perl syntax highlighting– Non-essential function, time consuming


Perl syntax highlighting

• Perl source code in <pre> tags– May have class specified for CSS rendering

• Would look better highlighted by Perl::Tidy– Quite resource-heavy, slow down page load

• JavaScript triggered by onLoad() handler– Iterates through DOM - getElementsByTagName()– Calls highlighting script as each tag is found

• Download from http://perl.jonallen.info/projects/syntaxhighlighting


Limitations of Ajax

• Processing is transactional– Request -> Response– Request -> Response– and so on…

• What about– Request -> Response1 -> Response2 -> ResponseX– Request -> Partial response -> More data -> Finished

• Useful for progress bars, tailing logfiles, real-time chat, etc.– Anything which needs a continuous data stream


Alternative transport layer - iframes

• OpenThought supports an alternative transport layer, keeping the same API

• Hidden <iframe> elements are used to receive data

• Defined using a JavaScript function:

function OpenThoughtConfigLocal() { this.channel_type = ‘iframe’;}

• Channel type is a global setting – Future versions of OpenThought will allow this to

be changed on a ‘per-request’ basis


Example - progress display

• Update progress display for long-running script <html> <head> <script> function OpenThoughtConfigLocal() { this.channel_type = ‘iframe’; } </script> <script src="OpenThought.js"></script> </head> <body> <a href="#" onClick= "OpenThought.CallUrl(’slow.pl');return false;”>Run</a> <div id=”progress"></div> </body></html>


Progress display - Perl code

• Remember to unbuffer output!

local $| = 1;

my $ot = OpenThought->new();

print header;

for (my $percent = 0; $percent <= 100; $percent += 10) { $ot->param( {progress=>"Working... $percent% completed”} ); print $ot->response; sleep 1;}

$ot->param( {progress=>''} );print $ot->response;


Fin!

Thank you for listening!

Any questions?

Example code can be downloaded from http://perl.jonallen.info/talks

Lightweight_Ajax.ppt

Documents

Transcript of Lightweight_Ajax.ppt