JavaScript and CGI Talking to Each Other

Sometimes it is desirable to publish information on a web page that can only be provided by a program running on the server.

Using Server Side Includes is a common way of doing this.

But sometimes SSI is not feasible. The hosting company may have configured their server so SSI can't run scripts, for example. And, if information needs to be passed to the CGI program, it can not be done with an SSI tag URL.

Using JavaScript is a solution.

With JavaScript on a web page, information can be passed to a CGI program, and the CGI program can return JavaScript code that contains the required information. The CGI program can itself write JavaScript code that assigns information to JavaScript variables before it sends the code back to the web page.

Assigning the number of files in a directory to a JavaScript variable will be our example.

The instructions consist of four steps:

1. Create a JavaScript variable to hold the number.

2. Call the CGI program with certain information.

3. Launch the CGI program to create and return certain JavaScript code.

4. Print the number on the web page with JavaScript.

Using the example as a guide, many different JavaScript-CGI interactions can be created.

Step One — Create a JavaScript variable to hold the number

A JavaScript variable needs to be created that can be used to store the number of files in the directory. Do it this way:

<script 
   type="text/javascript" 
   language="JavaScript">
<!--
NumberOfFiles = 0;
//-->
</script>

Step Two — Call the CGI program with certain information

The next block of JavaScript calls the CGI program, telling the CGI program the name of the variable to hold the number of files and the location of the directory we're interested in.

The location of the directory needs to be either the complete server path to the directory or the path relative to the location of the CGI program. We'll assume we're interested in a directory named "datadir", a subdirectory of where the script is installed.

Here is the JavaScript to talk to the CGI program:

<script 
   src="/cgi-bin/script.cgi?NumberOfFiles&datadir" 
   type="text/javascript" 
   language="JavaScript">
</script>

Step Three — Launch the CGI program to create and return certain JavaScript code

When the CGI program is launched, it:

1. Reads the information the JavaScript sent.

2. Grabs a file list from the directory.

3. Counts the number of files.

4. Creates JavaScript code that assigns the number to the JavaScript variable.

5. Sends the code to the JavaScript on the web page.

This Perl CGI program can do the job (assuming Unix/Linux):

#!/usr/bin/perl
use strict;
my %In = ();
my $NumFiles = 0;
my $JScode = '';

# 1. Read what the JavaScript sent.
($In{var},$In{loc}) = split /&/,$ENV{QUERY_STRING};

# 2. Grab a files listing from the directory 
# 3. and count the number of files.
if(opendir D,$In{loc})
{
	my @d = grep ! /^\.\.?$/,readdir D;
	closedir D;
	$NumFiles = @d;
}

# 4. Create JavaScript code to send back.
$JScode = "$In{var}=$NumFiles;";

# 5. Send code to the JavaScript on the web page.
print "Content-type: text/javascript\n\n";
print $JScode;
### end of script ###

Step Four — Print the number onto the web page with JavaScript

This JavaScript block then prints the number of files onto the web page:

<script 
   type="text/javascript" 
   language="JavaScript">
<!--
document.write('The number of files is: ' + NumberOfFiles);
//-->
</script>

Putting it together —

You now have one CGI program on your server and three blocks of JavaScript.

The JavaScript can be in different parts of the web page, so long as the first block is in the source code somewhere above the second block, and the second block somewhere above the third. Or, all three blocks can be together in one place, like this:

<script 
   type="text/javascript" 
   language="JavaScript">
<!--
NumberOfFiles = 0;
//-->
</script>

<script 
   src="/cgi-bin/script.cgi?NumberOfFiles&datadir" 
   type="text/javascript" 
   language="JavaScript">
</script>

<script 
   type="text/javascript" 
   language="JavaScript">
<!--
document.write('The number of files is: ' + NumberOfFiles);
//-->
</script>

The first block of JavaScript creates a variable. The second calls the CGI program to assign the files count to the variable. And the third block prints the variable's value, the number of files.

Using this basic procedure of getting JavaScript and CGI to talk to each other, additional JavaScript-CGI interactions can be created.

Will Bontrager