Ajax (parte 2): encarando o mundo real

Conselhos Finais

Você pode querer incrementar sua aplicação, implementando chamadas diferentes ao servidor (como para executar javascript no client de acordo com o retorno, ou preencher um select, por exemplo,) facilitando a vida do seu usuário no client (com coisas como preenchimento automático de formulários de endereço de acordo com o CEP) e efeitos visuais (coisas como isso aqui para arrancar um "Uau!" de quem vê.)

Vai uma dica: tente manter as coisas separadas. Códigos server, chamadas a ele via Ajax, efeitos no navegador, não misture essas coisas. Tente trabalhar em "camadas" em seu javascript, como já faz com HTML e CSS. Uma sugestão de ordem de desenvolvimento:

  1. HTML - cru, puro e simples;
  2. Código server (PHP, ASP, JSP, Python, Ruby, XSLT, CFML...) - O objetivo aqui é ter sua aplicação completa, funcional, de modo que se puser apenas isso no ar, embora esteja feio, as pessoas vão conseguir usar. Não esqueça, você PRECISA validar os formulários e demais entradas do usuário no servidor. Validar no cliente é um adicional que vamos fazer mais tarde, mas não dispensa a validação do servidor;
  3. CSS para a aplicação básica - Isso transforma seu projeto num site. Um site bastante convencional, sem nenhuma mágica javascript, é verdade, mas um site inteiro, completamente funcional, com layout acabado e tudo. Há quem divida esta etapa em duas: na primeira setam-se cores e fontes e tudo aquilo que vai funcionar até no velho Netscape 4 e na segunda se faz a montagem do layout para navegadores modernos (há mais sobre essa abordagem aqui, embora eu prefira ignorar o velho Netscape 4;)
  4. Javascript básico - Validação de formulário, menus em cascata e tudo isso que a gente sempre tem feito (mais sobre isso aqui;)
  5. CSS para o javascript básico - Você pode, por exemplo, deixar vermelhos os campos obrigatórios não preenchidos;
  6. Javascript Ajax - XMLHttpRequest para evitar refresh e tornar a experiência mais confortável;
  7. CSS Ajax - Pode, por exemplo, deixar bonito o "carregando..." e etc.;
  8. Efeitos especiais - Javascript e CSS para encher os olhos, com fades, movimentos e etc.

Note que o site está pronto no passo 3, tudo o que vem depois é opcional e vem para enriquecer a experiência. A idéia é sobrepôr várias camadas simples, de modo que se as últimas falharem seu site continuará perfeito e você mantém a simplicidade do conjunto inteiro. Simplicidade é garantia de desenvolvimento rápido e manutenção sem dores de cabeça.

Elcio Ferreira * Tableless.com.br