Lightweight Ajax

1
Lightweight Ajax
with OpenThought
Jon Allen
http//perl.jonallen.info - jj_at_jonallen.info
2
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 dont need to know the gory details
• Mmmm, abstraction! -)

3
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

4
Example - Hello, World!

• Set the content of a ltdivgt to Hello, World!
  when a link is clicked

lthtmlgt ltheadgt ltscript src"OpenThought.js"gtlt
/scriptgt lt/headgt ltbodygt lta href""
onClick "OpenThought.CallUrl('hello.pl')re
turn falsegtRunlt/agt ltdiv id"result"gtlt/divgt
lt/bodygt lt/htmlgt
5
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-gtnew() ot-gtparam( result gt
Hello, World ) print header
Standard HTTP text/html header print
ot-gtresponse Sends data back to the browser
6
Passing parameters

• To build something more useful, we need to get
  data from the web page back to the server

lthtmlgt ltheadgtltscript src"OpenThought.js"gtlt/scri
ptgtlt/headgt ltbodygt ltform onSubmit"return
false"gt ltinput type"text" name"name"gt
lt/formgt lta href"" onClick
"OpenThought.CallUrl('hello_name.pl','name')
return falsegtRunlt/agt ltdiv
id"result"gtlt/divgt lt/bodygt lt/htmlgt
7
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-gtnew() my
name param('name') ot-gtparam( result gt
"Hello, name! ) print header print
ot-gtresponse
8
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

9
Even more OpenThought features

• Pass arbitrary data to server
• Use for session IDs, dispatch tables, etc
• OpenThought.CallUrl('alert.pl',
  'paramvalue')
• Change images
• Image ID as key, image URL as value
• Give focus to form elements
• Load new page
• Run JavaScript on client

10
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-gtnew() my
name param('name') ot-gtparam(
resultgt"Hello, name! ) ot-gtjavascript(
qqalert("name, you clicked 'Run'") ) print
header print ot-gtresponse
11
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

12
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

13
Perl syntax highlighting

• Perl source code in ltpregt tags
• May have class specified for CSS rendering
• Would look better highlighted by PerlTidy
• 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/s
  yntaxhighlighting

14
Limitations of Ajax

• Processing is transactional
• Request -gt Response
• Request -gt Response
• and so on
• What about
• Request -gt Response1 -gt Response2 -gt ResponseX
• Request -gt Partial response -gt More data -gt
  Finished
• Useful for progress bars, tailing logfiles,
  real-time chat, etc.
• Anything which needs a continuous data stream

15
Alternative transport layer - iframes

• OpenThought supports an alternative transport
  layer, keeping the same API
• Hidden ltiframegt 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

16
Example - progress display

• Update progress display for long-running script

lthtmlgt ltheadgt ltscriptgt function
OpenThoughtConfigLocal()
this.channel_type iframe
lt/scriptgt ltscript src"OpenThought.js"gtlt/scrip
tgt lt/headgt ltbodygt lta href"" onClick
"OpenThought.CallUrl(slow.pl')return
falsegtRunlt/agt ltdiv idprogress"gtlt/divgt
lt/bodygt lt/htmlgt
17
Progress display - Perl code

• Remember to unbuffer output!

local 1 my ot OpenThought-gtnew() print
header for (my percent 0 percent lt 100
percent 10) ot-gtparam(
progressgt"Working... percent completed )
print ot-gtresponse sleep 1 ot-gtparam(
progressgt'' ) print ot-gtresponse
18
Fin!
Thank you for listening!
Any questions? Example code can be downloaded
from http//perl.jonallen.info/talks