Um pouco de design, desenvolvimento, tecnologia e muito de informação. Sirva-se, é só clicar!
Quem nunca se admirou ao escrever parte de alguma palavra na busca do Google e ter um segundos sugestões para ela? Ou mesmo acessar o Google Docs e ter editores de texto, planilhas, apresentadores de slides e muitos outros recursos online e como se estivesse usando um programa desktop?
Esses são alguns dos ilimitados recursos que o AJAX é capaz. O AJAX não é uma tecnologia propriamente dita e sim um conceito que reúne várias tecnologias como o HTML, o CSS, o JavaScript, o PHP e muitas outras linguagens e tecnologias.
>> Revolucione você também!
Para começar, deve entender um pouco de HTML, JavaScript e alguma linguagem que seja interpretada pelo servidor, usaremos o PHP.
Vamos criar um arquivo HTML simples com um pequeno formulário que terá os campos Nome e Hora, ao digitarmos algo em Nome a hora será automaticamente preenchida no campo Hora.
<html> <head> <title>Da20web</title> </head> <body> <form name="Formulario"> Nome: <input type="text" onkeyup="FuncaoAjax()" name="nome" /> Hora: <input type="text" name="hora" id="hora" /> </form> </body> </html>
No exemplo de código acima, o evento onkeyup do JavaScript fará com que ao soltar a tecla a função que fará todos os requisitos do AJAX seja chamada.
O uso do objeto XMLHttp é imprescindível, é ele que fará os pedidos HTTP via JavaScript. Como seu uso é constante, o interessante é ter uma função que faça isso, ela por sua vez pode estar num arquivo .js externo, veja um exemplo para esta função:
var xmlHttp;
function FuncaoAjax() {
try {
// Opera 8.0+, Safari,Firefox
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Seu browser não suporta AJAX!");
return false;
}
}
}
A função acima cria uma variável que receberá o objeto XMLHttp, depois identifica o navegador, vemos que no caso do IE ele tenta verificar mais de um objeto, isso ocorre por, ainda hoje, o navegador padrão da MicroSoft ter problemas de compatibilidade com os padrões do W3C.
Ao identificar o navegador, a função instância o objeto na váriável xmlHttp, é principalmente apartir dela que faremos todos as requisições ao nosso servidor.
Agora vamos definir onde o retorno da informação solicitada ficará, para isso a propriedade onreadystatechange será usada toda vez que houver mudança em readyState, veja o exemplo:
xmlHttp.onreadystatechange=function() {
if (xmlHttp.readyState == 4) {
document.getElementById("hora").value = xmlHttp.responseText;
}
}
Existem quatro valores possíveis: 0 = Não iniciado / 1 = Carregando / 2 = Carregado / 3 = Parte da resposta enviada / 4 = Completo. O mais comumente usado e que evita problemas de compatibilidade entre navegadores é o 4.
Em seguida a propriedade getElementById do objeto document pesquisa pelo Id ‘hora’, será essa propriedade value da tag que tem esse Id que ficará a informação enviada pelo servidor.
É necessário agora definir o tipo de post [GET ou POST], o arquivo chamado e se o envio será assíncrono ou não [true ou false, respectivamente], isso é feito através do método open() veja o exemplo:
xmlHttp.open("GET","hora.php",true);
E por último, mas não menos o importante, o envio propriamente dito, isso é feito pelo método send(), esse método aceita um único argumento, uma string, senão houver null deve ser enviado:
xmlHttp.send(null);
Para nosso teste criaremos um arquivo que chamará a hora do servidor, nomei-o como hora.php e coloque as linhas:
<?php echo date('h:i:s A'); ?>
Se fez tudo certo, um pequeno formulário com os campos nome e hora aparecerão, sempre que digitar algo no campo nome, a hora no campo seguinte mudará, isso, segundo a segundo.
O nosso teste poderia ser usado por exemplo, para o preenchimento de um formulário de cadastro, onde a hora desse cadastro seria enviada também. Mas o uso do AJAX tem o limite de sua imaginação ou necessidade, procure mais exemplos nos sites de busca, verá que um mundo novo se abrirá para você!
Os arquivos completos podem ser baixados aqui.
