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

Publicado por

Razor

Conhecedor das artes gráficas, amante de design web, amigo íntimo do desenvolvimento web, com a pretensão de aprender e ajudar à quem busca conhecimento, me faço presente. =)

4 comentários sobre “AJAX e PHP – Tutorial básico e simples sobre AJAX e PHP”

  1. Possuo uma pagina index.php com umas funções JavaScript e outras em PHP.
    Nesta página possuo um Aplicativo criado em Flash, um Game.
    O Game faz uma chamada para um codigo da index.php em JavaScript através de:

    import flash.external.ExternalInterface;
    ExternalInterface.call(“saveScore”, _global.pontos);

    e nesta função saveScore(_pontos) em Javascript (presente em index.php), tenho que chamar uma função PHP tambem presente no mesmo index.php, que seria gravaScoreBancoDados().

    Como faço para chamar esta função PHP através da minha outra função em JavaScript?
    Seria em AJAX pois o JavaScript que chama a função PHP será chamado pelo FLash e não por um botão de formulário no index.php. Obrigado!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *