Ajax básico.

Aeeww!!
Segundo post ^^

Dessa vez vou falar um pokim mais sobre Ajax como prometi no post passado.

Criando seu proprio objeto Ajax
Como falei, o ajax nada mais é que jogar o conteudo um html ou xml carregado assincronamente, atravez do javascript, dentro de um div html que você criou.

Para isto precisamos criar o objeto da classe do ajax usada pelo seu navegador, paraque nao haja incompatibilidade usamos esta função:

function criahttp() {
var xmlhttp; //criamos um ponteiro pra armazenar o objeto

try{ //tentamos pra ver se….
xmlhttp = new XMLHttpRequest();//….o navegador possui a classe ajax pro mozilla, netscape e opera
}catch(e1){
try{//num deu certo o de cima tentamos ver dinovo se…
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);//…é a versao 2.0 da microsoft
}catch(e2){
try{//e por final vemos se….
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);//…é a versao 1.0 da microsoft
}catch(e3){
xmlhttp = false;//setamos o ponteiro como falso
alert(‘Seu navegador não suporta Ajax!’);//damos os pesames xD
}
}
}
return xmlhttp; //retornamos o resultado que saiu dentro do ponteiro
}

Então criamos o objeto:
ajax=criahttp();

e usamos normalmente.

Metodos da classe ajax
Como qualquer objeto/classe nossa classe criada tem metodos a serem usados, no nosso caso usaremos os metodos mais comuns:

• open(metodo,url,assinc) – Ex de uso: open(‘GET‘,’pagina.html‘,true) – Abre a conexão ao conteúdo;
• readyState() – checa se o conteudo ja foi carregado e esta pronto para ser exibido;
• responseText – retorna os dados recebidos na requisição;
• state() – retorna o codigo HTTP de reposta ao pedido open;
• status() – retorna o código do estado da requisição HTTP;
• statusText() – retorna o texto do estado da requisição HTTP;
• send() – inicia a requisição

Então abrimos uma conexão com um html qualquer DENTRO dos dominios do seu site, por que o ajax por motivos de segurança não abre paginas exteriores a seu dominio, nao adianta tentar procurar no goole por uma solução, por que não tem xD, então seguimos com o código:

conteudo=getElementById(“seu_div”); //pegamos o handle do div de retorno
conteudo.innerHTML= “<b>Carregando…</b>”; //imprimimos “Carregando” no div

ajax.open(“GET”, “pagina.html”,true); //abrimos a pagina “pagina.html” com o ajax
ajax.send(NULL); //prosseguimos com a requisição

E então esperamos a resposta a resposta de sucesso à requisição e jogamos o que foi pego dentro do div:

ajax.onreadystatechange=function() {//cria uma função para ser chamada qndo o estado do ajax mudar
if (ajax.readyState==4){ //checa se o estado
if (ajax.status == 200) { //checa se o codigo HTTP retornado for “ok” (200)…
//Lê o texto retornado na requisição
var texto=ajax.responseText;

//tira o urlencode
texto=texto.replace(/\+/g,” “);
texto=unescape(texto);

//Exibe o texto no div de resposta
var conteudo=document.getElementById(“seu_div”);
conteudo.innerHTML=texto;
} else { //Senão, se o servidor retornou outro código que não seja “200″, mostrar o erro.
alert(‘Erro na requisição HTTP! “‘+ ajax.statusText +’” (erro ‘+ ajax.status +’)');
}
}

}

Sabendo disto você ja pode usar o ajax da maneira que queira ^^, se você esta boiando em algo sugiro aprender mais sobre o protocolo HTTP ou javascript.

Abraços.
Eduardo “Duzao7667″ A. Ayres

~ por duzao7667 em 12 Agosto, 2007.