Outras tecnologias
Dojo: Usando Ajax, fade out e fade in
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.