Guia jQuery

jQuery: Como evitar múltiplas requisições ao servidor

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (7)  (0)

Aprenda neste artigo como desabilitar botões utilizando jQuery, algo muito útil para evitar múltiplos cliques e, consequentemente, várias requisições ao servidor.

Motivação

Um problema bastante comum quando realizamos chamadas assíncronas em aplicações web é a quantidade de cliques que eventualmente são dados no botão. Isso pode gerar várias requisições iguais, ao mesmo tempo, no servidor. Para evitar que isso aconteça, utilizando jQuery, veremos como desabilitar o botão logo após o clique nessas situações, assegurando que o servidor não tenha problemas para lidar com tantas requisições desnecessárias.

Requisições assíncronas com jQuery

Requisições assíncronas no jQuery podem ser feitas de três formas diferentes, algumas mais complexas, outras menos, como apresentado na Tabela 1.

Método

Descrição

$.post(url, data, success, datatype)

Realiza um POST AJAX ao servidor com os parâmetros informados.

$.get(url, data, success, datatype)

Realiza um GET AJAX ao servidor com os parâmetros informados.

$.ajax(options)

Realiza a requisição AJAX que você precisar, bastando alterar a propriedade type de options para GET, POST, PUT, DELETE, etc.

Tabela 1. Métodos de chamadas AJAX no jQuery

A partir dessas descrições, podemos observar que o método $.ajax() é apenas uma versão mais completa em relação aos demais. Enquanto o método $.post() só realiza POSTs ao servidor e o $.get(), somente GETs, $.ajax() trabalha com qualquer método HTTP. Como curiosidade, o método $.post(), por exemplo, é implementado conforme o código da Listagem 1.

  $.ajax({
    type: "POST",
    url: url,
    data: data,
    success: success,
    dataType: dataType
  });
  
Listagem 1. Código do método $.post()

Essa definição pode ser confirmada na documentação do jQuery. O método $.get() também possui uma definição semelhante, alterando apenas a propriedade type.

Assim, salvo exceções, é sempre preferível lidar diretamente com o método $.ajax(), pois ele oferece mais opções na hora de fazer as requisições. Além dos métodos HTTP, como PUT e DELETE, ele permite definir um tratamento para erros na requisição (propriedade error), por exemplo. Por ser muito mais completo, ele viabiliza um melhor controle do que acontece no cliente.

Para termos uma ideia mais precisa de como $.ajax() funciona, analisemos a Listagem 2, onde temos uma função para envio de informações.

Nota: Observe que a chamada por meio do $.ajax() também traz mais clareza ao código, pois com ela, sabemos exatamente as opções que estão sendo especificadas.
  01 function enviaInformacoes(data){
  02     // faz a requisição AJAX
  03     $.ajax({ 
  04         type: "POST", 
  05         url: "Categorias/Create", 
  06         data: data, 
  07         success: function(returnData){
  08             if (returnData.isOK)
  09                 alert(returnData.message);
  10             }, 
  11         dataType: "json" 
  12     }); 
  13     // código onde o botão deve ser desabilitado (omitido)
  14 }
  
Listagem 2. Requisição exemplo ao servidor

Linha 01: Definição da função enviaInformacoes(), que recebe os dados a serem enviados para o servidor;

Linha 03: Início da requisição AJAX com o método $.ajax();

Linha 04: Indica que se trata de uma requisição do tipo POST ao servidor. Isso garante que todas as informações passadas sejam enviadas no corpo da requisição;

Linha 05: URL que receberá esses dados. Nesse caso, estamos utilizando uma rota fictícia que criaria uma "categoria";

Linha 06: Passa os dados recebidos por parâmetro na função para o servidor;

Linhas 07 a 10: Função que trata os dados de retorno em caso de sucesso da chamada AJAX. Esses dados de retorno (returnData), nesse caso fictício, trariam uma flag indicando se o resultado foi de sucesso (isOK) e uma mensagem para o cliente (message). É importante notar que esse retorno é implementado no servidor;

Linha 11: Indica que os dados são do tipo JSON.

Linha 12: Termina a chamada AJAX.

Desabilitando o botão após o clique

Agora, vejamos como definir o evento para chamar o método responsável pelo envio de informações. Para isso, vamos assumir que temos um botão com o seguinte código em nossa página inicial:

<button id="send-info" onclick="enviaInformacoes({descricao:'categoria de teste', tipo='teste'});">

No momento do clique nesse botão, temos a chamada ao método enviaInformacoes(), que envia os dados por meio do jQuery com a chamada AJAX. Com esse código, se clicarmos uma vez, será criada uma categoria no servidor, e se clicarmos cinco vezes, serão criadas cinco categorias iguais, com as mesmas informações. Como evitar esse problema? Simples, desabilitando o botão após o clique.

Essa ação é especialmente importante quando temos uma requisição do tipo POST ao servidor, pois ela irá alterar, de alguma maneira, informações nele armazenadas. Além disso, não podemos esquecer das requisições do tipo GET. Apesar das requisições desse tipo (em teoria, se o servidor foi bem desenvolvido) não alterarem dados no servidor, muitas delas podem sobrecarregá-lo, gerar uma queda de desempenho e, até mesmo, uma ausência temporária do serviço.

Diante disso, nosso método, enviaInformacoes(), precisa incluir a lógica para desabilitar o botão, como mostra a Listagem 3.

  01 function enviaInformacoes(data){
  02     ...
  03     // código onde o botão deve ser desabilitado
  04     $(this).prop("disabled", true);
  05 }
  
Listagem 3. Botão desabilitado após envio da requisição

Linha 01: Definição da função enviaInformacoes();

Linha 02: Código da chamada AJAX (Listagem 1), não incluso nessa listagem por simplificação;

Linha 04: Código para desabilitar o botão. Por meio do this, acessa o próprio elemento clicado (o botão) e altera a propriedade disabled, setando-a para true com o método prop();

Note que é bastante simples evitar múltiplas requisições com o jQuery. Outra coisa que devemos levar em consideração é a proteção, no servidor, contra essas múltiplas requisições. É interessante, embora não essencial, que tenhamos proteção tanto no cliente, como vimos no artigo, quanto no servidor. Para isso, aconselha-se realizar uma análise para identificar o que acontece nele e, assim, implementar algum mecanismo para descarte de requisições em caso de chamadas recorrentes que não façam sentido.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?