AJAX e PHP – Tutorial básico e simples sobre AJAX e PHP

php 1578356878

php 1578356878

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

Deixe o seu comentário: