Jump to content


Ajax+cgi


  • Faça o login para participar
3 replies to this topic

#1 Whitesnake

Whitesnake
  • Visitantes

Posted 24/12/2005, 01:25

Bem, o ajax é uma tecnologia que está sendo utilizada por grandes sites, tendo como maior exemplo o gigante Google, mas bem, não estamos aqui para explicar o que é o Ajax correto? (Se tiver dúvidas leia este artigo transcrito: http://forum.wmonlin...owtopic=132920)
Agora vamos ao que interessa!

1. Resumo
O ajax não é nada mais que uma tecnologia nativa do Javascript, ou seja, não tem nada a ver com o CGI, porém, talvez possa haver dificuldades em implementá-lo a uma página própriamente criada em CGI.
Aqui vou dar um simples exemplo de como deve ser a estrutura de uma página em Perl utilizando do Ajax para organizar todo seu conteúdo. Confesso que é algo meio díficil de se entender, creio que você deva ter um entendimento razoável tanto em Perl como em Javascript para que entenda a lógica desta dinâmica. Alguns comentários ao longo dos códigos talvez possam servir de ajuda.
Mas vamos lá!!

2. Códigos de exemplo
Primeiro criamos o arquivo ajax.cgi, que será a nossa índex para todo o conteúdo, e ao mesmo tempo será o motor do script.

ajax.cgi
#!/usr/bin/perl
print "Content-type:text/html\n\n"; # Imprimimos o cabeçalho
$qs=$ENV{QUERY_STRING}; # Querystring agora armazenada em $qs
$home="/www/meusite/public_html"; # Raíz do sistema/Local dos arquivos para incluir no conteúdo

if(!$qs){ # Se não for requisitado conteudo...

#Imprimimos o 'template' do site, com o menu que definirá seu conteúdo, junto com a 'div' para exibição
print qq|
<html>
<head>
<title>Exemplo Ajax</title>
<style>
A {font-family:Verdana; size: 6pt; color:333333; font-weight:bold; text-decoration:none;}
DIV {font-family:Verdana;  color:333333;}
.loading {background-color:CC0033; font-family:Arial; color:FFFFFF; }
</style>

<script src="../ajax2.js"></script>
</head>
<body>
<table>
<tr><td>
<table>
<tr><td><a href="=01">Link 01</a></td></tr>
<tr><td><a href="=02">Link 02</a></td></tr>
<tr><td><a href="=03">Link 03</a></td><tr>
<tr><td><a href="=04">Link 04</a></td><tr>
<tr><td><a href="=05">Link 05</a></td><tr>
</table>
</td><td valign="top" width="80%" bgcolor="CCCCCC">&nbsp;
<div id="conteudo">Boas-vindas!</div>
</td>
</table>
</body>
</html>
|;
}else{ # Se for...

$qs=~s/x=//;$qs=$home."/".$qs.=".htm"; # Pegamos o nome do arquivo

open(X,$qs) or die $!; # Abrimos
@x=<X>;
close(X);

print @x; # Exibimos

}


Bem, até então temos uma página template comum em CGI, que só se difere das demais porque ao ser executada com uma querystring, esta então poderá servir como o conteúdo, mas o dinamismo do script na prática, começa mesmo no ajax.js:

ajax.js

// Procura o objeto correto para prosseguir com o ajax
try{
    xmlhttp = new XMLHttpRequest();
}catch(ee){
    try{
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        try{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(E){
            xmlhttp = false;
        }
    }
}

function wait_msg(){
    //Exibe o texto carregando no div título
  document.getElementById("conteudo").innerHTML='<div align=right><font class="loading">(carregando...)</font></div>'
}

function carrega(n){
wait_msg();
  xmlhttp.open("GET", "?"+n,true)

//Executada quando o navegador obtiver o código
xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4){
            //Lê o texto
            var texto=xmlhttp.responseText
            //Coloca a div na variável
            var conteudo=document.getElementById("conteudo")
          //Adiciona conteúdo na div
            conteudo.innerHTML=texto
        }
    }
    xmlhttp.send(null)
}

function menuclick(e){
    //Correção para eventos quebrados da Microsoft
    if(typeof(e)=='undefined')var e=window.event
    source=e.target?e.target:e.srcElement
    //Correção para o bug do Konqueror/Safari
    if(source.nodeType==3)source=source.parentNode

    //Obtém o número quebrando a url
    n=source.getAttribute("href").replace(/.*=/,"")

    //Chama o carrega
    carrega(n)

    //Cancela o click (evita a navegação)
    return false
}

function init(){
    //Obtém os links
    var links=document.getElementsByTagName("a")

    //Atribui o evento
    for(var i=0;i<links.length;i++)
        links[i].onclick=menuclick
        init()
}

if(xmlhttp)window.onload=init



