jQuery Academy · Aula

Configuração Eficiente de Solicitações AJAX

Explore opções abrangentes para .ajax(), incluindo tipos de dados, cabeçalhos, cache e tempos limite, para ajustar suas solicitações assíncronas a diferentes cenários.

Aula 1 de 311 etapas

Configuração Eficiente de Solicitações AJAX é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 3 aulas no total.

Liberte o poder de .ajax()

O método $.ajax() do jQuery é sua principal ferramenta para fazer requisições HTTP com controle total. Diferentemente de métodos mais simples, como $.get() ou $.post(), $.ajax() permite ajustar detalhadamente todos os aspectos da sua requisição.

Nesta lição, exploraremos suas opções abrangentes, desde a definição de tipos de dados até o gerenciamento de armazenamento em cache e limites de tempo, para criar aplicações assíncronas robustas e eficientes.

A estrutura básica de .ajax()

Em sua essência, $.ajax() recebe um objeto de pares de chave e valor que representam opções de configuração. A requisição mais básica precisa apenas de uma url.

Veja como você poderia buscar dados de uma API:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1"
}).done(function(data) {
  console.log("Fetched data:", data.title);
});

URL e método (type)

A opção url especifica o endpoint da sua requisição. A opção type (ou method nas versões mais recentes do jQuery) define o método HTTP, como GET, POST, PUT ou DELETE.

url: a URL de destino da requisição.
type: o método HTTP (por exemplo, "GET", "POST").

$.ajax({
  url: "/api/users",
  type: "POST"
});

Enviando dados com `data`

Use a opção data para enviar informações junto com sua requisição. Nas requisições GET, os dados são anexados à URL como parâmetros de consulta. Nas requisições POST, são enviados no corpo da requisição.

Você pode passar um objeto simples, e o jQuery o serializará para você.

$.ajax({
  url: "/api/save-item",
  type: "POST",
  data: {
    id: 123,
    name: "New Gadget"
  }
});

Resposta esperada: `dataType`

A opção dataType informa ao jQuery que tipo de dados você espera receber do servidor (por exemplo, "json", "xml", "html", "text"). Isso ajuda o jQuery a analisar a resposta corretamente.

Se não for especificada, o jQuery tentará inferi-la a partir do tipo MIME da resposta.

$.ajax({
  url: "/api/products",
  dataType: "json"
});

Cabeçalhos personalizados: `headers`

A opção headers permite definir cabeçalhos HTTP personalizados para sua requisição. Isso é essencial para tarefas como autenticação (por exemplo, o envio de uma chave de API) ou especificação de tipos de conteúdo.

Passe um objeto cujas chaves sejam os nomes dos cabeçalhos e cujos valores sejam o conteúdo deles.

$.ajax({
  url: "/api/secure-data",
  headers: {
    "Authorization": "Bearer your_token",
    "X-Requested-With": "XMLHttpRequest"
  }
});

Controlando o armazenamento em cache: `cache`

Os navegadores frequentemente armazenam requisições GET em cache para acelerar carregamentos posteriores. Embora isso seja útil, às vezes você precisa obter dados atualizados sempre.

Defina cache: false para impedir que o navegador armazene a resposta em cache, garantindo que sua requisição sempre busque as informações mais recentes do servidor.

$.ajax({
  url: "/api/dynamic-content",
  cache: false
});

Limites da requisição: `timeout`

Requisições demoradas podem prejudicar a experiência do usuário. A opção timeout permite especificar um tempo máximo (em milissegundos) para a conclusão da requisição.

Se a requisição não for concluída dentro desse tempo, ela será abortada, acionando a chamada de retorno .fail().

$.ajax({
  url: "/api/slow-report",
  timeout: 8000 // 8 seconds
});

Ao vivo: configuração avançada de AJAX

Vamos ver um exemplo abrangente que combina várias opções de $.ajax(). Essa requisição busca um item de tarefas, especifica JSON como resposta esperada, adiciona um cabeçalho personalizado, desativa o armazenamento em cache e define um limite de tempo.

Tente executá-la para ver como o parágrafo de saída é atualizado!

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Config Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h3>Check Console & Output:</h3>
  <p id="output">Fetching data...</p>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        type: "GET",
        dataType: "json",
        headers: {
          "X-App-ID": "CoddyKit-Demo"
        },
        cache: false,
        timeout: 7000 // 7 seconds
      })
      .done(function(data) {
        $("#output").html(
          "<b>Todo fetched!</b><br>ID: " + data.id + 
          "<br>Title: " + data.title
        );
        console.log("Success:", data);
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $("#output").html(
          "<b>Request failed!</b><br>Status: " + textStatus + 
          "<br>Error: " + errorThrown
        );
        console.error("Error:", textStatus, errorThrown);
      })
      .always(function() {
        console.log("Request completed.");
      });
    });
  </script>
</body>
</html>

Verificação da configuração de AJAX

Imagine que você esteja criando um recurso para enviar um novo comentário de usuário para /api/comments. Ele precisa ser uma requisição POST, incluir commentText e userId e esperar receber um objeto JSON. Além disso, para garantir que o comentário esteja sempre atualizado, você deseja impedir o armazenamento em cache do navegador.

Quais das opções de $.ajax() a seguir são essenciais para esse cenário específico?

Responda na aula interativa

Recapitulação: configuração de AJAX dominada

Você dominou a arte de configurar o método $.ajax() do jQuery!

Você aprendeu a especificar a url e o type HTTP.
Aprendeu a enviar dados usando a opção data.
Aprendeu a definir o formato esperado da resposta com dataType.
Aprendeu a adicionar headers HTTP personalizados para casos de uso avançados.
Aprendeu a controlar o armazenamento em cache do navegador com cache.
Aprendeu a definir limites para requisições lentas usando timeout.

Essas opções poderosas permitem criar interações assíncronas altamente personalizadas e confiáveis em suas aplicações web.

Grátis para começar

Aprenda JavaScript com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 22
Aulas: 48

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Configuração Eficiente de Solicitações AJAX” é grátis?

Sim — o texto completo de “Configuração Eficiente de Solicitações AJAX” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 3 aulas no total.

O que vou aprender em “Configuração Eficiente de Solicitações AJAX”?

Explore opções abrangentes para .ajax(), incluindo tipos de dados, cabeçalhos, cache e tempos limite, para ajustar suas solicitações assíncronas a diferentes cenários. Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar jQuery Academy?

Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “Configuração Eficiente de Solicitações AJAX”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de jQuery Academy?

Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Configuração Eficiente de Solicitações AJAX
Tratamento de Erros e Sucessos em AJAX
AJAX entre Domínios (CORS/JSONP)

← Voltar para jQuery Academy