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

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

Alfred Reinold Baudisch Desenvolvedor web freelance, com atuação na área há 7 anos. Experiência avançada em PHP, SQL e modelagem de sistemas multi-camadas. Atualmente dedicado ao aprendizado em desenvolvimento mobile, especificamente mobile games, com J2ME. Apaixonado e conhecedor do mercado financeiro, gestão e estratégias de novos negócios, visão constantemente empreendedora.

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

Explicação do Código

1) calculadora.html é a página que você abrirá no navegador e ajaxCalculadora.php é o script que executa as operações e retorna valor para a calculadora.html

2) A primeira tarefa é incluir a CPAINT nas páginas que a utilizam, e isso deve ocorrer em duas frentes: no lado do usuário (via JavaScript) e no lado do servidor (via PHP), para tanto ocorre a chamada:
<script type="text/javascript" src="cpaint2.inc.compressed.js">
</script>
No script HTML e:
require 'cpaint2.inc.php';
No script PHP.

3) Agora focando no calculadora.html. É iniciada a variável Total, que armazenará o resultado do cálculo em andamento, e essas 3 linhas iniciam a CPAINT:
var cp = new cpaint();
cp.set_transfer_mode('POST');
cp.set_response_type('TEXT');

- Recomendo sempre usar POST como meio de transferência (set_transfer_mode), caso seja GET, as URLs de requisições aparecerão no histórico do navegador, além de ser aberto a falhas de segurança, dependendo dos dados a serem transmitidos.
- Quanto ao tipo de resposta (set_response_type), a CPAINT permite TEXT, OBJECT e XML. No modo TEXT você retorna exatamente o conteúdo novo que se inserirá na página. Já os demais, permite serem separados, para um melhor tratamento, mas ambos serão tratados mais tarde.
- Note que cp é apenas o nome da variável e você pode usar qualquer outro, exemplo: obj, cpaint, ajax, etc.

4) Em Funções da Calculadora são apenas 5 funções atalho, que chamam outra, a chamaAjax(), passando como argumento o nome da operação a ser executada.

5) A função chamaAjax() é a mais importante no calculadora.html. Essa função que faz a chamada do script PHP, bem como faz o retorno do resultado. No primeiro momento, ela obtém o valor digitado pelo usuário na caixa valor. E assim, validado o valor, ela faz chamada ao método call do seu objeto cpaint (cp nesse caso).

cp.call('ajaxCalculadora.php', Operacao,
imprimirResultado, Total, valor);

O método call() necessita de no mínimo 3 argumentos:
a) [string] Script a ser chamado, esse script deve conter uma implementação e retorno da CPAINT (ajaxCalculadora.php no nosso caso).
b) [string] Nome da função remota a ser executada. No nosso caso eu passei a variável JavaScript Operacao, que contém uma string contendo o nome da operação a ser executada. Como você vai ver mais para frente, essa operação nada mais é que uma função definida em ajaxCalculadora.php.
c) [callback] Nome da função JavaScript que processará o resultado enviado pelo PHP. No nosso caso o nome da função é imprimirResultado.
d) Os demais argumentos são opcionais, eles são os valores que você quer enviar para o PHP junto com a chamada a função. Eu estou enviando o valor Total do cálculo, bem como o novo valor digitado pelo usuário. Você pode enviar infinitos valores, bastando os separar por vírgulas.

Apesar dos próprios argumentos explicarem o funcionamento da função call, eu irei repetir:
Ela chama o script dado, enviando os argumentos, e executa a função passada. Após o script retornar, ela chama a função nomeada para tratamento do retorno, passando como argumento o resultado.

6) A próxima função é a imprimirResultado. Como viram acima, ela é chamada pela call após o PHP retornar o resultado. Você sempre deve permitir um argumento para a função, pois esse argumento que contém o resultado da operação. Tudo que eu faço é simplesmente preencher o span resultado com o valor que foi retornado.
Esse valor poderia ter HTML / CSS / XHTML dentro e isso iria ser inserido no span resultado sem qualquer problemas. Você está livre para retornar QUALQUER tipo de texto.

