Ajax : Comunicação entre um script Perl e um JavaScript

Julho 2017

Ajax : Comunicação entre um script Perl e um JavaScript



Para realizar a comunicação entre Perl e JavaScript de maneira elegante e interativa, ou seja, para poder recarregar uma parte, da página HTML padrão, da página inteira, acionamos a tecnologia Ajax, utilizando o objeto Javascript XMLHttprequest.

O objeto XMLHttpRequest


Este objeto Javascript permite colocar em ação AJAX, como também permite a comunicação dinâmica entre um cliente e um servidor. Utilizamos, por exemplo esta técnica, se quisermos recuperar dados de uma base de dados de um script JavaScript, situados no servidor.

Nós não detalharemos este objeto, pois existe numerosos documentos na internet, nós iremos realizar um exemplo concreto com a página HTML, um script JavaScript e um script Perl. Nosso documento HTML integrará um campo texto, em que o conteúdo será enviado ao script Perl para ser modificado, depois reenviado para ser inserido pelo script em JavaScript na página HTML, dinamicamente. Cabe a você modificar esta base para fazer algo interessante !

Para aprofundar o objeto XMLHttpRequest, eis alguns links:
- AJAX no site Wikipédia
- Tudo sobre JavaScript
- Exemplos concretos de XMLHttpRequest
- Utilização do objeto XMLHttpRequest no ccm.net

O exemplo

Realização


O exemplo é realizado pelo diretório padrão do Apache: /var/www . Pense em instalar o módulo GGI.pm e em dar os direitos de execução ao script Perl. Não se esqueça de especificar ao Apache que você tem cgi para executar com este tipo de diretiva :

         
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 >        

A página HTML


<  !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"        
  "http://br.ccm.net/faq/3196-ajax-comunicacao-entre-um-script-perl-e-um-javascript"  >        
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >        

< head >        
 < title >Como lançar um script Perl a partir de 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="Vá e escreva um texto,  depois pressione o botão..." / >        
 < input id="callPerl" type="submit" value="Vas-y script Perl !" onclick="call_server.launch();" / >        
 < br / >        
 < br / >        
 < div id="resultat" >< /div >        
< /body >        
< /html >

O script Javascript


//Construtor da  "classe" Callserver       

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

//Cria-se o objeto 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;        
 }        
}        

//Envia-se os dados ao servidor e recebe-se a resposta em modo sincronizado no 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;        
 }        
}        

//Injecta-se a resposta do servidor na  div nomeada resultat       

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

//Execução da  Javascript     

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

//Criação do objeto call_server       

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

O script Perl


#!/usr/bin/perl        

use strict;        
use warnings;        
use CGI;        

#Criamos  nosso objeto que inicializa o  CGI e cria uma camada de abstração envio/recepção para comunicar com nosso cliente    

package Ajax;        

#Construtor da 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étodo que nos permite receber os dados do cliente e re-enviá-los sob forma de quadro    

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

#Método que envia dados ao cliente        

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

#Nosso incrível método que transforma texto    

sub change        
{        
 my ($self) = shift;        
         
 my $result = "Seu texto transfromado: ";        
         
 my @texte = $self->getDataFromClient();        
         
 foreach(@texte)        
 {        
  $result = $result.$_."Adição inútil somente para mostrar que isto funciona";        
 }        
         
 $self->sendResultToClient($result);        
}        

1;        

## Início do script Perl ##        

my $ajax = Ajax->new();        

$ajax->change();        




Veja também

Artigo original publicado por . Tradução feita por ninha25. Última modificação: 12 de março de 2010 às 11:30 por pintuda.
Este documento, intitulado 'Ajax : Comunicação entre um script Perl e um JavaScript ', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.