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.