O uso de AJAX está se proliferando cada vez mais pela internet, justamente por trazer mais interatividade e usabilidade para as aplicações - ou até mesmo, mais "glamour". Junto disso, surgem inúmeras maneiras de implementar essa combinação (AJAX não é uma tecnologia, é um uso conjunto de tecnologias), algumas complicadas e com recursos demais, outras simplificadas, mas deficientes de recursos. A classe CPAINT é uma classe completa e permite incluir AJAX eficientemente em suas aplicações web. Nessa série de artigos, entenda o que é AJAX, as características da CPAINT, bem como uma explicações por meio de códigos exemplo.

1. INTRODUÇÃO

1.1 O que é AJAX?

Bom, não irei explicar detalhadamente o que se trata o AJAX. Existem vários artigos por aí que tratam do assunto. Mas, irei mostrar pelo menos a idéia base para que os que desconhecem do assunto possam entender o conceito principal.

AJAX - Asynchronous JavaScript and XML (JavaScript e XML Assíncronos) - é uma técnica usada para criar aplicações web mais interativas, usando uma combinação de tecnologias:

- (X)HTML e CSS (para a boa apresentação dos dados, ou pelo menos organizada)
- DOM + JavaScript (separação correta dos dados)
- XML (intercâmbio de informações)
- XMLHttpRequest (solicitações assíncronas de informações CLIENTE <-> SERVIDOR sem necessidade de dar refresh na página)
- Uma linguagem do lado de servidor (PHP, ASP.NET, etc) para enviar os dados (no caso o XML).

Você deve estar pensando: "Ok, que legal todos esses nomes e tecnologias. Eu sei que elas existem e já uso há um bom tempo JavaScript + HTML + CSS + XML + PHP, etc... Então o que esses caras estão querendo com esse tal de AJAX? Apenas mais um nome para gravarmos?". Quase isso.

O conceito "tradicional" da web é de: o usuário digita um endereço, recebe uma página que contém formulário, imagens, links, etc... Vamos a um rápido exemplo: se um usuário quer efetuar uma busca, ele digita algo no formulário buscar, pressiona o botão "OK", o navegador envia requisição para o servidor, que processa um script PHP, e devolve ao navegador uma nova página que é totalmente aberta "do zero" no navegador do usuário. Requisição concluída.

Agora imagina uma WEB funcionando como um software, em que ao mesmo tempo em que você vai fornecendo dados, as informações vão sendo exibidas e executadas de acordo com o que é fornecido, tudo em tempo real.

Exemplos: um formulário de cadastro numa loja virtual, em que você digita seu CEP e ao terminar de digitar, o campo Endereço, Cidade e Estado são preenchidos automaticamente sem qualquer tipo de refresh na página. Ou como no exemplo da "web tradicional", um sistema de busca: ao mesmo tempo em que você vai digitando, os resultados vão sendo exibidos, SEM QUALQUER TIPO DE REFRESH.

Parece impossível, não? Ou sem tanto exagero, parece algo que tomará meses de programação! Que nada! O AJAX é exatamente isso - esse novo conceito de aplicações web.

1.2 Como funciona?

Vamos usar como exemplo uma calculadora. Imaginemos um formulário com uma caixa de texto para o usuário digitar um número e um botão para cada uma das operações básicas. Ao apertar um dos botões um método JavaScript vai obter o valor da caixa de texto, validar os dados e chamar sua engine AJAX, que por sua vez é uma encapsulação para o método XMLHttpRequest.

O método XMLHttpRequest envia os dados fornecidos (nesse caso, o número digitado) em tempo real para um script do lado do servidor definido por você (no nosso caso, um script PHP), que irá processa-los a gosto e retornar outros dados, seja em texto puro ou XML (o principal). Aos novos dados terem retornado, um novo método JavaScript é chamado para processa-los e atualizar a página sem dar refresh, normalmente inserindo em elementos XHTML DIV e SPAN.

Mas, você não precisa saber como funciona o XMLHttpRequest nem mesmo como implementá-lo. Para isso, basta usar um dos inúmeros frameworks de AJAX prontos que possuem na internet. O escolhido por mim para as aplicações que desenvolvo é o framework CPAINT (Cross-Platform Asynchronous INterface Toolkit - http://cpaint.wiley14.com/). Ele permite uma RÁPIDA - FÁCIL E EFICIENTE inserção de AJAX. E o melhor, não apenas para PHP, mas também ASP, .NET e CFM!

E é exatamente a abordagem AJAX com CPAINT e PHP que é abordada nesse e nos próximos artigos da série.

OBS: Faça o download da CPAINT aqui:
http://sourceforge.net/project/showfiles.php?group_id=141041