O detalhamento do código do experimento deve ser encarado como um exercício de um aprendiz em AJAX, como claramente explicitado no post original.

O que me motivou a compartilhar com vocês os detalhes foi a divulgação do experimento no Blog da Visie, pelo Elcio Ferreira, algumas (confesso, não muitas) solicitações enviadas através do formulário de contato do VICHE e, por último, o artigo publicado no Blog do Maujor.

Em função desse artigo, os botões (<input type=”button”>) foram substituídos por ícones (<input type = “image”>). Como consequência houve mudanças no código do experimento que passou a funcionar com múltiplos submit’s no formulário. A abordagem no Blog do Maujor é derecionada especificamente para questões de acessibilidade em que confronta as duas versões do experimento.

Esclareço que os ícones são utilizados em uma aplicação Web da Empresa em que atualmente trabalho, reforçando o comentário postado pelo Maurício em seu artigo. E, além do manual de operação, na maioria de seus formulários tem um ícone de ajuda, que acionado, exibe informações sobre a funcionalidade dos ícones utilizados acrescida das de preenchimento de seus campos (veja um exemplo na figura abaixo).

Sugestões são bem vindas e você pode ver agora, antes das explicações, a nova versão em funcionamento.

Contextualização

O experimento consiste de:

• uma tabela em MySQL;
• rotinas em Javascript AJAX que cria o objeto XMLHttpRequest e faz uso de alguns de seus métodos e propriedades;
• um programa em PHP que executa as requisições desse objeto do lado do servidor e retorna a resposta no formato JSON;
• uma página XHTML, a que você navega, com um formulário e o CSS para renderizá-la;
• códigos em Javascript para a construção dos parâmetros a serem passados para o programa PHP, o tratamento da resposta em JSON e sua exibição no formulário.

A tabela e o CSS, por serem simples, não serão tratados. A quem se interessar, o CSS pode ser visto diretamente no próprio código fonte da página. Do XHTML serão apresentadas apenas os excertos necessários à compreensão do experimento.

Criação do Objeto XMLHttpRequest

A sua criação não é tão complicada como você pode ver abaixo:

try {
xmlhttp = new XMLHttpRequest();
} catch(ee) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(E) {
xmlhttp = false;
}
}
}

O objeto, e consequentemente o experimento, foi testado no Firefox 1.5.0.4, no Opera 8.54, Netscape 7.2 e no IE 6 (os que tenho instalado). Observe que em xmlhttp teremos o objeto de acordo com o navegador em uso, ou em caso de não ter suporte, lhe é atribuído o valor false.

O Formulário

Os detalhes do experimento serão explicados com base nos elementos e campos do formulário.

a) Código inicial do elemento form

<form class="form-cadastro" name="form_cad" action=""
onsubmit="verifica(document.form_cad.opc.value); return false;" method="get">

Ao submeter o formulário, clicando em qualquer dos ícones, é chamada a função verifica() com o parâmetro correspondente à operação selecionada – incluir, alterar, excluir ou consultar. O parâmetro é setado em um <input type=”hidden”> antes de enviar o formulário.

O return false bloqueia o submit, uma vez que todo o processo é efetuado pelo objeto XMLHttpRequest, evitando-se o refresh da página. A função verifica() e outros detalhes são explicados abaixo.

b) O campo id e o link buscar

Funcionalidade:

Preencher o campo id e clicar no link buscar para realizar uma pesquisa na tabela.

Código XHTML:

<label id="lbl_cad" for="id_cad">Id:
<input type="text" id="id_cad" name="id_cad" size="8" value="" maxlength="12" />
<a xhref="javascript:busca(document.form_cad.id_cad.value)" mce_href="javascript:busca(document.form_cad.id_cad.value)"   >buscar</a></label><br />

Executa a função busca() ao se acionar o link, passando como parâmetro o valor digitado no campo id.

c) a função busca():

Será explicada por partes. A visão geral da função pode ser vista no corpo da página XHTML.

