Ajax : Communication entre un script Perl et JavaScript

Pour faire communiquer du Perl et du Javascript d'une manière élégante et interactive, à savoir, pouvoir recharger une partie d'une page html à défaut de la page entière, on va mettre en place la technologie Ajax en utilisant l'objet Javascript XMLHttprequest.

L'objet XMLHttpRequest

Cet objet Javascript permet de mettre en place AJAX et permet donc de faire communiquer dynamiquement un client et un serveur. On va par exemple utiliser cette technique si on veut récupérer dans un script Javascript des données d'une base de données placées sur le serveur.

Nous ne détaillerons pas cet objet car la documentation abonde sur Internet, nous allons plutôt réaliser un exemple concret avec une page html, un script Javascript et un script Perl. Notre document html intégrera un champ texte, dont le contenu sera envoyé au script Perl pour être modifié, puis renvoyé pour être inséré par le script en javascript dans la page html dynamiquement. A vous de modifier cette base pour en faire quelque chose d'intéressant !

Pour approfondir l'objet XMLHttpRequest, voici quelques liens :
- AJAX sur Wikipédia
- Des exemples concrets sur XMLHttpRequest
- L'objet XMLHttpRequest sur commentcamarche.net

L'exemple

Mise en place

L'exemple est réalisé pour le répertoire par défaut d'apache : /var/www . Penser à installer le module CGI.pm et à donner les droits d'exécution au script perl. N'oubliez pas de spécifier à apache que vous avez des cgi à exécuter avec ce genre de 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 >     

La page HTML

<  !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 >Comment lancer un script Perl depuis 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="Allez y écrivez un texte et appuyez sur le bouton..." / >     
 < input id="callPerl" type="submit" value="Vas-y script Perl !" onclick="call_server.launch();" / >     
 < br / >     
 < br / >     
 < div id="resultat" >< /div >     
< /body >     
< /html >

Le script Javascript

//Constructeur de la "classe" Callserver    

function CallServer ()     
{     
 this.xhr_object;     
 this.server_response;     
      
 this.createXMLHTTPRequest = createXMLHTTPRequest;     
 this.sendDataToServer = sendDataToServer;     
 this.displayAnswer = displayAnswer;     
 this.launch = launch;     
}     


//On crée l'objet XMLHttpRequest     

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;     
 }     
}     

//On envoit des données au serveur et on reçoit la réponse en mode synchrone dans 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;     
 }     
}     

//On injecte la réponse du serveur dans la div nommée resultat    

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

//Exécution du Javascript  

function launch ()     
{     
 this.sendDataToServer(document.getElementById("yourtext").value);     
      
 this.displayAnswer();     
}     

//Création de l'objet call_server    

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

Le script Perl

#!/usr/bin/perl     

use strict;     
use warnings;     
use CGI;     

#On crée notre objet qui initialise le CGI et crée une couche d'abstraction envoi/réception pour communiquer avec notre client    

package Ajax;     

#Constructeur de la classe Ajax    

sub new     
{     
 my($classe) = shift;     
      
 my $self = {};     

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

#Méthode qui nous permet de recevoir les données du client et les renvoit sous forme de tableau     

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

#Méthode qui envoit des données au client     

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

#Notre incroyable méthode qui transforme du texte     

sub change     
{     
 my ($self) = shift;     
      
 my $result = "Votre texte transformé : ";     
      
 my @texte = $self->getDataFromClient();     
      
 foreach(@texte)     
 {     
  $result = $result.$_."Rajout inutile juste pour montrer que ça fonctionne";     
 }     
      
 $self->sendResultToClient($result);     
}     

1;     

## Début du script perl ##     

my $ajax = Ajax->new();     

$ajax->change();     

Ce document intitulé « Ajax : Communication entre un script Perl et JavaScript » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.