Contador de visitas com Ajax, por Eduardo Stuart

Aproveitando o tutorial que eu fiz sobre contador de visitas (php/mysql), que tal atualizar as visitas sem ter que ficar mudando de página?!

Para quem ta começando com Ajax, alguns textos que aconselho a dar uma lida:

http://www.xul.fr/en-xml-ajax.htm | Para mim o mais completo
http://www.tableless.com.br/artigos/ajaxdemo/ | Ajuda bastante também

Chega de lorota, vamos começar…

Bom primeiramente vou explicar o que vamos fazer…

0) Antes de tudo você tem que baixar os arquivos do tutorial anterior ( contador de visitas (php/mysql) ) aconselho ir fazendo ele passo a passo para ir aprendendo…
1) Criar um arquivo chamado “ajax.js“
2) Criar um arquivo qualquer, onde será exibido as visitas (vai servir para chamar o ajax)

Criando o arquivo ajax.js

Primeiro passo: criar o objeto XMLHttpRequest ou XMLHTTP, dependendo do navegador.

try{
xmlhttp = new XMLHttpRequest();
}catch(ee){
try{
xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”);
}catch(e){
try{
xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}catch(E){
xmlhttp = false;
}
}
}

Segundo passo: Vamos criar uma função chamada “carrega()” (acompanhe pelos comentarios)

function carrega(){
var conteudo=document.getElementById(”conteudo”);
//Exibe um texto “carregando” antes de iniciar
conteudo.innerHTML =’Carregando…’;
//Abre a url (contador.class.php)
xmlhttp.open(”GET”, “contador.class.php”,true);
//Irá executar quando o navegador obtiver o código
xmlhttp.onreadystatechange=function() {
//Quando a resposta estiver pronta
if (xmlhttp.readyState==4)
{//Se a resposta estiver ok
if(xmlhttp.status==200)
{//Pega resposta e desfaz o urlencode
var texto=xmlhttp.responseText;
texto=texto.replace(/\+/g,” “);
texto=unescape(texto);
//Exibe o texto na div conteudo
conteudo.innerHTML=texto;
}else
conteudo.innerHTML=’Erro’;
//Exibe um erro caso a resposta nao seja igual a 200
//(exemplo: 404-nao encontrada)
}else
//Caso a resposta nao estiver pronta,
//exibe a mensagem ‘carregando’
conteudo.innerHTML = “Carregando…”;
}
xmlhttp.send(null);
}

Terceiro passo: Criado o arquivo ajax.js, agora vamos criar o arquivo contador.html
O que ele faz?

Chama o arquivo ajax.js e cria um intervalo (fica executando uma determinada funcao a cada x milisegundos )
setInterval(code,millisec[,”lang”])
( Saber + ?
http://www.w3schools.com/htmldom/met_win_setinterval.asp )

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Visitantes</title>
<script src=”ajax.js” type=”text/javascript”></script>
</head>
<body>
<script>
var i = self.setInterval(’carrega()’,5000);
carrega();
</script>
<div id=”conteudo“>Carregando…</div>
</body>
</html>

Pronto! Agora é só abrir o seu arquivo HTML

Dúvidas? É só postar ou entrar em contato
eduardo@eduardostuart.com
http://blog.eduardostuart.com | http://www.eduardostuart.com