Distribuindo valores recebidos de uma consulta com Ajax

Montei um exemplo simples de como fazer para distribuir os dados vindo do Ajax aos campos existentes no formulário.

Aqui não explicarei como é feita a parte do Ajax pois no fórum já tem bastante exemplos. Estou partindo do ponto em que vocês recebem os dados do Ajax.

Observações:

1) o retorno do ajax tem que vir em uma estrutura similar a um array. Como fazer isso? Lá na página onde voces fazem a busca no banco de dados tem o resultado da pesquisa certo? É só imprimir o resultado com as separações para a função javascript saber dividí-las.

2) Como é um exemplo, coloquei fixo a variavel Retorno, mas ela deve vir do Ajax. Exemplo:

SetaCampos(xmlHttp.responseText);
3) Os campos que devem receber valores precisam conter um ID igual, como no exemplo "grupo".

4) O array de retorno deve estar na ordem de exibição dos campos, exemplo: "primeiro_valor|segundo_valor|terceiro_valor". Ou seja, a ordem em que os campos do grupo estao sendo exibidos.

Sugestão:

O exemplo usa o ID para apontar quais campos receberão valores. Isso quando a aplicação recebe campos no meio que não receberam - como no exemplo o campo 3. Uma sugestao para quando voces nao tiverem esta situação, é envolver todos os campos dentro de uma DIV.

Exemplo de aplicação:

Para voces terem ideia aonde isso pode ser aplicado, imaginem aquelas buscas de endereço onde digita-se o CEP e retornam os dados (Endereço, número, cidade, estado) e cada campo receba seu valor.

Navegadores:

Testado e funcionando no IE 7 e Firefox 2.0.0.14

Código:

<script language="JavaScript">
 function SetaCampos(Retorno) {
 var frm = document.frm.grupo;
 var TotalElementos = frm.length;
 var ArrayRetorno = Retorno.split("|");

 for (var i=0; i < TotalElementos; i++)
 {
 frm[i].value = ArrayRetorno[i];
 }
 }
 </script>

 <form name="frm">
 Campo1:<input type="text" name="campo1" id="grupo">

 Campo2:<input type="text" name="campo2" id="grupo">

 Campo3:<input type="text" name="campo3">

 Campo4:<input type="text" name="campo4" id="grupo">

 Campo5:<input type="text" name="campo5" id="grupo">

 <input type="button" value="Buscar" onclick="SetaCampos('valor1|valor2|valor3|valor4')">
 </form>

Qualquer dúvida, crítica, elogio ou sugestão.... só postar ;)