ASP – Banner rotativo com AJAX

• Tweet
• Sharebar

• Tweet

Neste artigo iremos fazer um banner rotativo em precisar recarregar a página, para isso iremos usa AJAX, ou seja (acrônimo em língua inglesa de Asynchronous Javascript and XML, em português “Javascript e XML Assíncronos”) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. Foi inicialmente desenvolvida pelo estudioso Jessé James Garret e mais tarde por diversas associações, não é um novo modelo para desenvolvimento web. Os navegadores implementam essa tecnologia desde o ano 2000(no mínimo). Porém sua popularização nos últimos anos tem também trazido consigo muitas outras melhorias para a Web. Tem estimulado a construção de aplicações Web mais dinâmicas e criativas. AJAX não é uma tecnologia, mas um conjunto de tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. AJAX incorpora em seu modelo:
•    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 / PHP, em vez de gastar tempo inútil para acessar um banco de dados real (Access ou MySQL), que certamente não para baixo.

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(“resultado”);
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=”resultado”></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

Escrito por X@nBuRzUm on janeiro 11, 2012. Arquivado em ASP.net. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo