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">
<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.
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!
