Calling a Perl Script from a web page using JavaScript

Ever wanted to include some dynamic data on your web page, but didn't want to (or restrictions didn't allow you to) code the entire page server-side? There is actually a pretty straightforward way to accomplish this, by making the Perl script return valid JavaScript and then calling the Perl script as if it were JavaScript. Confused? I was too until I developed a working example of how it works.

For this example, I will combine the random quotation Perl script I outlined in a previous post with cowsay, also outlined in a previous post on this blog. The Perl script will call the random quotation script, pipe it through cowsay, then return the output in JavaScript to be executed by the browser.

First, the Perl code; I'll call it "cow_quote.pl":

#!/usr/bin/perl 

use strict;
my $line;

# Get a random quotation from www.quotationspage.com
# using random_quote.pl, then pipe the output through
# the cowsay program, limiting the output to 30 columns
my $cowsay = `perl random_quote.pl | cowsay -W 30`;

# Substitute all occurrences of the backslash ("\")
# with the HTML escape code ("\")
$cowsay =~ s/\\/\/g;

# Substitute all occurrences of the space (" ")
# with the HTML escape code (" ")
$cowsay =~ s/ / /g;

# Split the resulting cowsay text into individual lines
my @cowsay = split(/\n/, $cowsay);

# Declare the Internet Media (MIME) type  - The browser
# REQUIRES this to be declared; without it this example
# WILL NOT WORK!
print "Content-type: text/html\n\n";

# Using CSS, declare a style for our DIV tag, setting the
# font to bold courier, with the size of the font being
# 83% of the normal size.  This will permit us to utilize
# all 30 columns of the cowsay text in the narrow sidebar. 
print "document.write(\"<style>\\n\");\n";
print "document.write(\"  \#cowsay\\n\");\n";
print "document.write(\"  {\\n\");\n";
print "document.write(\"    font-family:courier;\\n\");\n";
print "document.write(\"    font-weight:bold;\\n\");\n";
print "document.write(\"    font-size:83%;\\n\");\n";
print "document.write(\"  }\\n\");\n";
print "document.write(\"</style>\\n\");\n";

# Create the cowsay DIV tag, and output the multiple lines
# of the cowsay text, separating each line with an HTML
# break, then close the DIV tag.
print "document.write(\"<div id=\'cowsay\'>\\n\");\n";
foreach $line (@cowsay)
{
  print "document.write(\"  $line\\n\");\n";
  print "document.write(\"  <br />\\n\");\n";
}
print "document.write(\"</div>\\n\");\n";

As you can see, all the output from the Perl script is in JavaScript, allowing the code to be executed client-side by the browser.

Now all that we need to do is to call the script from the web page, using the following code:

<script type="text/javascript" src="http://yourdomain.com/cgi-bin/cow_quote.pl"> 
</script>

Of course, you would substitute your domain for the one listed above.

This is by no means the limit of what could be done utilizing this method. As long as the output is in JavaScript, the sky is the limit!

The Perl source for cow_quote.pl is available here. In order for function properly, it does require that cowsay and random_quote.pl (and it's dependent Perl modules) be installed on your server.