Ajax: communication between JavaScript and Perl scripting

January 2017

Ajax (Asynchronous JavaScript and XML) is a programming language which involves JavaScript code, XML data, HTML markup and a server side programming language like ASP. Ajax is used in the development of web applications. Web applications will send data to and retrieve data from server asynchronously without interfering the behavior and the display of the existing page by using Ajax. When the data is submitted using Ajax programming language in Perl, the page does not refresh. To use Ajax from Perl pages, Perl uses CGI functions. XMLHttpRequest object has a vital role in Ajax web development technique. Data is usually retrieved using this object. This JavaScript object creates Ajax and allows calling a server and a client.

To establish communication between Perl and JavaScript in an elegant, interactive manner, for e.g loading a portion of a web page, we can set up the Ajax technology using the Javascript XMLHttprequest object.

XMLHttpRequest object

This JavaScript object is used to create AJAX and therefore allows to dynamically call a client and a server. Using this technique you can, if you want to get a Javascript (data) from a database located on the server.

We will focus on the above subject as there are a lot of information about it on the Internet, we will instead make a concrete example with a html page, a JavaScript script and a Perl script. Our html document will incorporate a text field, the contents of which will be sent to the Perl script to be changed then returned to be inserted by Javascript in the HTML page (dynamically). To you to change the database to do something interesting!

To deepen your knowledge about the XMLHttpRequest object:
[http://en.wikipedia.org/wiki/Ajax_(programming) Ajax programming)


The example is directed to the default directory for Apache: / var / www. Consider installing the module CGI.pm and give execute permissions to the perl script. Be sure to specify to Apache you have to run cgi with such a directive:

ScriptAlias /cgi-bin/ /var/www/cgi-bin/       
< Directory "/var/www/cgi-bin/" >
AllowOverride None
Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
AddHandler cgi-script cgi pl
Order allow,deny
Allow from all
< /Directory >

The HTML page

<  !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"       
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >

< head >
< title >How to launch a Perl script from JavaScript< /title >
< meta http-equiv="content-type" content="text/html;charset=utf-8" / >
< meta name="generator" content="Geany 0.14" / >
< script type="text/javascript" src="/CallServer.js" >< /script >
< /head >
< body >
< input id="yourtext" type="text" size="50" value="Write text an press button..." / >
< input id="callPerl" type="submit" value="Vas-y script Perl !" onclick="call_server.launch();" / >
< br / >
< br / >
< div id="resultat" >< /div >
< /body >
< /html >

The Javascript

/ "class" Callserver      

function CallServer ()

this.createXMLHTTPRequest = createXMLHTTPRequest;
this.sendDataToServer = sendDataToServer;
this.displayAnswer = displayAnswer;
this.launch = launch;

// XMLHttpRequest object

function createXMLHTTPRequest()
this.xhr_object = null;

this.xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject)
this.xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
alert("Your browser doesn't provide XMLHttprequest functionality");

//We send data to the server and it receives the response in synchronous mode from this.server_response

function sendDataToServer (data_to_send)
var xhr_object = this.xhr_object;

xhr_object.open("POST", "/cgi-bin/Server.pl", false);

xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");


if(xhr_object.readyState == 4)
this.server_response = xhr_object.responseText;

// Inject the server response in the div named result

function displayAnswer ()
document.getElementById("resultat").innerHTML = this.server_response;

//Exectute Javascript

function launch ()


//create call_server object

var call_server = new CallServer();

The Perl script


use strict;
use warnings;
use CGI;

#Create our object and initialises the CGI creates a layer of abstraction transmission / reception to contact our customer package Ajax;

# Ajax Class

sub new
my($classe) = shift;

my $self = {};

bless($self, $class);

$self->{CGI} = CGI->new();

print $self->{CGI}->header('text/html;charset=UTF-8;q=0.9,*/*;q=0.8');

return $self;

#Method that allows us to receive client data

sub getDataFromClient
my ($self) = shift;

return $self->{CGI}->param("keywords");

# Method that sends data to the client

sub sendResultToClient
my ($self, $data_to_send) = @_;

print $data_to_send;

# Our fantastic method that changes text

sub change
my ($self) = shift;

my $result = "Your text is transformed : ";

my @text = $self->getDataFromClient();

$result = $result.$_."just to show that it works";



## Start perl script ##

my $ajax = Ajax->new();



Thanks to miramaze for this tip.


Published by jak58. Latest update on October 28, 2016 at 04:15 AM by [Dal].
This document, titled "Ajax: communication between JavaScript and Perl scripting," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).