How to Create a Simple Perl AJAX Application

An Easy Tutorial on Working With AJAX and Perl

Aug 2, 2009
Mark Alexander Bain

How to Create a Simple Perl AJAX Application - Mark Alexander Bain

AJAX is a simple technique that allows any programmer to create applications that can be used as part of web pages. Perl is no exception and AJAX works well with it

It is always worth repeating the fact that AJAX (Asynchronous Javascript and XML) is not a new programming language, it is a technique. It is a technique that allows a web page designer to use a Javascript to communicate with a program held on the web server, and then use the response from the server within their web page. This, of course, is a major advantage for any Perl programmers. It means that the Perl programmer can:

build a Perl application on a web server
incorporate the Perl application into a web page (or even many web pages)

And the general technique is always the same:

the Javascript web page sends a request to the web server
the web server processes the request and then replies to the web page
the web page processes or displays the response from the web server

The starting point for the programmer is, therefore, to create a Perl CGI application.

Creating a Simple Perl CGI Web Page

The first line of a CGI application must always be the shebang line. This tells the web server where to locate the Perl interpreter:

#!c:/Perl/bin/perl

The second line of a CGI application should then output the page's HTML header to the web browser:

print "Content-type: text/html\n\n";

Once those two compulsory lines are in place the programmer can start building the main functionality of the application. In this example the application will calculate the times for sunrise and sunset for the current day. Therefore the correct module must be used. In this case it's the Astro Sunrise module:

use Astro::Sunrise;

This requires an input of the latitude and longitude of a location on the surface of the Earth:

$latitude = 52.62;

$longitude = -0.48;

From this the times for sunrise and sunset can be produced:

$sun_rise = sun_rise ($longitude, $latitude);

$sun_set = sun_set ($longitude, $latitude);

And then returned:

print $sun_rise . " - " . $sun_set;

If this is saved into a file in the server's CGI directory then it can be tested (as seen in figure 1 at the bottom of this article). And then it is ready to be turned into an AJAX application.

Turning a Perl Script into an AJAX Application

Every AJAX application starts in the same way - it creates an XML HTML request object:

<head>

var XMLHttp;

if(navigator.appName == "Microsoft Internet Explorer") {

XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");

} else {

XMLHttp = new XMLHttpRequest();

}

And every AJAX application requires a function that will:

send a request to the server
wait until the server has completed its processing of the request
display the results

The function will call the simple Perl CGI application already saved on the server:

function show_sun_rise () {

XMLHttp.open("GET", "/cgi-bin/simple_ajax.pl", true);

XMLHttp.onreadystatechange = function() {

if (XMLHttp.readyState == 4) {

document.getElementById( 'time_div' ).innerHTML = XMLHttp.responseText;

}

XMLHttp.send(null);

}

</script>

</head>

Then a little HTML is required. In this example it defines a button (which will call the request function) and it also defines an area that will be used to display the result:

<body>

Click the button to see the times for sunrise and sunset

</div>

</body>

The end result of this simple application can be seen in figure 2.

Adding Input Variables to the Perl CGI Web Page

At the moment longitude and latitude have been hard coded into the script. However, it is much more useful allow the users to set these. Fortunately user inputs are easy to handle in Perl (as discussed in How to Use a Form in a Perl CGI Web Page) and so it is just a matter of loading another module:

use CGI qw/:standard/;

And then handling the inputs (if there are any):

if (param('latitude')) {$latitude = param('latitude')}

else {$latitude = 52.62}

if (param('longitude')) {$longitude = param('longitude')}

else {$longitude = -0.48}

Again this should be test before moving on (as shown in figure 3).

The Completed AJAX Application

The AJAX application will now need a small amount of modification. It will require input boxes for the user to enter their latitude and longitude:

Latitude<input id=latitude><br />

Longitude<input id=longitude><br />

And the function for sending the request will have to be altered so that it adds the longitude and latitude as part of the query string:

function show_sun_rise () {

var query_string = "?latitude=" + document.getElementById('latitude').value;

query_string = query_string + "&longitude=" + document.getElementById('longitude').value;

XMLHttp.open("GET", "/cgi-bin/simple_ajax.pl" + query_string, true);

XMLHttp.onreadystatechange = function() {

if (XMLHttp.readyState == 4) {

document.getElementById( 'time_div' ).innerHTML = XMLHttp.responseText;

}

XMLHttp.send(null);

}

This complete AJAX application will (as shown in figure 4) be able to:

accept inputs from a user
format the inputs and send them to a web server
process the input on the server
return a result from the server to the web page
display the results on the web page

And all this done through the power of Perl programming (with a little help from Javascript).

Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...