jQuery e Ajax 30, outubro, 2009Jonas MartinezDeixar um comentrioIr para os comentrios Algumas pessoas me pediram para explicar como

funciona o Ajax com o jQuery, ento vou explicar! Para quem no sabe, Ajax nada mais do que uma tcnica que utiliza um componente do b rowser para requisies dinmicas. Com a popularizao, para muitos, Ajax uma linguagem, o que de fato no verdade. Ajax tem esse nome pois significa Asynchronous Javascript And XML. Bom vamos ao que interessa! Existem 2 (na verdade vrios) mtodos de se fazer uma requisio em Ajax pelo jQuery, po r GET e POST. A mais comum GET pois mais simples e prtico, muito comum para poucos parmetros. Vou explicar como utilizar Ajax com jQuery com as funes $.get, $.post e $.load Vamos supor que voc deseja carregar uma pgina html em um div quando o usurio clicar em um boto, como ficaria? Vejamos: 1 2 3 4 5 6 7 $(document).ready(function (){ //diz ao jQuery executar as instrues quando carrega r a pgina $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao $.get('pagina.html', function(data) { //chamada em Ajax para o mtodo GET $('#idDoDiv').html(data); //insere o valor de data no div #idDoDiv }); }); }); Desta forma, carregando o contedo de pagina.html no div #idDoDiv. Vamos melhorar esse cdigo adicionando variveis a ele, tornando dinmico nosso carreg amento, para isso passamos um objeto JavaScript no segundo parmetro. Para quem no conhece, um objeto annimo no JavaScript bem simples, basta usar { variavel: valor para mais de um { varivel1: valor1?, variavel2: valor2? } 1 2 3 4 5 6 7 $(document).ready(function (){ //diz ao jQuery executar as instrues quando carrega r a pgina $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao $.get('pagina.html', { nome:'Jonas', sobrenome:'Martinez' }, function(da ta) { //chamada em Ajax para o mtodo GET

},

$('#idDoDiv').html(data); //insere o valor de data no div #idDoDiv }); }); }); Desta forma, ficar assim pagina.html?nome=Jonas&sobrenome=Martinez Bem simples no? Uma das vantagens do jQuery que voc pode carregar no s contedo HTML, mas tbm conteud o JSON, XML e at mesmo JavaScript! Isso cria uma gama de possibilidades enormes, vamos imaginar que queremos utiliz ar um request JSON. 1 2 3 4 5 6 7 $(document).ready(function (){ //diz ao jQuery executar as instrues quando carrega r a pgina $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao $.get('pagina.html', { nome:'Jonas', sobrenome:'Martinez' }, function(da ta) { //chamada em Ajax para o mtodo GET $('#idDoDiv').html(data.variavel); //insere o valor da variavel 'var iavel' de data no div #idDoDiv }, 'json'); }); }); Tambm podemos usar funes dedicadas para esses request, que seriam $.getScript e $.g etJSON. Vamos ao mtodo POST? Muito simples tambm, o que muda o nome da funo e que o post retorna um status sobre a requisio. Utilizado muito quando precisamos enviar muitos dados como formulrios por exemplo. No caso do POST a funo de callback recebe 2 parmetros, um o dado em si e o outro o status do request. Vejamos: 1 2 3 4 5 6 7 8 9 10 11 $(document).ready(function (){ //diz ao jQuery executar as instrues quando carrega r a pgina $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao $.post('pagina.php', { nome:'Jonas', sobrenome:'Martinez' }, function(da ta, textStatus) { //chamada em Ajax para o mtodo POST if (textStatus == 'success') { //verifica se o status est tudo ok! $('#idDoDiv').html(data); //insere o valor de data no div #idDoDi v } else {

alert('Erro no request!'); //mostra erro caso no tenha sido bem s ucedido } }); }); }); Tambm podemos usar modos especificos de carregamento alm do padro HTML, assim como no GET podemos colocar como ultimo parmetro da funo os valores, json, jsonp, xml, h tml, text e script, porm no temos funes especificas para isso como $.getJSON(). Existe ainda a funo load que facilita mais ainda! Confira!

1 2 3 4 5 $(document).ready(function (){ //diz ao jQuery executar as instrues quando carrega r a pgina $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao $('#idDoDiv').load("pagina.html"); //chamada em Ajax }); }); Simples!