Inicialmente, a função recebe em param o valor digitado no campo id (linha 1), exibe a mensagem “Aguarde …” no campo nome (linha 2) e verifica se esse valor é numérico (linha 3). Caso contrário, exibe um alerta (linha 4), retorna o foco ao campo id (linha 5) e limpa o campo nome do formulário (linha 6).

01 function busca(param) {
02   document.getElementById("id_nome").value="Aguarde ...";
03   if (isNaN(param)) {
04      alert("VICHE! Tem algo de Errado");
05      get_focus('id_cad');
06      document.form_cad.elements[1].value = '';
07      return;
08   }

O método open é constituído de três parâmetros – método = “GET”, url = “rotina2.php?id=”+param e async = “true” – e tem como função preparar o objeto XMLHttpRequest para uma requisição. Quando ativado, requisita o programa PHP passando como parâmetro o valor informado no campo id através do método GET, de forma assíncrona.

   xmlhttp.open("GET", "rotina2.php?id="+param,true);

A função onreadystatechange (veja código abaixo) dispara um evento quando o estado da requisição muda. O if (linha 2) verifica se a requisição foi finalizada com sucesso (= 4) utilizando-se da propriedade readyState do objeto. Se sim, recebe o retorno de rotina2.php em formato JSON, através da propriedade responseText (linha 3) do objeto XMLHttpRequest. O alerta comentado no código, foi utilizado para checagem da resposta durante o processo de desenvolvimento.

Através da função eval() (linha 3) do JavaScript o formato JSON é convertido na matriz aDados, onde aDados[0] indica o resultado da pesquisa/operação e aDados[1] se foi realizada com sucesso.

O if (linha 4) verifica se nenhum registro foi encontrado na tabela. Em caso positivo, limpa os campos do formulário (linhas 5-8), habilita o ícone incluir e desabilita os ícones alterar e excluir (linhas 9-14). A classe imgfull exibe a imagem original do ícone e imgfade a imagem com opacidade para indicar que estão desabilitados. Funcionam sómente no IE e navegadores Mozilla, e foi colocada apenas a título de ilustração (encontram-se no CSS da página).

O else (linha 16) é executado quando o registro é localizado. As instruções (linhas 17-25) habilita os ícones alterar e excluir, desabilita o ícone incluir e exibe os dados no formulário a partir da matriz aDados (linhas 23-25).

A função get_focus() (linha 28) posiciona o foco no campo nome do formulário.

E, finalmente, o método send dispara a requisição (linha 31).

01 xmlhttp.onreadystatechange=function() {
02    if (xmlhttp.readyState==4) {
//     alert(xmlhttp.responseText);
03       var aDados=eval((xmlhttp.responseText));
04       if (aDados[0] == '0' && aDados[1] == 0) {
05          var campos = document.getElementsByTagName('input');
06        for (i=1;i<7;i++) {
07           campos[i].value = '';
08          }
09          document.getElementById("b_incluir").attributes["class"].value = "botao imgfull";
10          document.getElementById("b_incluir").disabled = false;
11          document.getElementById("b_alterar").attributes["class"].value = "botao imgfade";
12          document.getElementById("b_alterar").disabled = true;
13          document.getElementById("b_excluir").attributes["class"].value = "botao imgfade";
14          document.getElementById("b_excluir").disabled = true;
15      }
16      else {
17         document.getElementById("b_incluir").attributes["class"].value = "botao imgfade";
18         document.getElementById("b_incluir").disabled = true;
19         document.getElementById("b_alterar").attributes["class"].value = "botao imgfull";
20         document.getElementById("b_alterar").disabled = false;
21         document.getElementById("b_excluir").attributes["class"].value = "botao imgfull";
22         document.getElementById("b_excluir").disabled = false;
23         for (var i=0;i<aDados.length;i++) {
24            aDados[i]=unescape(aDados[i]);
25            document.form_cad.elements[i].value = aDados[i];
26         }
27      }
28      get_focus('id_nome');
29   }
30 }
31 xmlhttp.send(null)
}

d) Os ícones incluir, alterar, excluir e consultar

Código XHTML:

