Posted in Ajax, Javascript, Joomla on 26/nov/2010| Leave a Comment »
Recentemente peguei um site com slides de banners. A animação era em jquery. Depois a cliente pediu para colocar mais animações. Percebi que o site começou travar.
O que pude concluir é que se for uma animação não pesada, javascript da conta, mas se for algo pesado, vale a pena fazer em flash.
Sua máquina irá dar cria se você colocar animações pesadas em javascript.
Fica a dica!
Posted in Ajax, Javascript on 27/nov/2006| 5 Comments »
Procurando pela internet como fazer uma tela de login usando o prototype, achei esse um ótimo artigo escrito por Pedro Antunes. Não era bem o que eu queria, mas já deu uma luz. Pedi a ele que me explicasse melhor o seu código e pude então fazer o que estou postando aqui.
Para fins didáticos eu irei dar uma limpada do código, mas basicamente o código html é da seguinte forma:
<form name=”form_login” id=”form_login” method=”post” action=””>
<label for=”login”>Login</label><br />
<input type=”text” name=”login” id=”login” class=”input”/>
<br />
<label for=”senha”>Senha</label><br />
<input type=”password” name=”senha” id=”senha” class=”input”/>
<br /><br />
<input name=”entrar” type=”button” value=”Entrar” class=”button” onclick=”validarLogin()” />
</form>
<div id=”mensagem” style=”display:none”></div>
Mas o mais importante é como o javascript validarLogin() irá manipular a validação. Aqui está o segredo de tudo…
function validarLogin() {
var login = $F(‘login’);
var senha = $F(‘senha’);
var url = ‘validation.php’;
var pars = ‘login=’+login+’&senha=’+senha;
var myAjax = new Ajax.Request(
url,
{
method: ‘get’,
parameters: pars,
onComplete: mostraResposta
}
);
}
function mostraResposta(requisicaoOriginal) {
var msg = requisicaoOriginal.responseText;
if (msg == “OK “) {
$(“mensagem”).style.display=”none”;
document.location=’index2.php’;
} else {
$(“mensagem”).style.display=”block”;
$(‘mensagem’).innerHTML = msg;
}
}
O script submete para o validation.php o login e a senha. Com isso o arquivo verifica na base de dados se o usuário é valido ou não. Caso não seja, ele retorna “Login inválido”…
//trecho do validation.php
//verifica login
if !($validado) {
echo “Login Inválido”;
} else {
//setar as sessions
echo “OK”;
}
Retornando ao código ajax, pega-se o retorno do arquivo .php e verifica. Se for “OK”, ele torna o div “mensagem” invisivel e redireciona para index2.php. Caso contrario vai deixar o div “mensagem” visivel e vai printar o erro. Observe essa linha:
if (msg == “OK “) {
TEM UM ESPAÇO na frente do OK! Para funcionar a comparação é necessário esse espaço, pois o resultado do requisicaoOriginal.responseText vem com esse espaço. Mas não me pergunte o motivo. Alguma coisa obscura que talvez alguém consiga explicar. Eu não…
PS: Agradecimento especial ao Pedro Antunes que tirou toda minha dúvida!
Posted in Ajax on 22/nov/2006| 8 Comments »
Logo de cara, quem começa com ajax, irá descobrir o Scriptaculous[1]. Uma biblioteca com funções bem interessantes! Há vários exemplos aqui: http://wiki.script.aculo.us/scriptaculous/show/Demos
Para aqueles que não sabem nem do que estou falando, aqui vai o v-zero: http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)
Se você for um desenvolvedor, já deve saber a definição e já sentiu que precisa saber javascript para fazer as coisas funcionarem(escrever todo o código na raça). Muito bem, é sobre isso que vou discutir aqui.
Se você já fez as lições básicas de ajax utilizando XMLHttpRequest, descobriu
que sempre você terá que ficar replicando código. Sempre seu código terá um: document.getElementById(pra pegar os dados do formulário) e os códigos do xmlhttprequest.
O código começa ficar macarrônico! Vendo o código do Scriptaculous, descobre-se que ele usa um framework chamado Prototype[2]! Que inclusive tem manual feito por um brasileiro.
O Prototype definitivamente não é pra usuários leigos. Se você já programa, não terá dificuldade de usar.
Vou exemplificar para mostrar como uma requisição em ajax é mole-mole-fácil-fácil usando o prototype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplo Updater</title>
<script language="JavaScript" src="prototype.js"></script>
<script>
function escreverNome(){
var nome = $F('nome');
var url = 'updater.php';
var pars = 'nome=' + nome;
var myAjax = new Ajax.Updater(
'alvo',
url,
{
method: 'get',
parameters: pars
});
}
</script>
</head>
<body>
<form name="form" method="post">
<input type="text" id="nome"/><input name="botao" value="Escrever" type="button" onclick="escreverNome()"/>
</form>
<div id="alvo"></div>
</body>
</html>
Como vocês podem observar, quando clico no botão Escrever, o mesmo chama uma função normal de javascript.
No $F é o atalho pro document.getElementById do prototype. Pega o valor digitado no campo e coloca pra ser enviado para url que é updater.php.
Como dá pra observar, o Ajax.Updater (do prototype) é uma mão na roda. É so passar os parâmetros, onde será o alvo(na div alvo no nosso exemplo) e ele já faz a requisição.
Código do updater.php
<?
echo $nome;
?>
Referência:
[1] – http://script.aculo.us/
[2] – http://prototype.conio.net/
 | daryl em Como superar a fase pós… |
 | Prinba em Como superar a fase pós… |
 | Rick em Como superar a fase pós… |
 | bobgangrena em Como superar a fase pós… |
 | Walquíria Lima Cahin… em Músicas com Nomes de… |
 | Alexandre em Como superar a fase pós… |
 | Dark Horses em Como superar a fase pós… |
 | Fênix em Como superar a fase pós… |
 | Luan.Dry em Como superar a fase pós… |
| RICK em Como superar a fase pós… |
[muneo::programação e recreio] 