Ajax com a Mootools

 

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.

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.

Tá certo que esse módulo tem seus 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é!

Julio Greff

Programador e Desenvolvedor de Web

Compatilhe esse artigo!

Leave a Reply

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

This site uses Akismet to reduce spam. Learn how your comment data is processed.