Outras tecnologias

Dojo: Usando Ajax, fade out e fade in

Por em

Esse post vai mostrar uma função muito simples utilizando o DojoToolkit e também é totalmente integrável com qualquer framework, principalmente com o Zend.

Atualmente muitos procuram tutoriais de Dojo na internet e acabam se deparando que os mesmos não funcionam. Na realidade, a maioria dos tutoriais mostram exemplos da versão <= 0.9 e quando baixamos no site ficamos com a 1.1.

Segue abaixo uma simples função abstrata, para executar uma operação com ajax, enviando dados de um formulário, e ainda pega o resultado e o coloca dentro de uma “div” em formato HTML.

Arquivo HTML:

Arquivo JS:

dojo.xhrPost( {
// Essa URL fará uma requisição com o servidor
url: url,
handleAs: "text",
form: form,
timeout: 5000, // Tempo em milisegundos

// Função que será carregada quando a operação por realizada.
load: function(response, ioArgs) {
dojo.fadeOut({
node: box,
onEnd: function(){
// seta os dados e fade back in
dojo.byId(box).innerHTML = response;
dojo.fadeIn({node: box}).play();
}
}).play();
return response;
},
// Função que será executada caso haja algum erro.
error: function(response, ioArgs) {
console.error("HTTP status code: ", ioArgs.xhr.status);
return response;
}
});
}

A principal mudança da versão 0.9 em relação a 1.1 (sobre Ajax) foi de que antes a utilização de ajax era devida a classe dojo.io.bind que hoje foi substituida por dojo.io.script e os principais métodos de chamada são:

  • dojo.xhrPost (método POST)
  • dojo.xhrGET (método GET)

Qualquer dúvida, fiquem a vontade para comentar.