Após criado o arquivo, você deverá enviá-lo para a pasta atribuída em $home no arquivo cgi. Para lá também devem ir os arquivos html nomeados conforme os links no cgi.

É só isso! No momento nao tenho exemplos online, mas ja estou reformando um site que pretendo utilizar essa técnica, assim que terminar eu coloco aqui. (y)
Mas por enquanto, espero que tenham entendido e gostado dessa nova técnica que pode ajudar a agilizar e a organizar todo o seu site.
Abraços!

#2 Seraphim

Seraphim

    Novato no fórum

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 29/01/2008, 15:29

Prezado Whitesnake, estou tentando começar a programar com Perl+Ajax, comecei a pesquisar na web e encontrei este tópico, porém notei que a forma que você cria o seu arquivo .cgi (no meu caso .pl), é um pouco diferente, é claro que a forma como está o programa funciona e é correta, porém tenho mais facilidade da seguinte forma (É o ActivePerl 5.8.8, no Windows Vista, com Apache e modperl):

#!/usr/local/bin/perl -w

$|=1;
use strict;
use CGI qw/:standard :html3/;
use lib '../lib';
use global;
print header;

#--------------------#
# Variáveis globais. #
#--------------------#
my ($operacao);
my ($coddepart,$codpesq);

#----------------------------------#
# Variáveis de conexão e operação. #
#----------------------------------#
$operacao = param('operacao');
$coddepart = param('coddepart');
$codpesq = param('codpesq');

sub CabecalhoHTML {
#-----------------------------------------#
# Apresentação da primeira parte da tela. #
#-----------------------------------------#

print <<Bloco;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Relat&oacute;rios e Avalia&ccedil;&otilde;es - Departamento de Pesquisa</title>
<link rel=STYLESHEET href="../css/pesqdocente.css" type="text/css">
<script language="JavaScript">
<font class="fCor02">
<font class="fCor01"><b>&nbsp;Nome da Página</b></font><br>
</font>
</p>
Bloco
} # Fim do CabecalhoHTML.

sub MontaTela {

#-------------------------------------#
# Declaração das variáveis da rotina. #
#-------------------------------------#
my ($cont);
$cont = 0;
print <<Bloco;
<center>
<form name="monta" method="POST" action="pesquisaDocente.pl">
<input type="hidden" name="operacao" value="verifica">
<table width="59%" height="408" border="0" align="center">
<tr>
<td colspan="2">____________________________________________________________________________________</td>
</tr>
<tr>
<td width="50%">
<span class="fCor03">
C&oacute;digo do Departamento
</span>
<input type="text" name="coddepart" value="$coddepart" maxlength="6" size="6">
</td>
<td width="50%">
<div align="left">
<span class="fCor03">
C&oacute;digo da Pesquisa
</span>
<input type="text" name="codpesq" value="$codpesq" maxlength="6" size="6">
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="prossegue" value="Prosseguir" onclick="document.forms[1].action='pesquisaDocente.pl';document.forms[1].submit();">
&nbsp;&nbsp;
<input type="button" name="voltar" value="Voltar" onclick="history.back(-1)">
</td>
</tr>
</table>
</form>
</center>
Bloco

} # Fim do MontaTela.

#---------------------#
# Programa Principal. #
#---------------------#
&CabecalhoHTML;
if ($operacao eq ''){
&MontaTela;
} elsif ($operacao eq 'verifica'){
&VerificaDados;
} elsif ($operacao eq 'envia'){
&EnviaEmail;
}
#---------------#
# Fecha o HTML. #
#---------------#
print <<Bloco;
</body>
</html>
Bloco

Tentei usar da forma como você ensina, mas sou limitado e não consigo entender algumas coisas, na prática, peço que se for possível, gostaria da sua ajuda, para que eu possa implementar programas em Perl+Ajax, nessa forma como crio os programas. Aliás não é necessário declarar a biblioteca CGI:Ajax; nem instalar? Desde já te agradeço pela compreensão e pela ajuda.

#3 Whitesnake

Whitesnake
  • Visitantes

Posted 23/03/2008, 21:31

Neste exemplo não é necessário o uso do módulo CGI::Ajax.

Tenho o prazer em lhe ajudar, por favor, exponha suas dúvidas

#4 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 11724 posts

Posted 21/10/2017, 00:15

How Does Kamagra Work viagra How To Use Cialis Accessrx Complaints
Discount Clobetasol Amex Worldwide Effets Secondaire Viagra Is Alli Back On Sale generic levitra shipped from usa Ventolin Without Prescription India Phenergan Without Prescription
Alcol Kamagra Zithromax Dosage Pneumonia viagra Amoxicillin Strain Bacteria Achat Viagra A L'Unite Buy Female Viagra In India
Usa Voltaren Tablet Commander Kamagra Pas Cher cialis Cialis Precio En Farmacias De Espana Lasix Generic




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq