Your SlideShare is downloading. ×
  • Like
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply




  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Lightweight Ajax Jon Allen - with OpenThought
  • 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 don’t need to know the gory details
      • Mmmm, abstraction! :-)
  • 3. Introducing OpenThought
    • Ajax transport library
    • Written by Eric Andreychek
      • 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 <div> to “Hello, World!” when a link is clicked
    <html> <head> <script src=&quot;OpenThought.js&quot;></script> </head> <body> <a href=&quot;#&quot; onClick= &quot;OpenThought.CallUrl('');return false;”>Run</a> <div id=&quot;result&quot;></div> </body> </html>
  • 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->new(); $ot->param( { result => ’Hello, World’ } ); print header; # Standard HTTP ‘text/html’ header print $ot->response; # 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
    <html> <head><script src=&quot;OpenThought.js&quot;></script></head> <body> <form onSubmit=&quot;return false;&quot;> <input type=&quot;text&quot; name=&quot; name &quot;> </form> <a href=&quot;#&quot; onClick= &quot;OpenThought.CallUrl('', 'name' ); return false;”>Run</a> <div id=&quot;result&quot;></div> </body> </html>
  • 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->new(); my $name = param('name'); $ot->param( { result => &quot;Hello, $name!” } ); print header; print $ot->response;
  • 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('', 'param=value');
    • 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->new(); my $name = param('name'); $ot->param( {result=>&quot;Hello, $name!”} ); $ot->javascript( qq{alert(&quot;$name, you clicked 'Run'&quot;);} ); print header; print $ot->response;
  • 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 <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
  • 14. 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
  • 15. 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
  • 16. Example - progress display
    • Update progress display for long-running script
    <html> <head> <script> function OpenThoughtConfigLocal() { this.channel_type = ‘iframe’; } </script> <script src=&quot;OpenThought.js&quot;></script> </head> <body> <a href=&quot;#&quot; onClick= &quot;OpenThought.CallUrl(’');return false;”>Run</a> <div id=”progress&quot;></div> </body> </html>
  • 17. 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=>&quot;Working... $percent% completed”} ); print $ot->response; sleep 1; } $ot->param( {progress=>''} ); print $ot->response;
  • 18. Fin! Thank you for listening! Any questions? Example code can be downloaded from