Ajax : Comunicação entre um script Perl e um JavaScript
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();
Assine nossa newsletter!
