Help
• Exposição e interação dinâmica usando o DOM;
• Intercâmbio e manipulação de dados usando XML e XSLT;
• Recuperação assíncrona de dados usando o objeto XMLHttpRequest e XMLHttpResponse;
• JavaScript fazendo a junção entre os elementos.
O modelo clássico de aplicação web trabalha assim: a maioria das ações do usuário na interface dispara uma solicitação HTTP para o servidor web. O servidor processa algo, recuperando dados, realizando cálculos, conversando com vários sistemas legados, e então retorna uma página HTML para o cliente. É um modelo adaptado do uso original da Web como um agente de hipertexto, porém o que faz a web boa para hipertexto não necessariamente a faz boa para aplicações de software.
Com a popularização de sistemas que funcionam inteiramente na Web e também com o aumento da velocidade das conexões banda larga, o problema da espera pelo envio e retorno da página inteira se tornou muito mais evidente para o usuário. Obviamente, se nós estivéssemos projetando a Web a partir do zero para aplicações, não faríamos com que os usuários esperassem em vão. Uma vez que a interface está carregada, por que a interação do usuário deveria parar a cada vez que a aplicação precisasse de algo do servidor? Na realidade, por que o usuário deveria ver a aplicação ir ao servidor toda vez?
As principais vantagens das aplicações que utilizam AJAX para determinadas requisições é que os dados trafegados pela rede são reduzidos e o usuário não precisa aguardar a página ser recarregada a cada interação com o servidor.
A popularização das tecnologias que o AJAX reúne foi muito importante para a criação do conceito Web 2.0, que até hoje gera grandes divisões entre os maiores pensadores da Web.
Apesar de não possuir nada inovador em sua essência, o uso de AJAX revolucionou a Web inteira, trazendo à tona muitos conceitos importantes para o desenvolvimento web.
Com um pouco de imaginação, pode ser útil para escrever uma grande variedade de aplicações úteis para a administração diária de um site
Neste artigo vamos olhar para a exibição de um circuito temporizador de rotação de banner, usando ASP como línguas scripting laterais do usuário para acessar o banner AJAX.
Em essência, vamos mostrar um banner na tela, e depois de 10 segundos, ele irá mostrar o outro, sem a necessidade de atualizar a página e acessar um banco de dados gerenciado lado do servidor!
O script ASP
Focamos a nossa atenção sobre a interação entre AJAX e ASP, em vez de gastar tempo inútil para acessar um banco de dados real (Access ou MySQL).
Então vamos ver um script simples ASP que contém uma série de banners e exibe na tela uma ao acaso:
<%@LANGUAGE = JScript%> <% Response.Buffer = true; Response.Expires = 0; var imagem = new Array(); var conexao = new Array(); var acaso; imagem[0] = "mxstudio.gif"; conexao[0] = "http://www.mxstudio.com.br/"; imagem[1] = "forum.gif"; conexao[1] = " http://www.mxstudio.com.br/forum/"; imagem[2] = "tools.gif"; conexao[2] = " http://www.mxstudio.com.br/"; var acaso = Math.floor(Math.random() * imagem.length); %> <a href="<%=conexao[acaso]%>"><img src="<%=imagem[acaso]%>" border="0"></a>
Salve o arquivo como banner.asp.
O script AJAX
Vejamos agora o roteiro de AJAX JavaScript que chama o arquivo via XMLHTTP ASP para exibir o banner.
Começamos com a parte do código principal:
var XMLHTTP;
function Pedido()
{
XMLHTTP = RicavaBrowser(CambioStato);
XMLHTTP.open("GET", "banner.ext", true);
XMLHTTP.send(null);
}Para completar, vemos o resto do código com as funções de JavaScript em apoio do pedido AJAX:
function CambioStato()
{
if (XMLHTTP.readyState == 4)
{
var R = document.getElementById("resultato");
R.innerHTML = XMLHTTP.responseText;
}
}
function RicavaBrowser(QualBrowser)
{
if (navigator.userAgent.indexOf("MSIE") != (-1))
{
var Classe = "Msxml2.XMLHTTP";
if (navigator.appVersion.indexOf("MSIE 5.5") != (-1));
{
Classe = "Microsoft.XMLHTTP";
}
try
{
OggettoXMLHTTP = new ActiveXObject(Classe);
OggettoXMLHTTP.onreadystatechange = QualBrowser;
return OggettoXMLHTTP;
}
catch(e)
{
alert("Error: o ActiveX não foi executado!");
}
}
else if (navigator.userAgent.indexOf("Mozilla") != (-1))
{
OggettoXMLHTTP = new XMLHttpRequest();
OggettoXMLHTTP.onload = QualBrowser;
OggettoXMLHTTP.onerror = QualBrowser;
return OggettoXMLHTTP;
}
else
{
alert("O exemplo não funciona com outros navegadores!");
}
}
Salve todo o código Javascript como banner.js.
código HTML
Nós apenas temos que ver o banner na tela de qualquer arquivo HTML (ASP) do nosso site.
Primeiro incluir o arquivo JavaScript:
<script type="text/javascript" src="banner.js"></script>
Então, chamamos a função AJAX no carregamento da página e, em seguida, com um temporizador a cada 10 segundos:
<script type="text/javascript">
window.onload = function()
{
Pedido();
}
function RecarregarBanner()
{
Pedido();
}
window.setInterval("RecarregarBanner()", 10000); // 10 secondi
</script>
Exibimos o banner na tela criando uma camada de texto com uma identificação específica, útil para acesso via AJAX:
<div id="resultato"></div>
Para testar o exemplo, eu sugiro para diminuir o tempo de espera, reduzindo de 10 segundos para 3 segundos:
window.setInterval("RecarregarBanner()", 3000); // 3 segundos
