Sempre gostei de escrever minhas próprias funções para meus scripts, e nunca havia usado uma biblioteca JavaScript (não que eu não tenha tentado). Elas nunca se adaptavam ao que eu queria. Até o lançamento da Mootools 1.11, o qual ouvi falarem muito bem. Resolvi testar.

Já temos a versão 1.2, então hora de atualizar!

Motools é uma biblioteca JavaScript orientada a objetos, muito modular, compacta e, na minha opinião, muito simples de usar (não tanto quanto a jQuery, foi por isso que gostei). Nesse post vou explicar como fazer as requisições assíncronas, vulgo Ajax.

Fazendo o Download

Vá em http://mootools.net, e faça o download da biblioteca. Escolha os módulos que achar necessário para usos futuros, mas inclua os seguintes: Core, Function, Array, String, Element e Ajax (sério?). Também escolha a compressão que quiser.

Feito isso, crie uma nova página, e inclua o script.

Uma Requisição Simples

Vamos fazer uma simples requisição, sem retorno algum, bastando informar ao servidor que alguma coisa aconteceu. A base para o uso de Ajax é a classe Ajax (isso mesmo, é assim que os construtores são chamados aqui, por serem baseados em um construtor Class, da própria biblioteca). Ela cria a requisição, mas não a executa. Essa parte fica a cargo do método request. Vamos ao código:

var options = { "method": "get" };
var ajaxReq = new Ajax("http://localhost/informa_servidor", options).request();

A classe possui apenas dois parâmetros que podem ser passados: url (String) e options (Object). Vamos ver todas mais adiante. Setei apenas "method", pois o método padrão na biblioteca é POST. Um bug que encontrei: se você definer o método como “GET” em vez de “get”, a biblioteca tratará como sendo POST. Ou seja, use sempre letras minúsculas.

Atualizando um Objeto

Mais uma grande facilidade da Mootools (não que as outras também não tenham): não precisamos, necessariamente, criar uma função para ser executada quando a requisição for completada, podemos apenas definir um objeto a ser atualizado. Isso pode ser feito através da opção update (String ou Object). Mais um código:

var options = { "method": "get", "update": "elementoPraAtualizar" };
var ajaxReq = new Ajax("http://localhost/retorna_resposta", options);

Essa seria uma maneira de retornar uma resposta “estática” do servidor, já que não enviamos nenhum dado junto com a requisição. Aí entra a opção data (String, nesse caso), que levará a query string juntamente com a requisição, assim: “parametro=valor&outro=valor”.

A opção data, além de uma query string, pode ser um objeto ou um elemento <form>. A biblioteca se encarrega de transforma-los em query string, seja para envio pelo método GET ou POST. Legal, né? Outro exemplo:

var queryString = { "id": userId, "action": "getName" };
var options = { "method": "get", "update": "algumElemento", "data": queryString };
var ajaxReq = new Ajax("http://localhost/envia_query_string", options);

Função onComplete

Muitas vezes não se torna necessário tratar a resposta da requisição, bastando passa-la diretamente para um elemento. A diferença é quando os dados devem ser analisados, testados, interpretados ou qualquer coisa do gênero, ou seja, precisamos de uma função pra ser executada no final da requisição. A Mootools também permite isso através da opção onComplete. Aí fica a nosso cargo implementar toda a complexidade necessária na função. Código de novo:

var options = { "method": "get", "onComplete": onComplete };
var ajaxReq = new Ajax("http://localhost/requer_tratamento", options);
var onComplete = function(text) {
  var returnText = text.treatRequest();
  $("placeholder").empty().setHTML(returnText);
  applicationStatus = 0;
}

Como podemos ver, temos todo o controle de volta quando precisamos. Seria melhor ainda se pudéssemos ter controle sobre o XML que é enviado… Que bom, pois podemos ter controle sobre ele. Para a função do onComplete, são passados dois parâmetros: o texto e o XML. Muito bom, não?

Enviando um Formulário

Essa também é ótima. Podemos enviar um formulário inteiro com apenas um comando, que é uma extensão da classe Element disponibilizada pelo módulo Ajax. Através da função $, obtemos o formulário, e pelo método send enviamos a requisição via POST.

var formReq = $("meuForm").send();

O método send possui apenas o parâmetro options, sem URL (ela é retirada do action do formulário). As opções podem ser as mesmas de Ajax.request.

Interpretando Scripts

Todo mundo sabe que às vezes é necessário interpretar toda ou uma parte da requisição, enviada como JavaScript. A Mootools disponibiliza mais duas opções para esses casos: evalScripts e evalResponse (ambos Boolean).

Através de evalScripts, a biblioteca interpreta todos os scripts da requisição que estiverem entre as tags <script>. Caso o header recebido seja “text/javascript” ou “text/ecmascript”, toda a requisição é interpretada.

Já a opção evalResponse é mais generalista. Mesmo que seu header seja “text/html”, “text/xml” ou qualquer outra coisa, toda a requisição será interpretada. Não interessa o tipo de conteúdo. Parece ambíguo, mas as duas opções têm seu uso real.

Lembrando: as duas opções interpretam os scripts no escopo global.

Recebendo os Dados

Como sei que muita gente tem problemas na hora de receber os dados no lado do servidor, no caso do método POST, veja como receber os dados pelo PHP, de maneira simples e rápida.

Quanto à biblioteca, tem alguns pequenos defeitos. Aquele bug do “GET” que eu falei acima, a falta de um controle sobre os stateChanges, que foi retirado nessa versão, enfim. Mas isso não torna a biblioteca menos útil.

E vou ficando por aqui. Até!