SACK - Simple AJAX Code-Kit

Olá amigos.

Hoje eu vou falar um pouco sobre Ajax, que é a bola da vez entre os programadores. Independente da linguagem que cada um utiliza, na web o ajax dá uma bela incrementada no sistema desenvolvido.

Pra quem não sabe, Ajax é um acrônimo para Asynchronous Javascript And XML. Já ouvi muitos dizerem que Ajax é uma nova tecnologia, mas não é. Ajax é um conjunto de tecnologias trabalhando juntas.

A grande vantagem do Ajax é o dinamismo que ele proporciona as páginas web. Vamos entender melhor. Num sistema comum, quando o usuário interage com sua interface, geralmente esta interação gera uma requisição HTTP para o servidor web. O servidor processa esta requisição e devolve a resposta. O grande problema é que a página que faz a requisição é recarregada, e informações como de um formulário, por exemplo, são perdidas. Isso é perceptível para qualquer usuário, transmitindo uma sensação de lentidão, e de certa forma é lento.

Aí é que entra o Ajax. Através de um código simples em Javascript, é possível enviar esta requisição ao servidor de forma assíncrona ou não, sem a necessidade de recarregar a página. Desta forma o processamento e exibição do resultado acontecem de uma forma mais rápida que a convencional.

Bom chega de blablabla e vamos colocar a "mão na massa".
O primeiro passo é criar um objeto XMLHTTP. Para criar este objeto é muito importante que o programador faça um código que funcione em diversos navegadores, caso contrário, muitas críticas surgirão para esse sistema "limitado" e "preconceituoso". ;-)

O código abaixo cria um objeto XMLHTTP que funciona no Internet Explorer e Firefox, e mostra um exemplo simples de utilização deste objeto.

var ajax = null;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
 ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
 ajax = null;
}
}

if( ajax ) {
ajax.open('GET', 'exemplo.asp?a=1&b=2&c=3', true); // true=Assíncrono,false=sincrono
ajax.onreadystatechange = function() {
 if( ajax.readyState == 4 ) { // VERIFICA SE O PROCESSAMENTO DO SERVIDOR TERMINOU
   var obj = document.getElementById('id_do_elemento_que_recebe_a_resposta');
   if( ajax.status == 200 ) { // Status 200 significa que a requisição foi processada com êxito
     obj.innerHTML = ajax.responseText;
   } else {
     obj.innerHTML = 'Erro no processamento da requisição.';
   }
 }
}
ajax.send(null);
} else {
alert( 'Seu browser não tem suporte a requisições XMLHTTP.' );
}

A página exemplo.asp poderia resgatar as variáveis passadas por QueryString e escreve-las através do comando response.write, por exemplo.

Tudo isso parece muito bonito, porém, o que isso tem a ver com o título deste post? Tudo.
O título é o nome de um objeto que encontrei na net que faz tudo o que eu mostrei acima de uma maneira muito mais simples. Com este objeto o mesmo exemplo acima, pode ser re-escrito em apenas três linhas. Vejam só:

var ajax = new sack('exemplo.asp');
ajax.element = 'id_do_elemento_que_recebe_a_resposta';
ajax.runAJAX('a=1&b=2&c=3');

Este objeto permite, por exemplo, informar o usuário que o Ajax está aguardando o término do processamento no servidor, e executar uma função após o procesamento, mas tudo isso de forma simples e prática. Veja o mesmo exemplo com a mensagem "Carregando..." e um alert indicando o termino ou erro do processamento no servidor:

var ajax = new sack('exemplo.asp');
ajax.element   = 'id_do_elemento_que_recebe_a_resposta';
ajax.onLoading = function(){ this.elementObj.innerHTML = 'Carregando...'; };
ajax.onError   = function(){ alert('Ocorreu um erro ao processar a requisição.'); };
ajax.onCompletion() = function(){ alert('Requisição processada com êxito'); };
ajax.runAJAX('a=1&b=2&c=3');

Simples e fácil, não acham? Eu particularmente gosto muito deste objeto e utilizo em muitos sistemas que desenvolvo. Vou postar outros códigos utilizando este objeto futuramente. O objeto pode ser baixado em http://www.twilightuniverse.com/downloads/sack/tw-sack.js.

Aquele abraços e até o próximo post.