01 <input name="incluir" id="b_incluir" class="botao imgfade" type="image" disabled="disabled"
value="" title="Incluir Registro" alt="Incluir Registro" xsrc="inclui.gif" mce_src="inclui.gif"   onclick="seta_opc(1)" />

02 <input name="alterar" id="b_alterar" class="botao imgfade" type="image" disabled="disabled"
value="" xsrc="modifica.gif" mce_src="modifica.gif"   title="Alterar Registro" alt="Alterar Registro" onclick="seta_opc(2)" />

03 <input name="excluir" id="b_excluir" class="botao imgfade" type="image" disabled="disabled"
value="" xsrc="elimina.gif" mce_src="elimina.gif"   title="Excluir Registro" alt="Excluir Registro" onclick="seta_opc(3)" />

04 <input name="consultar" id="b_consultar" class="botao" type="image" xsrc="pesquisa.gif" mce_src="pesquisa.gif"
title="Consulta Registros" alt="Consulta Registros" onclick="seta_opc(4)" />

05 <input name="opc" type="hidden" id="opc" />

Os ícones incluir, alterar e excluir são inicialmente exibidos desabilitados e com opacidade (conforme rapidamente já explicado). O ícone consulta fica sempre habilitado e com sua imagem original.

O evento onclick em todos eles aciona a função seta_opc() cujo código é apresentado a seguir e que dispensa comentários por sua simplicidade:

function seta_opc(opc) {
document.form_cad.opc.value = opc;
}

e) A função verifica()

Executada quando o formulário é enviado, conforme mostrado no item a). Recebe como parâmetro a variável opc, checa qual ícone foi clicado e chama as funções executa() e consulta(), conforme o valor de opc.

function verifica(x) {
if (x == 1) executa('1');
if (x == 2) executa('2');
if (x == 3) executa('3');
if (x == 4) consulta();
}

f) A função consulta()

Quando o ícone consultar é clicado a função seta_opc(4) é executada e, em seguida, a função verifica(4), quando o formulário é submetido.

As instruções contidas na função já foram descritas anteriormente. Cabe apenas observar que a resposta é exibida na forma de um alerta do navegador e é passado o parâmetro con com valor 1.

function consulta() {
xmlhttp.open("GET", "rotina2.php?con=1",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send(null)
}

g) A função executa()

Executada quando os ícones incluir, alterar e excluir são clicados, de forma semelhante à explicada no item f).

Inicia com a simples verificação de preenchimento dos seis primeiros campos do formulário (linhas 2-10). Em seguida, é montada a string que será passada para o programa PHP, com base nos dados informados nos campos do formulário (linhas 11-15) e da operação selecionada (op). Faz a requisição (linha 16), dispara o evento (linha 17) e checa se a requisição foi realizada com sucesso (linha 18).

Armazena a resposta no formato JSON em aDados (linha 19), verifica qual a operação realizada e se teve sucesso e exibe um alerta (linhas 20-22), limpa os campos do formulário (linhas 24-26) e seta o foco para o campo id (linha 28).

01 function executa(op) {
02   var erro = 0;
03   for (i=1;i<6;i++) {
04      if (document.form_cad.elements[i].value == '') { erro = 1; }
05   }
06   if (erro == 1) {
07      alert("VICHE! Tem Campo em Branco");
08      get_focus('id_nome');
09      return;
10   }
11   var dados = '';
12   for (i=0;i<7;i++) {
13      dados = dados + "c" + i + "=" + document.form_cad.elements[i].value + "&";
14   }
15   var dados1="rotina2.php?op="+op+"&"+dados;
16   xmlhttp.open("GET", "rotina2.php?op="+op+"&"+dados,true);
17   xmlhttp.onreadystatechange=function() {
18      if (xmlhttp.readyState==4) {
19         var aDados=eval((xmlhttp.responseText));
20     if (aDados[0] == 1 && aDados[1] == "OK") { alert("Registro Incluído") };
21     if (aDados[0] == 2 && aDados[1] == "OK") { alert("Registro Alterado") };
22     if (aDados[0] == 3 && aDados[1] == "OK") { alert("Registro Deletado") };
23      }
24      var campos = document.getElementsByTagName('input');
25      for (i=0;i<7;i++) {
26           campos[i].value = '';
27      }
28      get_focus('id_cad');
29   }
30   xmlhttp.send(null)
31 }

