Em fevereiro de 2006, quando ainda não conhecia nada de AJAX, escrevi o artigo Simulando AJAX?, onde usei PHP e JavaScript para criticar o preenchimento de um campo e exibir, quando correto, a descrição correspondente após a utilização da tecla Tab, sem o refresh da página.

Retomo agora o exemplo, para demonstrar a mesma funcionalidade com o uso do objeto XMLHttpRequest do AJAX, mas com uma “cara” nova e bem mais elegante :-).

Apesar de se tratar de uma aplicação simples tem como vantagem evitar a lógica para validar os campos do lado do cliente com JavaScript, que em alguns casos é inviável de ser realizada e somente é efetuada do lado do servidor após o formulário ser submetido (neste post, este aspecto não é considerado).

Além do mais, na maioria dos casos, é bem mais simples escrever a lógica de validação com a linguagem utilizada no desenvolvimento de seus aplicativos e, ainda, com a possibilidade de se aproveitar estruturas já construídas.

Acredito, também, que quando se trata de performance, apesar de não ser um desenvolvedor contumaz, não há perda significativa que justifique o não uso da ferramenta AJAX.

Escopo

Neste experimento mostraremos exemplos comuns de validações, com o uso de um formulário contendo apenas o campo Id Categoria a ser preenchido e da tabela wp-categories do Viche, a saber:

• Preenchimento obrigatório do campo;
• Se o dado informado é numérico;
• E, a verificação da existência ou não da categoria na tabela.

Observe que a terceira crítica é um caso clássico, pelo menos até onde eu sei, em que o JavaScript sozinho não resolve.

A linguagem utilizada do lado do servidor é o PHP, que usa na interação com o JavaScript/AJAX uma técnica que permite a acentuação correta das mensagens exibidas, descoberta através da dica fornecida no artigo Acentuação para conteúdos carregados por AJAX do El Micox e de autoria de Fabrício Nogueira Magri, com o título Palavras acentuadas com AJAX.

O código Javascript está, também, embutido no XHTML do experimento, e a função retirada do artigo mencionado é a url_decode(str), enquanto que no PHP é utilizada a função rawurlencode($resposta). Os detalhes sobre as funções podem ser vistos diretamente no artigo do Fabrício e com informações adicionais bem interessantes.

Detalhamento

Serão descritos apenas os pontos que considero importantes no experimento.

O primeiro é a chamada do objeto XMLHttpRequest criado através da função criaxmlhttp():

<input id="id_cad" name="id_cad" size="6" value="" maxlength="8" onblur="valida_cat(this.value,'S','N','verifica_cat')" type="text">

onde utilizo o evento onblur e a função valida_cat() com os seguintes parâmetros:

1. O conteúdo digitado no campo Id Categoria;
2. Se o campo é de preenchimento obrigatório ou não;
3. O tipo do campo, no caso numérico; e
4. Uma função auxiliar a ser acionada no programa PHP para a verificação da existência ou não da categoria na tabela.

Outro ponto, é a chamada da função passada como parâmetro pelo objeto XMLHttpRequest, no programa PHP:

if ($funcao != "") {
$resposta = call_user_func($funcao, $id);
echo $resposta;
return;
}

em que fazemos uso da função call_user_func() de modo a permitir a generalização da rotina para executar qualquer procedimento adicional definido como parâmetro na url do objeto XMLHttpRequest.

E, finalmente, a decodificação correta dos acentos para que as mensagens sejam exibidas em um bom português:

echo rawurlencode($resposta);  // no PHP

e

var resposta = url_decode(xmlhttp.responseText);   // no JavaScript

de acordo com as orientações do Fabrício anteriormente mencionadas.

Você deve ter notado que na resposta da função não faço uso de rawurlencode(), isto porque se encontra definida no XHTML a meta tag que estabelece o charset como UTF-8, o padrão do WordPress.

Ah! veja agora o experimento em ação.

Feliz Natal com muita paz e muito VICHE.