AJAX básico
AJAX tornou-se popular por volta de 2005 através do Google com seu pioneiro sistema de sugestões de busca e também por outros grandes desenvolvedores web. As iniciais AJAX significam respectivamente Asynchronous JavaScript And XML.
A ideia deste tutorial não é falar sobre a história e origem do AJAX e sim ensinar a criar um script funcional e básico que utilize AJAX em comunicação com PHP para que tenha uma base no seu aprendizado.
Primeiramente para poder seguir e concluir este tutorial deve ter em mente que AJAX utiliza JavaScript, sendo assim, o seu navegador web deve ter a opção de executar JavaScript habilitado.
Para demonstrar a ligação de AJAX com PHP, vamos criar uma forma muito simples com 2 campos de entrada de um formulário.
A lógica do que faremos se define da seguinte forma: no primeiro campo você poderá digitar qualquer texto e este texto será enviado para o nosso script PHP que irá convertê-lo para maiúsculas e enviar de volta para nós. No final, vamos colocar o resultado obtido no segundo campo de entrada. Talvez não seja muito útil, mas para darmos início e começarmos de forma bem simples e básica, vai nos servir.
Então, vamos listar o que precisamos fazer:
– Vamos chamar uma função através do evento ‘onkeyup’ no primeiro campo do formulário, ou seja, chamar essa função quando algo for digitado no primeiro campo.
– Sempre que for digitado algo essa função envia a informação para um script PHP no servidor.
– O PHP processa o que foi digitado no primeiro campo e envia de volta o resultado.
– Capturamos o resultado que retornou e imprimimos no segundo campo do formulário.
Nosso código HTML é muito simples e ficará desta forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax - PHP exemplo - Sistema Básico</title></head><body> <form name="testForm"> Entrada: <input type="text" onkeyup="enviaKey();" name="entrada" id="entrada" /> Saída: <input type="text" name="saida" id="saida" /> </form></body></html>
Como você pode ver, há uma função que dei o nome de enviaKey() que será a responsável pelo que falei mais acima, ou seja, será chamada e executada a cada vez que uma tecla do teclado for pressionada quando o cursor do mouse estiver focado dentro do primeiro campo do formulário, é claro.
Mas o que é essa função enviaKey() e como poderemos enviar a informação para o script PHP no servidor? Calma, vamos seguir em frente e descobrir estas respostas.
Antes de explicar a função enviaKey(), primeiro precisamos saber algo muio mais importante . Para fazer uma comunicação entre o cliente (client-side) e o servidor (server-side) o código do cliente precisa criar um objeto chamado XMLHttpRequest. Este objeto será responsável pela comunicação AJAX e PHP ou se preferir.
No entanto criar este objeto implementando para navegadores mais antigos seria algo cansativo, demorado e muitas vezes impossível, rs*. Eu neste tutorial irei excluir navegadores antigos da possibilidade da experiência com AJAX.
Continuando… façamos então da seguinte forma:
// pegando o HTTP Object function getHTTPObject(){ if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); // IE } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); // Outros Navegadores } else{ alert("Seu Navegador não suporta AJAX."); // Navegadores antigos return null; } }
Ok, agora que nós temos o objeto XMLHttpRequest chegou a hora de implementarmos a lógica dentro da função enviaKey().
Em primeiro lugar o que precisamos é obter um objeto XMLHttpRequest valido. Se tivermos isso, então podemos enviar o valor do campo “entrada” para o script PHP no servidor (ainda iremos escreve-lo) . Fazemos isso como se enviássemos parâmetros pela URL e assim no script PHP podemos usar a variável Super-Global $_GET para capturar os dados. Após isso chamamos a função send() do objeto XMLHttpRequest que irá enviar o nossa requisição para o servidor.
Por enquanto nossa função enviaKey() está parecida com isso:
function enviaKey(){ httpObject = getHTTPObject(); if (httpObject != null) { httpObject.open("GET", "upperCase.php?entrada="+document.getElementById('entrada').value, true); httpObject.send(null); } }
Já está ficando boa, mas como poderemos capturar a resposta do servidor?
Para fazer isso, precisamos usar uma outra propriedade especial do objeto XMLHttpRequest.
Podemos atribuir uma função para pegar o valor retornado do servidor, onde a função será solicitada ao trabalho se o status do objeto XMLHttpRequest for mudado.
O código final da nossa função enviaKey() será o seguinte:
function enviaKey(){ httpObject = getHTTPObject(); if (httpObject != null) { httpObject.open("GET", "upperCase.php?entrada="+document.getElementById('entrada').value, true); httpObject.send(null); httpObject.onreadystatechange = setOutput; // setOutput é a função que criaremos para capturar o retorno do servidor } }
Agora o último passo no lado do cliente é implementar a função SetOutput () que irá alterar o valor do nosso segundo campo do formulário.
A grande importância desta função é a verificação do status do objeto XMLHttpRequest.
A ação de alterar o VALUE do nosso segundo campo do formulário só será executada se o status do objeto XMLHttpRequest for COMPLETE.
A propriedade readyState pode ter os seguintes valores de estatus:
0 = uninitialized1 = loading2 = loaded3 = interactive4 = complete
Então nossa função setOutput() fica assim:
// Mudando o valor do campo 'saida' function setOutput(){ if (httpObject.readyState == 4) { document.getElementById('saida').value = httpObject.responseText; } }
Agora que o lado cliente (client-side) está pronto, vamos implementar o lado servidor (server-side).
Código PHP e o exemplo AJAX de nosso tutorial completo
A nossa implementação do lado servidor será muito simples em comparação com o que precisamos fazer do lado cliente. No código PHP só precisaremos verificar o array da variável Super-Global $_GET, depois convertê-lo para maiúsculas e exibir o resultado.
Crie um arquivo PHP em branco, se seguir exatamente como nesse tutorial salve como upperCase.php e o código que colocaremos nesse arquivo PHP ficará assim:
<?php if (isset($_GET['entrada'])){ // Pega o valor digitado no primeiro campo echo strtoupper($_GET['entrada']); } // exibe o valor convertido em maiúsculo ?>
Este arquivo ficou realmente bem simples.
Pronto agora veja abaixo os arquivos completos do lado client-side e server-side.
Client-side:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax - PHP exemplo - Sistema Básico</title></head><body><script language="javascript" type="text/javascript"><!--// pegando o HTTP Objectfunction getHTTPObject(){ if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); // IE } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); // Outros Navegadores } else{ alert("Seu Navegador não suporta AJAX."); // Navegadores antigos return null; }}// Mudando o valor do campo 'saida'function setOutput(){ if (httpObject.readyState == 4) { document.getElementById('saida').value = httpObject.responseText; }}// Implementando a função que envia os dados digitados no primeiro campo para o PHPfunction enviaKey(){ httpObject = getHTTPObject(); if (httpObject != null) { httpObject.open("GET", "upperCase.php?entrada="+document.getElementById('entrada').value, true); httpObject.send(null); httpObject.onreadystatechange = setOutput; }}var httpObject = null;//--> </script><form name="testForm">ENTRADA: <input type="text" onkeyup="enviaKey();" name="entrada" id="entrada" />SAÍDA: <input type="text" name="saida" id="saida" /></form></body></html>
Server-side:
<?php if (isset($_GET['entrada'])) // Pega o valor digitado no primeiro campo echo strtoupper($_GET['entrada']); // exibe o valor convertido em maiúsculo ?>
Era isso.
Espero que tenha gostado e que, claro, esse tutorial foi muito simples e básico pra nada mais do que servir como impulso para se aprofundar um pouco mais.
Prometo escrever outro tutorial sobre PHP AJAX e MySQL trabalhando juntos, abordando alguns exemplos mais práticos e úteis, onde aprenderemos a usar o método POST ao invés do GET.
Qualquer dúvida manda um comentário aí.
Créditos: ajaxf1.com