h) A função get_focus()

function get_focus(campo) {
document.getElementById(campo).focus();
}

O Programa PHP

Para não se extender muito, serei breve na explicação do programa cujo trecho inicial é apresentado abaixo.

• linha 2: são extraídos os parâmetros;
• linhas 4-5: conecta e seleciona o banco;
• linhas 6-9: verifica se a requisição partiu do link buscar e executa a função checa_entrada();
• linhas 10-37: verifica se a requisição partiu de um dos ícones incluir, alterar e excluir, substitui os caracteres “[“, ‘ e “,” utilizados no formato JSON, antes de gravar na tabela, e executa a função executa();
• linhas 38-41: verifica se a requisição partiu do ícone consultar e executa a função consulta();
• linhas 42-54: checa se o registro existe na tabela. Se não, retorna como resposta “[‘0′,’0’]”. Se sim, retorna uma string semelhante em formato JSON com os dados do registro selecionado;
• A função consulta(), cujo código não é apresentado, seleciona os primeiros 50 registros da tabela e retorna um texto com o id dos registros;
• E a função executa(), idem, constitui-se dos comandos SQL – INSERT, UPDATE e DELETE -, conforme o ícone selecionado.

01 <?php
02 extract ($_GET);
03 extract ($_POST);
04 $conn = mysql_connect("localhost","usuário","senha") or die ("Erro de Acesso");
05 mysql_select_db ("banco");
06 if ($id) {
07    $resposta = checa_entrada($id);
08    echo $resposta;
09 }
10 if ($op) {
11    $c1 = str_replace(',', '', $c1);
12    $c2 = str_replace(',', '', $c2);
13    $c3 = str_replace(',', '', $c3);
14    $c4 = str_replace(',', '', $c4);
15    $c5 = str_replace(',', '', $c5);
16    $c6 = str_replace(',', '', $c6);
17    $c1 = str_replace('[', '', $c1);
18    $c2 = str_replace('[', '', $c2);
19    $c3 = str_replace('[', '', $c3);
20    $c4 = str_replace('[', '', $c4);
21    $c5 = str_replace('[', '', $c5);
22    $c6 = str_replace('[', '', $c6);
23    $c1 = str_replace(']', '', $c1);
24    $c2 = str_replace(']', '', $c2);
25    $c3 = str_replace(']', '', $c3);
26    $c4 = str_replace(']', '', $c4);
27    $c5 = str_replace(']', '', $c5);
28    $c6 = str_replace(']', '', $c6);
29    $c1 = str_replace("'", '', $c1);
30    $c2 = str_replace("'", '', $c2);
31    $c3 = str_replace("'", '', $c3);
32    $c4 = str_replace("'", '', $c4);
33    $c5 = str_replace("'", '', $c5);
34    $c6 = str_replace("'", '', $c6);
35    $resposta = executa($op, $c0, $c1, $c2, $c3, $c4, $c5, $c6);
36    echo $resposta;
37 }
38 if ($con) {
39    $resposta = consulta();
40    echo $resposta;
41 }
42 function checa_entrada($id_c) {
43    $SEL = mysql_query("SELECT * from cadastro1 WHERE id = '$id_c'");
44    $res = mysql_fetch_object($SEL);
45    if (!$res) {
46       $resposta = "['0','0']";
47    }
48    else {
49       $v = "','";
50       $resposta = "['".$res->id.$v.$res->nome.$v.$res->nome_mae.$v.$res->nome_pai
51       $resposta .= $v.$res->cidade_nasc.$v.$res->pais.$v.$res->telefone."']";
52    }
53    return $resposta;
54 }
55 function executa($op, $c0, $c1, $c2, $c3, $c4, $c5, $c6) {
56 ...
57 }
58 function consulta() {
59 ...
60 }
61 ?>