Ajax fácil com jQuery
Até pouco tempo atrás, para utilizar técnicas ajax, eram necessários conhecimentos sobre o método XMLHttpRequest que resultava em enormes funções escritas em javascript e muito trabalho ao desenvolvedor. Hoje podemos utilizar bibliotecas como o jQuery para tornar o trabalho com ajax muito simples.
O objetivo desse tutorial é imprimir o conteúdo de um arquivo html em um objeto div sem a necessidade de carregar a página.
Ajax (Asynchronous Javascript and XML) é uma técnica javascript que utiliza o método XMLHttpRequest para fazer requisições assíncronas. Pensando de forma simples, uma função javascript assume o papel de navegador acessando uma determinada url e fornecendo como retorno o conteúdo HTML gerado pela url acessada.
Exemplo de método ajax sem utilizar jQuery
function handler() { if(this.readyState == 4 && this.status == 200) { if(this.responseXML != null && this.responseXML.getElementById('test').firstChild.data) //successo alert(this.responseXML.getElementById('test').firstChild.data); else return false } else if (this.readyState == 4 && this.status != 200) { //página não encontrada ou erro na conexão return false } } var client = new XMLHttpRequest(); client.onreadystatechange = handler; client.open("GET", "arquivo.html"); client.send();
Método ajax utilizando jQuery
$.ajax({ url: 'arquivo.html', success: function(data) { alert(data); } });
Comentando:
Partimos de um HTML básico com um botão para acionar a função ajax e um elemento div, onde será impresso o resultado da requisição. Não esquecendo de adicionar a biblioteca jQuery e também do CSS básico.
<html> <head> <title>Ajax fácil com jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <img src="loader.gif" class="loader" alt="loader" /> <input type="button" value="AJAX!"> <div> </div> </body> </html>
Temos outro arquivo chamado ‘arquivo.html’ com o seguinte conteúdo:
<h1>Ajax!</h1> Duis in turpis in arcu blandit pretium at sed metus. Sed tortor sapien, cursus vitae facilisis ac, tempor non eros. Donec at velit velit, cursus tristique justo?Nullam commodo sapien sit amet sapien porttitor eu rutrum arcu mollis. Nullam sagittis tempor risus, et convallis dolor eleifend vitae.In ac lacus libero; ut aliquam turpis.Quisque placerat blandit libero; eget orttitor nunc eleifend vel. In hac habitasse platea dictumst. Aliquam dapibus fermentum fringilla.Integer mi erat, porta at aliquet a, consectetur in est. </html>
Nosso objetivo é acessar este arquivo através de ajax, obter o conteúdo HTML e imprimir em um elemento DIV. Para utilizar o ajax é simples:
$.ajax({ url: 'arquivo.html', //URL solicitada success: function(data) { //O HTML é retornado em 'data' alert(data); //Se sucesso um alert com o conteúdo retornado pela URL solicitada será exibido. } });
Neste ponto o ajax já está funcionando, basta imprimir o HTML retornado em um elemento div:
$.ajax({ url: 'arquivo.html', success: function(data) { $('div').html(data); } });
É possível ainda utilizar várias propriedades da função ajax do jQuery. Vamos utilizar as propriedades “beforeSend” e “complete”.
A propriedade “beforeSend” será acionada antes de rodar o ajax já a propriedade “complete” será acionada quando a requisição estiver completa.
Para quem quiser exibir o conhecido “ajax loading gif” enquanto a requisição é feita basta utilizar essas propriedades para controlar o CSS relacionado ao gif, Exemplo:
aguarde, carregando…
$.ajax({ url: 'arquivo.html', success: function(data) { $('div').html(data); }, beforeSend: function(){ $('.loader').css({display:"block"}); }, complete: function(){ $('.loader').css({display:"none"}); } });
Uma boa opção para encontrar ‘loading gifs’ é o site https://ajaxload.info.
Pronto. Temos um ajax simples escrito em jQuery com ‘loading gif’.
Código completo:
<html> <head> <title>Ajax fácil com jQuery - Vinteum</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> div { width: 600px; height: 600px; } .loader { display: none; float: left; } </style> </head> <body> <img src="loader.gif" class="loader" alt="loader" /> <input type="button" value="AJAX!"> <div> </div> </body> <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.3.min.js"></script> <script type="text/javascript"> $('input').click(function(){ $.ajax({ url: 'https://vinteum.com/estudos/jquery/arquivo.html', success: function(data) { $('div').html(data); }, beforeSend: function(){ $('.loader').css({display:"block"}); }, complete: function(){ $('.loader').css({display:"none"}); } }); }); </script> </html>
Para ver um exemplo on-line clique aqui.
O manual completo do jQuery pode ser encontrado em https://api.jquery.com/jQuery.ajax/.
Gostou? Compartilhe!
[…] This post was mentioned on Twitter by Blackjack, Tiago Pastorello. Tiago Pastorello said: RT @vinteum Blackjack » Ajax fácil com jQuery https://retwt.me/1PNYu […]
Otimo
vlw
oaayLF vbdlydvjkrnk, [url=https://yflbejzcucqc.com/]yflbejzcucqc[/url], [link=https://sughrqsrktrm.com/]sughrqsrktrm[/link], https://oafnvkxrrzpr.com/
Simples e objetivo!
Olá Douglas. Estou tendo um probleminha estranho. Veja, tenho o seguinte código:
No JQuery eu só mudei para pegar a DIV pelo ID
$(‘#_right’).html(data);
Usei o seu método, ele funciona no IE mas não no Firefox, a DIV _right simplesmete some. Porque isso?
Olá. Digamos que eu queira que o conteúdo permaneça carregado após dar um F5. Como faria?
Olá Italo, não entendi.
Você quer que o conteúdo seja carregado antes de carregar a requisição? Isso não é possível. O conteúdo só é gerado após a conexão via HTTP, cada conexão é um requisição.
Seria impossível fazer uma requisição antes de carregar o site. Você pode fazer algo pareciso carregando o conteúdo via ajax, mas só depois que a primeira requisição acontecer.
Olá tpastorello.
Bem..deixe ver se consigo explicar. No exemplo online, após clicar no botão AJAX ele carrega a URL e modifica o html da DIV, certo? Mas se eu teclar F5 após isso ela (DIV) volta ao estado original, vazio.
O que eu gostaria de saber é se seria possível manter esse conteúdo lá uma vez que ele já tenha sido carregado uma vez.
Quando vc recarrega a página, ele está requisitando a página toda novamente. O que você pode fazer é guardar o estado no cookie. Ou seja, quando pressionar o botão ajax, além de buscar o html, vc seta no cookie que ele já fez esse procedimento. E quando o usuário carregar a tela novamente, ou seja, uma nova requisição, vc busca no cookie que ele já tinha esse conteúdo e apresenta novamente pra ele.
Utilize uma funcionalidade do html chamada LocalStorage, utilizando essa funcionalidade você consegue armazenar os dados da div dentro de um cookie , o que faz com que quando o seu site for carregado novamente ele ja esteja la por causa deste “cookie”
Boa noite, e se eu quisesse chamar uma ação de um botão via Ajax, por exemplo, um botão Salvar ?
Boa noite Lucas.
se o botão for exemplo [input type=”button” id=”btnSalvar”]
o jquery ficaria
$(‘#btnSalvar’).click( function(){ …………… });
No caso dentro das chaves não vai nenhum comando, não é?
nas chaves digite os comandos
Ótimo post!
Muito bom este artigo !
OLá, eu fiz o codigo direitinho como esta no tutorial mas não deu certo,até ctrl-c ctrl-v tbm,mas a imagen loader.gif até aparece mas ela não some, e a pagina arquivo.html nem da sinal de vida, até troquei o html(data) por text(data) e append(data) e nao deu nem nada, troquei a versão do jquery primeiro usei a 1.11.3 depois a do tutorial 1.4.3 tbm não deu em nada , alguem pode me audar o que estari adando errado
Ótimo post. Parabéns!
cara, estou usando seu método, fiz uma busca no banco para me trazer alguns resultados, estes resultados possuem botões com as chamadas AJAX para trazer outras páginas, só que somente o 1º registro funciona, os demais não funcionam, ou seja, não chamam a página que deveriam chamar…
pode me ajudar?
desculpe, não botões, são LINKS.
abrigado
Ótima publicação. Simples e objetiva.
Seu post me ajudou bastante. Agradeço! =)
Sempre tive dificuldades em rodar jquery no IE. Será que é normal?