Faça o seguinte, mude depois a imprimirResultado para:
function imprimirResultado(Retorno)
{
    Total = Retorno;
    alert(Retorno);
}

Ao invés do resultado ser colocado no HTML, será exibido um alerta para você. Apenas para que você conheça que está livre para tudo. E quando eu falo TUDO é TUDO mesmo. Claro que somente retornando valores separados via XML, mas isso será na segunda parte dessa série de artigos.

7) O corpo é apenas divs com os campos: valor (onde você digitará os valores para serem colocados no cálculo), botões para as operações, que fazem chamada às funções referentes e o lugar para exibir o resultado.

8) Agora vamos para a segunda parte principal: o script PHP. Conforme falado acima, primeiro importa a classe CPAINT. Em segundo faz a sua instância.

9) Para cada função que você queira usar remotamente, você deve registrá-la na CPAINT, caso contrário ela não saberá o que você está chamando. O interessante que você possui 3 métodos de registro:
- Apenas função
- Classe e função
- Objeto e função

Se o seu sistema for estruturado em funções, sem problemas. Se for um sistema modular e orientado a objetos, também sem problemas. No caso do exemplo, eu usei a abordagem Classe e Função:
// 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'));

Ou seja, no registro deve ser passado um array, onde o primeiro elemento é o nome da classe e o segundo é o nome da função. Note que o nome da função é exatamente o mesmo das strings que você chama em calculadora.html. TEM de ser o mesmo, caso contrário o que a CPAINT chamará?

Para registrar uma função, apenas passe o nome dela como uma string:
$CPaint->register('Adicionar'); (isso funciona no caso de existir uma função solta no código chamada Adicionar, por exemplo).

E para registrar um objeto, passe da mesma maneira via array, mas o primeiro elemento deve ser referência ao objeto, exemplo:
$objCalculadora = new Calculadora;
$CPaint->register(array(&$objCalculadora, 'Multiplicar'));

OBS: A classe Calculadora e essas funções estão logo abaixo dessas linhas de registro ali no código.

10) Em seguida a CPAINT é autorizada a iniciar e retornar data. Na verdade o método start() faz chamada ao método solicitado via JavaScript e o return_data() retorna para o JavaScript o que o PHP retornou.
$CPaint->start('ISO-8859-1');
$CPaint->return_data();

11) Para que o PHP retorne algo, você deve enviar isso para a CPAINT via o método set_data(). É o valor passado a set_data() que será retornado para sua página, no nosso caso a função imprimirResultado que receberá esse valor.

Na classe Calculadora do exemplo todas as funções de operação chamam outra função chamada EnviarValor:

function EnviaValor($Total)
{
  global $CPaint; $CPaint->set_data($Total);
}

O que ela faz é simplesmente chamar o objeto CPAINT criado e chamar a set_data() enviando o resultado que quero que apareça na página.

Você pode simplesmente chamar isso diretamente na sua função, exemplo:
function Buscar($Nome)
{
  global $CPaint;
  if($Nome == 'A')
     $CPaint->set_data('Antonio');
  else
     $CPaint->set_data('Sem nome');
}

1.4 Finalizando

Teste esses scripts em seu computador (não se esqueça de que deve ser executado no seu localhost!)! Faça mudanças, tente outros tipos de funcionalidades, exemplo: o usuário digita uma frase e o php retorna ela em maiúsculas.

A próxima parte do artigo abordará o uso do CPAINT retornando dados mais completos, bem como XML, para aplicações reais no dia-a-dia, como por exemplo validação de formulário.

Até o próximo!
Alfred Reinold Baudisch

Auriumsoft Tecnologia e Vídeo
www.auriumsoft.com.br

AuriumHost
www.auriumhost.com.br

Blog Profissional
www.auriumsoft.com.br/blog/

Páginas: « Anterior 1 2 3 Próximo » 

• PHP_OqueAjax-ePHP-Parte1-CodigosPDF.zip

• http://en.wikipedia.org/wiki/AJAX
• http://www.adaptivepath.com/publications/essays/archives/000385.php
• http://cpaint.wiley14.com/doc/