$.get() de jQuery para fazer uma solicitação Ajax tipo HTTP GET

Análise e exemplos da função $.get() de jQuery que serve para fazer uma solicitação Ajax ao servidor na qual podemos enviar dados pelo método GET.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 07/8/12
Valorize este artigo:
No Manual de jQuery já havíamos tratado do Ajax neste framework Javascript, principalmente para demonstrar até que ponto era simples fazer uma conexão assíncrona com o servidor por meio do método load(). Inclusive havíamos ido um pouco mais longe, sem abandonar a facilidade, implementando um script Ajax com a típica mensagem de carregamento.

Neste artigo vamos começar a explorar algumas outras funções existentes em jQuery que servem para fazer Ajax e alguns usos um pouco mais avançados, que nos permitirão ampliar nossas habilidades e o tipo de problemas que possamos enfrentar. Começaremos pelo método $.get(), que como veremos é quase tão simples como o já comentado método load().

Até o momento, com o método load() havíamos aprendido a fazer uma solicitação Ajax e a carregar o HTML resultante dessa solicitação em um elemento da página. O método $.get(), diferentemente de load() não lança o resultado da solicitação em nenhum site de maneira predeterminada, simplesmente trata de realizar a conexão com o servidor e receber a resposta. Isto não quer dizer que depois não possamos lançar o resultado da solicitação no HTML de uma camada ou qualquer outro elemento da página, mas que para consegui-lo, deveremos especificá-lo no código de nosso script. Disto podemos deduzir que $.get() não tem um funcionamento predeterminado (ou seja, não faz nada fixo com a resposta da solicitação Ajax) e portanto, nós podemos programar qualquer comportamento que desejemos em nossas aplicações.

Nota: também podemos encontrar o método $.get() chamado de jQuery.get() já que $ é uma abreviação do objeto jQuery.

Neste primeiro artigo vamos nos dedicar a fazer uma lista de exemplos de dificuldade crescente com o método $.get(), que nos sirvam para entender como funciona. Como muitos dos métodos de jQuery, $.get() varia seu comportamento dependendo dos parâmetros que lhe enviemos.

$.get(URL)

Se passamos a $.get() uma cadeia com uma URL, o método faz uma solicitação Ajax a essa URL, mas não faz nada com a resposta obtida do servidor.

$.get("conteúdo-ajax.html");

Quer dizer, se executamos esse código anterior, o navegador cursará a solicitação Ajax da página "conteúdo-ajax.html" e com isso obterá uma resposta. Entretanto, não fará nada com essa resposta uma vez recebida e,portanto, não veremos nenhum resultado no navegador.

$.get(URL, função)

Neste segundo caso, estamos passando dois parâmetros, o primeiro a URL da solicitação Ajax a realizar e o segundo uma função com o código a executar quando se receba a resposta, que incluirá todas as ações a serem realizadas quando recebidas. Nessa função, por sua vez, recebemos vários parâmetros, sendo o mais importante o primeiro, no que teremos uma referencia ao resultado da solicitação realizada. Vamos vê-lo com um exemplo:

$.get("conteúdo-ajax.html", function(respostaSolicitação){
   alert(respostaSolicitação);
})

Neste caso fazemos uma solicitação ao arquivo "conteúdo-ajax.html". Depois, quando se receba a resposta se executará o código da função. Na função recebemos um parâmetro " respostaSoliciação", que conterá o código HTML que foi retornado pelo servidor ao solicitar essa página por Ajax. Como se pode ver, na função simplesmente mostramos em uma caixa de alerta o conteúdo da respostaSolicitação.

Esse código em funcionamento pode ser visto em uma página à parte.

$.get(URL, dados, funcao)

Um terceiro caso de uso desta função é enviar três parâmetros, um com a rota da página a ser solicitada, outro com dados que serão enviados na URL da solicitação HTTP (que receberemos no servidor pelo método GET) e uma função para fazer coisas quando a solicitação tenha sido completada e se tenha o resultado.

Neste caso temos um comportamento similar ao anterior, com a particularidade de que estamos enviando ao servidor uma serie de dados, como variáveis na URL. Estes dados se especificam a a partir dejQuery com notação de objeto.

$.get("recebe-parametros2.php", {nome: "Evandro", idade: "99"}, function(resposta){
   $("#meuparagrafo").html(resposta);
})

Como se pode ver, por Ajax se acessa a página recebe-parametros2.php e se passam a ela duas variáveis por GET, um nome e uma idade. Neste caso temos também uma função para executar ações com a resposta e simplesmente lançamos tal resposta em um elemento da página que tem o identificador id="meuparagrafo".

