Avaliação: | Publicado em: 09/09/2006

O que é AJAX e como aplicá-lo com PHP, parte 1

Alfred Reinold Baudisch

O que é AJAX e como aplicá-lo com PHP, parte 1

1.3 Código exemplo

A calculadora expressada na página anterior. Para cada valor digitado, o usuário apertará uma operação e o resultado atualizará em tempo real (resposta do PHP).

OBS 1: Exemplo e código muito simples, mas servem apenas para ilustrar qual a lógica base do AJAX.
OBS 2: Código propositalmente compactado para não ocupar muito espaço do artigo.
OBS 3: Você deve estar se perguntando: mas uma calculadora dessas eu faço muito mais rapidamente apenas com JavaScript. Claro, eu concordo. Acontece que por meio de um modelo desses, você já pode imaginar centenas de aplicações mais interessantes, como busca no banco de dados, validação de formulário, etc, tudo através dessa comunicação em tempo real com o lado do servidor (PHP no caso).

calculadora.html
==============================
<!-- INCLUI A CLASSE CPAINT - AJAX -->
<script type="text/javascript" src="cpaint2.inc.compressed.js"> </script>

<script type="text/javascript">
// Valor atual da nossa conta
var Total = 0;

// Cria objeto CPAINT
var cp = new cpaint();
cp.set_transfer_mode('POST');
cp.set_response_type('TEXT');

//
// Funções da calculadora
//
function Adicionar()   { chamaAjax('Adicionar');   }
function Subtrair()    { chamaAjax('Subtrair');    }
function Multiplicar() { chamaAjax('Multiplicar'); }
function Dividir()     { chamaAjax('Dividir');     }
function CE()          { chamaAjax('CE');          }

//
// Função que faz a comunicação JavaScript X PHP
//
function chamaAjax(Operacao)
{
    // Obtém valor digitado
    valor = document.getElementById('valor').value;
    // Limpa campo
    document.getElementById('valor').value = '';
    // Retorna foco para o campo
    document.forms[0].valor.focus();

    // Só chama se foi preenchido algo, ou se for a operação
    // de limpeza pode chamar em qualquer caso.
    if(valor != '' || Operacao == 'CE')
    {    
        // PRINCIPAL MÉTODO (call) = Chama o PHP
        // e obtém o retorno
        cp.call('ajaxCalculadora.php', Operacao,
         imprimirResultado, Total, valor);
    }
}

//
// Função usada pela CPAINT para imprimir
// o resultado dado pelo PHP
//
function imprimirResultado(Retorno)
{
    Total = Retorno;
    document.getElementById('resultado').innerHTML = Retorno;
}
</script>

<div id="corpo">
<form>
    <div>Valor: <input type="text" id="valor" name="valor"
size="4" /></div>

    <div>Operação:
        <input type="button" value=" + "
         size="3" onclick="Adicionar();" />
        <input type="button" value=" - "
         size="3" onclick="Subtrair();" />
        <input type="button" value=" x "
         size="3" onclick="Multiplicar();" />
        <input type="button" value=" / "
          size="3" onclick="Dividir();" />
        <input type="button" value=" CE "
          size="3" onclick="CE();" />
    </div>

    <div>Resultado: <span id="resultado"> <script> imprimirResultado(Total); </script> </span> </div>
</form>
</div>

ajaxCalculadora.php
==============================
<?php

// Importa a Cpaint
require 'cpaint2.inc.php';

// Instancia Cpaint
$CPaint = new cpaint();

// Registra funções
$CPaint->register(array('Calculadora', 'Adicionar'));
$CPaint->register(array('Calculadora', 'Subtrair'));
$CPaint->register(array('Calculadora', 'Dividir'));
$CPaint->register(array('Calculadora', 'Multiplicar'));
$CPaint->register(array('Calculadora', 'CE'));

// Inicia Cpaint e retorno de dados
$CPaint->start('ISO-8859-1');
$CPaint->return_data();

class Calculadora
{
    function Adicionar($Total, $Valor)       
    {
        $Total += $Valor;
        Calculadora::EnviaValor($Total);
    }

    function Subtrair($Total, $Valor)    
    {
        $Total -= $Valor;
        Calculadora::EnviaValor($Total);
    }

    function Dividir($Total, $Valor)    
    {
        $Total /= $Valor;
        Calculadora::EnviaValor($Total);
    }

    function Multiplicar($Total, $Valor)
    {
        $Total *= $Valor;
        Calculadora::EnviaValor($Total);
    }

    function CE() { Calculadora::EnviaValor(0); }
    
    /**
     * Essa função retorna um valor para o CPAINT que por sua
     * vez retornará para a página
     */
    function EnviaValor($Total)
    {
        global $CPaint; $CPaint->set_data($Total);
    }
}

?>

Páginas: « Anterior 1 2 3 Próximo »  Próximo: Explicação do Código »