Ajax: communication between JavaScript and Perl scripting

October 2016

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 customer data   

sub getDataFromClient       
 my ($self) = shift;       
 return $self->{CGI}->param("keywords");       

# Method that sends data to the client     

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.

Related :

This document entitled « Ajax: communication between JavaScript and Perl scripting » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.