5

Geralmente vejo o uso da função do beforeSend: do jQuery.ajax() sendo usada de forma simples, como, por exemplo, esvaziar uma div antes da requisição:

function enviar(){
   $.ajax({
      beforeSend: function(){
         $("#div").empty();
      },
      ...
   });
}

Olhando a documentação do jQuery.ajax(), me parece que essa configuração tem mais profundidade útil do que simplesmente executar algo tão trivial antes da requisição. Isso porque, se for apenas para esvaziar uma div, por exemplo, eu poderia fazer isso sem o beforeSend:, basta colocar o $("#div").empty(); antes do AJAX:

function enviar(){
   $("#div").empty(); // esvazia a div antes
   $.ajax({
      ...
   });
}

A documentação informa que a função do beforeSend: pode receber dois argumentos:

Function( jqXHR jqXHR, PlainObject settings )

Ao ler o texto descritivo da configuração, não consegui compreender. Qual seria o uso e a função desses argumentos? Em que eles podem interferir na requisição? Se puder dar um exemplo a resposta seria ainda melhor.

1
  • 1
    A ideia, na verdade, é poder modificar a requisição antes de enviá-la, adicionando um token de autenticação, por exemplo.
    – Woss
    Commented 23/01/2019 às 19:43

1 Resposta 1

3
+100

Conforme indica a documentação, a opção beforeSend deve ser usada para executar efeitos (ou mudar as opções da operação), antes da requisição ser efetuada.

Os argumentos:

  • jqXHR: um superset da API nativa dos browsers XHRHttpRequest, que pode ser usado para interagir com a requisição que está sendo executada. Para saber mais sobre o jqXHR, você pode ler esta parte da documentação.
  • settings: são as opções que o $.ajax recebe em seu primeiro argumento (incluindo os valores padrão).

Isso tudo, em conjunto, pode ser usado para modificar as opções da requisição antes que ela seja executada. Abaixo fiz um exemplo para demonstrar:

function request(abort = false) {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/todos',
    beforeSend: (jqXHR, settings) => {
      const randomNum = Math.floor(Math.random() * 10) + 1
      
      if (abort) {
        console.log('Requisição abortada!')
        // Note abaixo que, fazendo uso do objeto `jqXHR`,
        // estamos abortando a requisição em certas situações:
        return jqXHR.abort()
      }

      // Note abaixo que estamos mudando a URL requisitada
      // através do parâmetro `settings`:
      settings.url = `${settings.url}/${randomNum}`
      console.log(`Enviando requisição para: ${settings.url}`)
    },
    success: (data) => {
      console.log('Dados recebidos:', data)
    }
  })
}

document.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault()
  
  const abort = document.querySelector('input').checked
  request(abort)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input type="checkbox" id="abort" />
  <label for="abort">Abortar requisição?</label>
  <br /><hr />
  <button type="submit">Enviar Requisição</button>
</form>

Note que no meu exemplo, chamei a função abort, através do objeto jqXHR para abortar a requisição:

return jqXHR.abort()

No entanto, a documentação indica que a requisição também pode ser abortada quando se retorna false da função passada para a opção beforeSend.


Muitas vezes, no entanto, a opção beforeSend é usada para garantir que um efeito em específico seja executado antes da requisição ser efetuada, como remover um elemento do DOM, como o seu exemplo:

$("#div").empty(); // esvazia a div antes
1
  • 1
    Agora entendi! :D Obrigado!
    – Sam
    Commented 27/01/2019 às 20:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .