Realmente eu achava chato programar em javascript, algo complicado, cheio de lerolero, mas então eu encontrei o jQuery, e programar em javascript se tornou algo fácil e muito divertido. Realmente eu fiquei muito feliz a descobrir este framework (se é que pode ser chamado assim). Hoje vou falar de uma das funcionalidades mais uteis e mais requisitadas que podemos usar para sistemas web, o ajax.
Tirando da Wikipedia: AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. Mas na linguagem mais simples, conseguimos fazer uma requisição a um arquivo (pagina) sem precisar fazer reload de tela. Sim, isto torna muito mais rápido a execução do seu código, e muito mais bonito e elegante tbm.
Uma coisa que vamos aprender como jQuery é que vamos separar totalmente o nosso código javascript do nosso html. Gosto de pensar a programação web em camadas, sendo elas: conteúdo (html), estilo (css) e ação (javascript). Ainda temos a tomada de decisão (php), mas acho que falar sobre isto é coisa para outro tutorial. Vamos ao que interessa.
Primeiro, precisamos baixar o jQuery direto da fonte: http://docs.jquery.com/Downloading_jQuery
Vamos entender como funciona a estrutura básica:
<!doctype html> <html> <head> <!-- aqui vamos fazer o nosso include da biblioteca do jQuery --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- aqui vamos escrever nosso código javascript --> </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>
Muito simples, fizemos a requisição do nosso arquivo jQuery, e logo em seguida escrevemos nosso código entre as tags .
Mas vamos agora ao nosso código:
<!doctype html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#button_busca").click(function () { $("form").submit(function () { return false; }); var busca = $("#busca").val(); $.ajax({ type: "POST", url: "busca.php", data: "busca="+busca, success: function(html){ $("#resposta").html(html); } }); }); }); </script> </head> <body> <div id="resposta"> </div> <form> <fieldset> <legend>Busca</legend> <dl> <dt><label for="busca">Palavra Chave:</label></dt> <dd><input type="text" name="busca" id="busca" /></dd> <dd class="botao"><button id="button_busca">Busca</button></textarea></dd> </dl> </fieldset> </form> </body> </html>
Primeiro fazemos o include da biblioteca jQuery. Depois temos a linha: “$(document).ready(function(){” isto faz com que assim que a pagina termine de ser carregada ele aplique as rotinas que vamos escrever abaixo dele. Abaixo temos “$(“#button_busca”).click(function () {” que vai associar ao id button_busca uma ação quando ele for clicado.
Usamos a função “$(“form”).submit(function () { return false; });” para que quando o botão for clicado ele não faça um reload de tela enviando para a action do form.
Criamos uma variável e atribuímos a ela o valor que estiver no campo de input com o id busca (“var busca = $(“#busca”).val();”).
A nossa chamada ajax ocorre na linha 13, onde chamamos a função e passamos os parâmetros:
- type: tipo de encoding que vai ser enviado para o arquivo.
- url: caminho completo do arquivo que vai ser requisitado.
- data: os valores que serão passados, no nosso exemplo estão passando a variável busca, com o valor que pegamos do input com o id busca.
- success: dizemos que caso tudo funcione ok, execute isto, no nosso caso estamos pegando o retorno da requisição e jogando o mesmo como html na div de id resposta.
Segue ainda o código php:
<?php echo "Resultado da Consulta aqui: $_POST[busca]"; ?>
Fonte: Rafael Cirolini/NerdHead