Hoje falaremos sobre uma variante do Ajax. Não sei se isso tem um nome (e se tiver, também não interessa), mas tem algumas vantagens… Seria um JavaScript assíncrono, sem a utilização de XMLHttpRequest e, portanto, não caracterizando Ajax.

A Idéia

Partiremos do seguinte raciocínio: utilizaremos scripts criados dinamicamente, definindo como “src” uma página server-side qualquer. Teríamos o equivalente a:

<script src="pagina_server_side.php"></script>

E como isso? Utilizaremos DOM, e também JSON, para “carregar” os dados.

O Código

Como disse, essa “técnica” resulta em um número menor de linhas, pois não precisamos criar o objeto XMLHttpRequest (que é diferente entre os browsers), e também não precisamos controlar o readyState (pelo menos não precisa).

Primeiramente, é necessário criar o documento server-side. Ele poderá fazer consultas a banco de dados, arquivos texto, respostas do usuário ou qualquer outra coisa. Mas, no nosso caso, esse documento deve retornar uma string JSON válida, ou seja, um objeto mais ou menos assim:

var json = { "id": 1, "link": "http://juliogreff.wordpress.com", "name": "JulioGreff's Blog" }
// Não podemos esquecer de colocar em uma variavel!

Também não podemos esquecer do header! Essa resposta deve ser enviada como JavaScript, com o seguinte header: “Content-type: text/javascript”.

Para que isso tudo aí tenha utilidade, é necessário passar parâmetros para o lado do servidor. Para isso, usamos nossas queridas query strings. Elas vão escolher o que será retornado. E agora……. a parte em JavaScript (não via a hora disso! Não gosto muito de PHP):

var elHead = document.getElementsByTagName('head')[0]; // Pegamos o elemento head
var elScript = document.createElement('script'); // Criamos um elemento script
elScript.src="http://www.eu.com/json.php?id=1"; // Definimos um src para o script
elHead.appendChild( elScript ); // Colocamos script dentro de head

Simples assim… E, para pegar os dados retornados, usamos o código abaixo:

var id = json.id;
var link = json.link;
var name = json.name;

Usando na Prática

Bem, pra usar isso aí na vida real não é difícil não. A parte mais complexa fica a cargo do PHP, ASP ou qualquer um outro. Ele deve se encarregar de analisar a query string, fazer a consulta em algum lugar e retornar os dados, como se fossem um pequeno bloco de JavaScript, como eu mostrei.

A parte em JavaScript é extremamente fácil. As duas primeias linhas não precisam ser modificadas. Quando você for definir o src, lembre-se de colocar a query string de acordo com a consulta que você deseja. Praticamente tudo depende dela… ou nem tanto, mas é importante mesmo assim.

Dependendo do tipo de sua aplicação, página ou bugiganga tecnológica (existe isso por aí, infelizmente), a query string pode ser gerada a partir de vários lugares: um link, uma resposta no formulário, um evento qualquer… Mas lembre-se de uma coisa: essa técnica não aceita o href=”http://juliogreff.net/utilizando-o-método-post/” title=”Utilizando o Método POST”>método POST, portanto, 255 caracteres é o nosso limite.