Essas variáveis enviadas na solicitação HTTP, como dissemos, se armazenariam nas páginas com programação do lado do servidor pelo método GET. Por exemplo, este seria o código PHP necessário para receber essas variáveis:

Recebido o seguinte dado:
<br>
Nome: <?php echo $_GET["nome"];?>
<br>
Idade: <?php echo $_GET["idade"];?>

Podemos ver o exemplo em funcionamento em uma página independente.

$.get(URL, dados, funcao, tipo_dado_resposta)

Este último caso de $.get() serve para especificar um parâmetro adicional, que é o tipo de dado que se espera receber como resposta do servidor. O normal é que do servidor nos chegue um código HTML, mas também poderia ser um XML, um script ou um JSON.

Para mostrar esta possível chamada a jQuery.get() vamos mostrar um exemplo no que a partir do servidor recebemos um dado em notação JSON, que é um tipo de resposta bastante utilizado nas aplicações web do lado do cliente.

Neste exemplo complicamos um pouco nosso script, para que se veja como com $.get() podemos realizar coisas muito diversas com a resposta e não somente escrevê-la na página ou em uma caixa de diálogo. Para isso temos apenas que complicar tudo que quisermos a função que recebe a resposta e fazer coisas com ela. Neste caso, como recebemos um arquivo em notação JSON, podemos fazer coisas diferentes dependendo do conteúdo desse JSON.

O exemplo seguinte faz um cálculo básico do preço final de um produto, que seria o valor líquido mais o IVA. Ademais, neste suposto exercício, poderíamos ter vários tipos de clientes, por exemplo, espanhóis (aos que há que aplicar o imposto IVA) ou estrangeiros, que estão isentos de pagar tal imposto.

Temos dois botões, com dois casos de produtos:

<button id="comiva">Calcular preço 20 para cliente espanhol (há que cobrar IVA)</button>
<button id="semiva">Calcular preço 300 para cliente do Brasil (não é cobrado o IVA)</button>

Como se vê, um botão tem um preço para o cliente espanhol e outro para um cliente brasileiro. Poderíamos expressar a funcionalidade desses botões gerando um evento click, para cada um dos botões:

$("#comiva").click(function(){
   $.get("recebe-parametros-retorna-json.php", {pais: "ES", preco: 20}, mostraPrecoFinal, "json");
})
$("#semiva").click(function(){
   $.get("recibe-parametros-retorna-json.php", {pais: "BR", preco: 300}, mostraPrecoFinal, "json");
})

O detalhe que temos que reparar neste código é que estamos enviando um último parâmetro AA função $.get() com o valor "json". Com isso indicamos que a resposta do servidor se espera com notação JSON. Ademais, como se pode ver, os botões invocam a mesma página recebe-parametros-retorna-json.php, mas se passa dados distintos por GET ao servidor. Também há uma única função "mostraPrecoFinal" que se encarregará de mostrar o preço final na página. Essa função foi definida à parte, com o seguinte código:

function mostraPrecoFinal(resposta){
   $("#base").html("Preço final: " + resposta.precofinal);
   if (resposta.temiva=="1"){
      $("#base").css("background-color", "#ffcc00");
   }else{
      $("#base").css("background-color", "#cc00ff");
      $("#base").append($('<span class="clienteest">Nao se aplica IVA por ser cliente estrangeiro</span>'));
   }
}

Com esta função queríamos demonstrar como se podem fazer coisas distintas dependendo da resposta. Especificamente, neste exemplo, para o caso de ser cliente espanhol ou estrangeiro se realizam ações ligeiramente diferentes.

Ademais, na função recebemos um parâmetro "resposta". Neste caso, como o que recebíamos é uma resposta em JSON, essa variável terá diferentes dados que podemos acessar como se fossem propriedades de um objeto. Por exemplo, resposta.precofinal tem o valor de preço total, uma vez aplicado o IVA ou não dependendo da nacionalidade do cliente. Por sua parte, resposta.temiva nos serve para saber se correspondia ou não aplicar o IVA a esse cliente.

Faltaria ver a página PHP recebe-parametros-retorna-json.php, que contém o código para receber os dados por GET e gerar o JSON adequado para a resposta da solicitação Ajax.

<?php
if ($_GET["pais"]!="ES"){
   echo json_encode(array("temiva"=>"0", "precofinal"=>$_GET["preço"]));
}else{
   echo json_encode(array("temiva"=>"1", "precofinal"=>($_GET["preco"] * (18 / 100)) + $_GET["preco"]));
}
?>

Podemos ver este exemplo de Ajax com resposta em formato JSON em uma página à parte.

No artigo seguinte veremos como podemos aplicar alguns eventos a este método $.get() para poder fazer coisas quando a solicitação se complete, com êxito ou com erro.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato