Ajax com o Jquery

Uma das maiores vantagens do uso de uma Framework Javascript é sua facilidade de trabalhar com o Ajax. Ao invés de criar as requisições pelo httprequest em códigos intermináveis e que precisam ser adaptados para funcionar em todos os Browsers, a framework faz este trabalho para você. Resta ao desenvolvedor a criatividade de aplicá-la. Um dos primeiros motivos de procurar o Jquery foi primeiramente o Ajax. Assim como a maioria das frameworks são procuradas. Com a explosão dessas frameworks Javascript como a Jquery, costuma-se associar seus efeitos e suas outras capacidades com Ajax. Para alguns, tudo de legal e novo com o Javascript, como efeitos de animação e de interface é julgado como Ajax. Essa falsa impressão ocorreu justamente por causa da explosão das frameworks e todas as suas funcionalidades.

O Jquery oferece vários meios de trabalhar com o Ajax, desde requisições simples até as mais complexas. Neste post vou mostrar como fazer uma simples requisição de uma página externa, sendo passadas duas variáveis e chamando um arquivo externo usando o objeto httprequest e com isso dispensando o reload da página.

Neste exemplo, irei usar o Ajax para inserir em uma div um conteúdo externo quando o usuário clica em um link.

Enquanto a requisição estiver sendo processada, irá aparecer uma div que funcionará como o carregamento até a requisição ser finalizada.

Abaixo a marcação deste código:

A url /echo/html é fictícia e usada pelo jsfiddle para poder emular as requisições ajax para conseguir demonstrar no exemplo.

Vamos analisar este código e descrever todos os métodos usados.
Linha 01: Função do Jquery que executa tudo que está dentro depois que todos os objetos DOM foram carregados. Aconselhável ser aplicado em todo código Jquery que você for usar.
Linha 02: Usando o método hide que esconde a div selecionada, no caso a div com id carregando.
Linha 03: Executando o evento click para a classe exemplo(que está aplicada na tag a). Com isto, quando o usuário clicar no link, será executada as funções que virão abaixo.
Linha 04: Aplicando o método ajaxStart na div com id carregando. O método ajaxStart especifica uma função a ser executada enquanto uma requisição se inicia e não há nenhuma outra ativa. Assim, ela manda exibir a div carregando(através do método show) enquanto a requisição estiver sendo processada e esconde a div com a classe alvo que ficará escondida através do método hide.
Linha 08: Aplicando o método ajaxStop na div com id carregando. O método ajaxStop faz o contrário, ele executa uma função quando a requisição está completa. A função executada irá esconder a div carregando assim como mostrará a div com a classe alvo através dos métodos hide e show.
Linha 12: Fazendo a requisição simples através do método $.get. Este método é usado para fazer requisições simples de ajax através do método get. Também poderia ser usada o método $.post se desejasse passar as variáveis através do método post. Os parâmetros são o arquivo a ser chamado, as variáveis que serão passadas com o seu valor e uma função callback, que é executada quando os dados são carregados com sucesso e aceita como parâmetro os dados passados. Assim, dentro desta função eu mandei apagar o conteúdo da div com a classe alvo através do método empty e logo depois executei o método html que aceita como parâmetro o conteúdo a ser escrito na div. Nesse parâmetro eu passei os dados requisitados que estão no arquivo chamada. Aqui eu usei dois métodos em uma mesma linha, lembrando que o Jquery aceita isto perfeitamente.
Linha 17: O return: false é usado simplesmente para anular o comportamento padrão do elemento, no caso o link, o comportamento padrão é clicar e a página ir para o chamada.php sem usar o Ajax. Com isto, eu permiti que os dados também fossem carregados se o usuário não tiver Javascript ou seu browser não aceitar o objeto httprequest.
O arquivo chamada.php: Neste arquivo há no cabeçalho o recebimento dos dados passados pelas variáveis enviadas pela requisição, para assim poder testar se foi recebida com sucesso. O resto do conteúdo é somente um texto aleatório para testar o funcionamento.
Abaixo encontra-se o código das primeiras linhas do arquivo chamada.php:

  $nome = $_GET['nome'];  $idade = $_GET['idade'];

echo "conteudo requisitado pelo ajax

";

echo "parâmetros enviados. Nome: ".$nome." idade: ".$idade;

Assim pode ser enviadas quando variáveis forem necessárias no método $.get.

Resultado final

O resultado final é uma simples abertura de uma página externa sem necessidade de se carregar a página. Não existe apenas esta maneira de se escrever o código com o Jquery, existe uma infinidade de métodos e ainda requisições mais complexas que podem ser feitas. Esta é apenas para começar e para mostrar como se torna simples fazer estas requisições com o Jquery e além de tudo, funcionar em todos os browsers que suportam o httprequest sem problemas. A documentação para os métodos para o Ajax pode ser encontrado no site.

Espero poder ter ajudado e se quiserem, sintam-se a vontade de compartilhar métodos para requisições simples deste tipo. Espero que com mais este exemplo, tenha mostrado o quanto essa framework pode ser útil no dia a dia do desenvolvimento Web.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>