JavaScript

• Bookmarklets and CGI
• Data Exchange

Bookmarklets and CGI

• Recap
  • Bookmarklets are JavaScripts saved as bookmarks
  • Execute in the browser's frontmost window
  • Can interact with object or data in this window
• Example
  • Create and store comments on web pages
  • Retrieve them later when you visit the pages again

Example - CGI

• Accepts an URL and a comment and records them
• Retrieves a comment when given an URL

• Declarations

  use CGI;
  
  my $database = "comment_db";
  my $scriptUrl = "/~me/205/bookmarklets/comments.cgi";
  
  my $q = new CGI;
  my $url = $q->param("url");
  my $comment;

Example - CGI

• Branch off to appropriate handler

  if ($q->param("save")) {
      $comment = $q->param("comment") || "";
      saveComment($url, $comment);
  } else {
      $comment = getComment($url);
  }

Example - CGI

• Generate a comment form

  print $q->header("text/html"),
      $q->start_html(-title => $url, -bgcolor => "yellow"),
      $q->start_form({ action => $scriptUrl }),
      $q->hidden("url"),	# inherits value
      $q->textarea(-name => "comment", -cols => 30,
          -rows => 8, -value => $comment, -wrap),
      $q->p(
          $q->submit(-name => "save", -value => "Save Comment")),
      $q->end_form,
      $q->end_html;

Example -CGI

• Retrieve a comment from the database

  sub getComment {
      my $url = shift;
      my %db;
      
      dbmopen(%db, "comment_db", 0666) ||
          die "unable to open comment database";
      requestLock("comment_db"),
      my $comment = $db{$url};
      releaseLock("comment_db"),
      dbmclose(%db);
      
      return $comment;	
  }

Example - CGI

• Save a comment to the database

  sub saveComment {
      my ($url, $comment) = @_;
      my %db;
      
      dbmopen(%db, "comment_db", 0666) ||
          die "unable to open comment database";
      requestLock("comment_db"),
      $db{$url} = $comment;
      releaseLock("comment_db"),
      dbmclose(%db);
  }

Example - JavaScript

• JavaScript that invokes this CGI script

  url = document.location.href;
  open('http://localhost/~me/205/bookmarklets/comments.cgi?url=' + escape(url),
      'commentlet', 'width=400,height=250'); 
  void(0);

• As a bookmarklet, this looks like

  <a href="javascript:url = document.location.href; open('http://localhost/~me/205/bookmarklets/comments.cgi?url=' + escape(url), 'commentlet', 'width=400,height=250'); void(0);">Commentlet</a>

Example - Usage

• Save the bookmarklet as a bookmark
• Visit a web site and select the bookmarklet
• Browser displays another window

  

• Enter a comment and save it
• On returning to the page, the window will contain your original comment
• Comments can be shared with other users!

Data Exchange

• Web Distributed Data Exchange (WDDX)
• Common data format various languages can use to represent basic data types
• XML-based, but details of XML processing hidden
• WDDX interfaces available for JavaScript, Perl, ASP, ColdFusion, and PHP

How Does it Work?

Web Distributed Data Exchange

• Language and platform neutral representation format
• Common application data structures
  • Strings
  • Numbers
  • Booleans
  • Date-time values
  • Arrays
  • Associative arrays
  • Recordsets

Usage Scenario

• Server-to-browser data exchange

  

Usage Scenario - Example

• Perl module for WDDX (WDDX.pm) will convert Perl data structures into WDDX objects

  use WDDX;
  my $wddx = new WDDX;
  my $now = time;
  my $wddx_now = $wddx->datetime($now);
  
  print $wddx_now->as_javascript("serverTime");

• JavaScript functions to interpret WDDX objects (wddx.js)

  <script language="wddx.js"</script>
  
  <script>
  var serverTime = new Date(100,0,5,14,20,39);
  </script>

Online Music Browser

• Consider an interactive form that allows users to browse songs available for download
• Users can browse the song database without making additional calls to the web server
• Information maintained in tab-delimited file on server

  Artist Concert Song Venue Date Duration Size Filename
  ...

• Format represented in WDDX as a recordset

Online Music Browser

• User interface of the online music browser

  

• A template describes the user interface

Template

• JavaScript
  • showArtists
  • showConcerts
  • showSongs
  • showSongInfo
• HTML
  • Lists
  • Song Information
  • Download
• JavaScript
  • Song data (variable)

Song Data

• JavaScript object generated from server-side recordsets

  data = new WddxRecordSet();
  data.artist = new Array();
  data.artist[0] = "The Grateful Dead";
  data.artist[1] = "The Grateful Dead";
  data.artist[2] = "Widespread Panic";
  ...

• Recordset has a property for each field in the data file
• Each property of the recordset is an array with as many entities as there are rows in the file

Building the Lists

• Start building lists with artists

  buildList(document.mbrowser.artistList, 
      "artist", "", "");

• Concert and song lists initially empty
• When an artist is selected, the concert list is populated

  buildList(document.mbrowser.concertList, 
      "concert", "artist", selected);

• When a concert is selected, the song list is filled

  buildList(document.mbrowser.artistList, 
      "song", "concert", selected);

Building the Lists

• buildList takes as parameters
  • select list object
  • name of the field to pull data from
  • name and value of field to use as a condition

  function buildList(list, field, 
      conditionField, conditionValue) {
  ...
  }

Parsing Data File into a Recordset

• CGI script reads the song data file
• Parses it into a WDDX::Recordset object
• Adds JavaScript to the template

  use WDDX;
  use HTML::Template;
  
  my $DATA_FILE = ...
  my $TEMPLATE = ...
  
  my $wddx = new WDDX;
  my $rec = build_recordset($wddx, $DATA_FILE);
  
  my $js_rec = $rec->as_javascript("data");
  
  my $tmpl = new HTML::Template(filename => $TEMPLATE);
  my $tmpl->param(song_data => %js_rec);
  print $tmpl->output;

Building a Recordset

• build_recordset takes a WDDX object and a data file
• Reads field names from the data file
• Associates a type with each field (here, we use strings)
• Create a WDDX recordset
• Add records to the WDDX recordset

  sub build_recordset {
  ...
  }

References

• Web Distributed Data Exchange
  • http://www.wddx.org/
• Allaire, The Emerging Distributed Web
  • http://www.allaire.com/handlers/index.cfm?id=4683&method=full