Ajax: communication between JavaScript and Perl scripting

December 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)

Implementation

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.xhr_object;
this.server_response;

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


// XMLHttpRequest object

function createXMLHTTPRequest()
{
this.xhr_object = null;

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

//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");

xhr_object.send(data_to_send);

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 ()
{
this.sendDataToServer(document.getElementById("yourtext").value);

this.displayAnswer();
}

//create call_server object

var call_server = new CallServer();
call_server.createXMLHTTPRequest();

The Perl script

#!/usr/bin/perl       

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();

foreach(@text)
{
$result = $result.$_."just to show that it works";
}

$self->sendResultToClient($result);
}

1;

## Start perl script ##

my $ajax = Ajax->new();

$ajax->change();

Notes

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.