O José Silva publicou um artigo sobre uma situação em que o AJaX (Asynchronous JavaScript and XML) lhe dá pouco controlo. Eu penso que existe uma solução simples para o problema dele.

A solução passa por algo que utilizo há algum tempo, que apelido de AJaJ (Asynchronous JavaScript and JavaScript), e que encontrei numa breve nota algures, não me lembro já onde.

Na prática utilizo o AJaJ para as coisas que normalmente poderia utilizar AJaX, como fazer submissão de dados assincronamente, actualizar dados nas páginas e esse tipo de coisas.

Mas, como funciona? Bem, na prática o que faço é criar um URL, dinâmico, que depois adiciono ao documento como sendo um javascript. O código para isto seria, por exemplo:


<script>
var url='http://www.dominio.com/url/dinamico.html?alguns=dados';
var scrpt=document.createElement('script');
scrpt.src=url;
document.body.appendChild(scrpt);
</script>


Claro que este código normalmente fica dentro de uma função, e o url é gerado em javascript, para incluir valores de formulários ou outros quaisquer.

Para que tudo funcione correctamente é necessário garantir que o URL é sempre distinto, ou de outra forma o Internet Explorer pode utilizar a versão em cache do resultado devolvido.

Mas, então o que é que deve ser devolvido pelo url chamado?

Bem, esse URL deve fazer as acções necessárias à actualização dos dados no servidor e devolver um script javascript que procede à actualização da página no browser.

No caso específico que o José aponta, eu implementá-lo-ia assim:

No ficheiro HTML com a listagem:
...
<script>
function setoff(idlist) {
var url='http://www.dominio.com/dynjs/off.html?id='+idlist;
var scrpt=document.createElement('script');
scrpt.src=url;
document.body.appendChild(scrpt);
}
function seton(idlist) {
var url='http://www.dominio.com/dynjs/on.html?id='+idlist;
var scrpt=document.createElement('script');
scrpt.src=url;
document.body.appendChild(scrpt);
}
</script>
<!-- A listagem activa -->
<div id='listagemon'>
<dl>
<dt>batatas</dt><dd>Muitas batatas</dd><dd><a href='#' onClick='setoff(1); return false;'>Desactivar</a></dd>
<dt>feijões</dt><dd>Muitos Feijões</dd><dd><a href='#' onClick='setoff(3); return false;'>Desactivar</a></dd>
</dl>
</div>
<div id='listagemoff'>
<dl>
<dt>cenoras</dt><dd>Muitas cenoras</dd><dd><a href='#' onClick='seton(2); return false;'>Desactivar</a></dd>
</dl>
</div>
...


E os ficheiros dynjs/off.html e dynjs/on.html, seriam responsáveis por actualizar a base de dados e devolver um javascript do tipo:
var on=document.getElementByID('listagemon');
on.innerHTML="<dl><dt>batatas</dt><dd>Muitas batatas</dd><dd><a href='#' onClick='setoff(1); return false;'>Desactivar</a></dd></dl>";

var off=document.getElementByID('listagemoff');
off.innerHTML="<dl><dt>cenoras</dt><dd>Muitas cenoras</dd><dd><a href='#' onClick='seton(2); return false;'>Desactivar</a></dd><dt>feijões</dt><dd>Muitos Feijões</dd><dd><a href='#' onClick='setoff(3); return false;'>Desactivar</a></dd></dl>";


Com isto o problema de actualizar as listas deixa de existir, uma vez que elas são actualizadas pela resposta ao pedido de alteração à base de dados.

Algumas notas

1. O código HTML que é devolvido dentro das strings javascript têm de vir todo na mesma linha, uma vez que as instruções javascript são automaticamente terminadas no fim da linha.
2. O código apresentado não prevê a situação de o mesmo URL ser chamado duas vezes, e se isso acontecer não irá funcionar em IE. Isso acontecer quer dizer, por exemplo, desactivar, activar e voltar a desactivar o mesmo item no exemplo anterior. Para corrigir o problema basta adicionar um parametro que seja um numero aleatoria, gerado para cada chamada (ou um contador).
3. Esta solução apenas funciona se os dados a enviar foram submetiveis por GET, isto é, podem ser passados como parametros no URL.

Pergunto eu: Alguém tem solução melhor?