Ajax com jQuery – Métodos $.get, $.post e $.ajax

Introdução

Para começar este artigo vou esclarecer alguns aspectos com relação a diferença entre os métodos GET e POST.

Uma requisição GET utiliza a própria URL para enviar os parâmetros. Este tipo de requisição possui prós e contras, os pontos positivos são o fato de você sempre ter em mãos, o endereço que retorna o valor desejado, os contras são, a falta de segurança, tamanho limitado da requisição, entre outros.

Uma requisição POST não envia os parâmetros jutamente com a URL, isso faz com que possa ser enviado quaisquer tipos de dados e também com um tamanho muito maior, este tipo de requisição é mais seguro.

$.get

[code lang=”js”]
$.get(‘pesquisaCep.php’, {
cep: $(‘#cep’).val()+””}, function(retorno){
//Tratamento dos dados de retorno
},
“html”
);

[/code]

Análise do código

• Na linha 1 é passada a URL que processará a requisição
  
• Na linha 2 passamos os parâmetros da requisição, neste caso o CEP, $(“#cep”).val()
• retorno é a variável que guardara a resposta de nossa requisição
• Na linha 5 determinamos o tipo do retorno que pode ser xml, html, script, json, jsonp ou text.

$.post

[code lang=”js”]
$.post(‘salvaProduto.php’, {
nome: $(‘#nome’).val()+””},
grupo: $(‘#grupo’).val()+””},
foto: $(‘#foto’).val()+””},
function(retorno){
//Tratamento dos dados de retorno
},
“html”
);

[/code]

Análise do código

• Na linha 1 é passada a URL que processará a requisição
  
• Nas linhas 2,3,4 passamos os parâmetros da requisição, neste caso o CEP, nome,grupo,foto
• retorno é a variável que guardara a resposta de nossa requisição
• Na linha 8 determinamos o tipo do retorno que pode ser xml, html, script, json, jsonp ou text.

$.ajax

[code lang=”js”]

$.ajax({
method: “get”,
url: “pesquisaCep.php”,
data: “cep=” + $(‘#cep’).val(),
beforeSend: function(){
$(“#carregando”).show(“fast”);
},
complete: function(){
$(“#carregando”).hide(“slow”);
},
success: function(retorno){
$(“#retorno”).html(retorno);
}
});

[/code]

Análise do código

• Na linha 2 é determinado o método da requisição
• Na linha 3 a URL da requisição foi determinada
• Na linha 4 determinamos os parâmetros que foram passados pela URL, já que se trata de uma requisição GET
• Na linha 5 traz o método beforeSend , ou seja, antes de enviar a requisição ele irá executar o $("#carregando").show("fast"), que irá aparecer com o elemento #carregando.
• Na linha 8 traz o método complete , ou seja, depois de completa requisição ele irá executar o $("#carregando").hide("slow"), que irá desaparecer com o elemento #carregando.
• Na linha 11 traz o método success, ou seja, se a requisição obter sucesso ele irá executar o $("#retorno").html(retorno), que atribuirá o retorno ao elemento #retorno.

Conclusão

Quando o programador decide usar o método $.ajax, o mesmo irá ter muito mais controle sobre a requisição. Como pôde ser observado no exemplo anterior, antes e depois que a requisição foi feita respostas visuais ao usuário foram dadas, isso torna a aplicação mais rica e dinâmica.