Ajax usando a freeDOM
Ontem foi publicada a versão 0.2 do modulo de ajax da freeDOM.js. Alguns bugs corrigidos, aumento na flexibilidade e novas implementações foram algumas das mudanças da nova versão.
Além disso foi mantida total compatibilidade com as versões anteriores, portanto se você já usava, não precisa se preocupar em mudar seu código.
Criando uma requisição simples
Para quem não a conhece vou mostrar a simplicidade de se usar este modulo.
Inclua as bibliotecas freeDOM.js e freeDOM-ajax.js no seu documento, depois é só fazer a requisição:
-
ajax.addRequest("/script.php", fnRetorno, $('formulario'));
Pronto!
A função addRequest recebe basicamente 3 parâmetros: O primeiro será a URL que será requisitada, o segundo a função que será executada quando a requisição estiver completa e o terceiro serão os dados que serão passados. No exemplo é passado um formulário como parâmetro, isso fará com que o script peque todos os campos do formulário e seus valores e envie-os como POST automaticamente, poupando bastante trabalho. Você também pode passar uma string no formato da string GET da URL (x=1&y=2&z=3) ou até mesmo um vetor mesclando formulários e strings.
Agora, para finalizar, é só criar a função fnRetorno que o primeiro argumento da função será o responseText da requisição ajax.
-
function fnRetorno(str)
-
{
-
alert(str);
-
}
O Efeito 'carregando...'
Com a versão 0.2 ficou muito mais fácil criar o famoso efeito de carregamento.
Comece criando uma div com id loading contendo o texto que exibirá a mensagem. Depois defina as funções startLoading e finishLoading:
-
ajax.startLoading = function () { removeClass($("loading"), "hidden"); };
-
ajax.finishLoading = function () { addClass($("loading"), "hidden"); };
Pronto! E não esqueça de definir no CSS que a classe hidden seja display:none; e que o id loading tenha position:absolute; além de outras estilizações a seu gosto.
Posteriormente eu explicarei como criar requisições mais completas.
em 30 de December de 2006 às 12:03 am
Maravilha brother.
Acabei de atulizar a lib de Ajax na Blogosfera e já incrementei o efeito de loading…
Estava precisando
Um abraço.
em 12 de January de 2007 às 3:16 pm
Prezado Andre,
não consegui fazer o Carregando funcionar.
1 - Primeiro inseri os dois js.
2 - Eu criei a DIV. Modifiquei o nome da classe para Oculta
Carregando…
3- Dai no meu arquivo css(skin.css) coloquei:
.oculta
{
display:none;
}
Mas nada funcionou.
Tem como vc me dar uma ajuda?
Obrigado.
em 12 de January de 2007 às 3:18 pm
Prezado Andre,
não consegui fazer o Carregando funcionar.
1 - Primeiro inseri os dois js.
freeDom/freeDOM-0_2_9.js
freeDom/freeDOM-ajax-0_2.js
2 - Eu criei a DIV. Modifiquei o nome da classe para Oculta
id=”loading” class=”oculta”
com o texto:
Carregando…
3- Dai no meu arquivo css(skin.css) coloquei:
.oculta
{
display:none;
}
Mas nada funcionou.
Tem como vc me dar uma ajuda?
Obrigado.
em 12 de January de 2007 às 3:24 pm
Olá Thiago,
Você deve definir as funções startLoading e finishLoading, como a seguir:
ajax.startLoading = function () { removeClass($(”loading”), “oculta”); };
ajax.finishLoading = function () { addClass($(”loading”), “oculta”); };
E quando você executar uma requisição ajax a div vai aparecer e sumir quando a requisição terminar.
Abraços
em 29 de January de 2007 às 9:49 am
Olá
Para mim funcionou tudo ok… mas estou com problemas para fazer requisições múltiplas ou não estou fazendo corretamente… seria algo do tipo:
ajax.startLoading();
ajax.addRequest(”/script1.php”, fnRetorno, $(’formulario’));
ajax.addRequest(”/script2.php”, fnRetorno, $(’formulario’));
ajax.addRequest(”/script3.php”, fnRetorno, $(’formulario’));
ajax.finishLoading();
Tb implementei a fnRetorno para trabalhar com essas requizições,
ficou mais ou menos pq o problema é que ela carrega todas de uma vez e não como se fosse threads sem falar que que o freedom trabalha com pilhas e eu acho que deveria ser filas pois as requizições não ocorrem em ordem que foram realizadas….
Bom estou cheio de dúvidas se puderes me ajudar com algum agradeço
Abraços
em 1 de February de 2007 às 4:05 pm
Fala xará, eu fiz um teste aqui e não deu certo. Eu tenho a minha página .html com o seguinte conteúdo:
…
ajax.addRequest(”script.php”, fnRetorno, $(’formulario’));
function fnRetorno(str)
{
alert(str);
}
…
…
E na página script.php eu apenas dou um echo em $_POST[’nome’], porém não me mostra nada.
se você puder me ajudar eu lhe agradeço.
Obrigado.
em 2 de February de 2007 às 9:46 pm
funfa sim.. vc colocou o id no form?
em 6 de February de 2007 às 2:14 pm
Como ficou o teu html Guigo?
eu coloquei o id do form.
abraços,
André
em 24 de February de 2007 às 9:42 pm
galera nao to conseguindo fazer a requisição em AJAX
segue o código
ajax.html
AJAX com FREEDOM
var ajax = new ajax();
ajax.addRequest(’server.php’,fnSeguinte,$(’formID’));
function fnSeguinte()
{
alert(’ok’);
}
server.php
“;
echo $_POST[”nome”];
?>
no firefox da o seguinte erro:
Erro: ajax is not a constructor
Arquivo-fonte: http://localhost:8090/w3FormValidator/teste_ajax.html
Linha: 11
o que pode ser…
aguardo