AJAX e PHP – Tutorial básico e simples sobre AJAX e PHP
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 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = 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 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;
}
}
// 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 PHP
function 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í.
Bons estudos.
Créditos: ajaxf1.com
Tópicos relacionandos
Aproveitar este artigo?
Minha conta
Categorias
Recomendo
Posts Recentes
- Programação Orientada à Objeto – OOP PHP 5 – Parte 2
- Aprenda facilmente OOP com PHP 5 (Object Oriented Programming) ou POO (Programação Orientada à Objeto) – Parte 1
- Simples tutorial de upload de arquivos com AJAX e PHP
- AJAX e PHP – Tutorial básico e simples sobre AJAX e PHP
- Instalando PHP 5.3.x VC9 + APACHE + MySQL no Windows 7
- Instalando o Apache 2.2, compatível com versão VC9 do PHP, no Windows 7
- Instalando o PHP 5.3.x – x86 – VC9 – Thread Safe no Windows 7
- Instalando o MySQL 5.5.8 no Windows 7
- Como criar um encurtador de URL como o tinyurl.com, bit.ly e migre.me utilizando PHP e MySQL?
- Como pegar a URL com PHP