Requisições Assíncronas no Frontend: Entendendo o AJAX, XMLHttpRequest e a Fetch API

Olá, querida(o) estudante! No artigo de hoje, vamos explorar uma das tecnologias mais
revolucionárias da história do desenvolvimento web e extremamente frequente em
concursos de TI: o AJAX (Asynchronous JavaScript and XML) e os mecanismos de
requisições assíncronas no frontend.

Antes do surgimento das técnicas assíncronas, cada interação do usuário que demandasse novos dados do servidor exigia o recarregamento completo da página web. Esse modelo gerava lentidão, alto consumo de banda e uma experiência engessada. O AJAX mudou esse paradigma ao permitir que aplicações realizem trocas de dados em segundo plano e atualizem partes específicas da interface sem interromper a navegação.

Neste artigo, você compreenderá a arquitetura do AJAX, os estados do objeto clássico
XMLHttpRequest e o funcionamento da moderna Fetch API. Ao final, resolvemos questões para consolidar o conhecimento.

O que é AJAX e como ele funciona?

O AJAX não é uma linguagem de programação ou um framework específico, mas sim um conjunto e uma técnica de desenvolvimento web para construir aplicações interativas e rápidas. A sua principal vantagem é a capacidade de realizar requisições assíncronas.

Em uma operação assíncrona, a execução do código JavaScript no navegador continua
fluindo normalmente enquanto a requisição HTTP é processada em segundo plano. O fluxo de funcionamento do AJAX segue quatro etapas fundamentais:

• Disparo da Requisição Assíncrona: Um evento na página (como um clique ou preenchimento de campo) aciona o JavaScript para enviar uma requisição usando o objeto XMLHttpRequest ou a API Fetch.
• Processamento no Servidor: O backend recebe os parâmetros, executa a lógica
  de negócios ou consultas ao banco de dados e prepara a resposta.
• Envio da Resposta: O servidor retorna os dados solicitados, geralmente
  serializados em JSON ou XML (embora também possa retornar HTML ou texto
  puro).
• Atualização do DOM: O JavaScript intercepta a resposta e altera dinamicamente a
  árvore de elementos da página (DOM – Document Object Model) sem a necessidade
  de recarregá-la totalmente.

O Objeto Tradicional: XMLHttpRequest

Historicamente, a base para a implementação do AJAX é o objeto nativo XMLHttpRequest
(XHR). Ele fornece métodos e propriedades para manipular o envio e o recebimento de
dados via HTTP.

Para gerenciar o ciclo de vida de uma requisição XHR, utiliza-se a propriedade readyState, monitorada pelo evento onreadystatechange. Esse evento é disparado conforme a requisição transita por seus 5 estados (valores de 0 a 4):

A configuração da requisição é feita através do método .open(metodo, url, assincrono). O terceiro parâmetro aceita um valor booleano (true por padrão) que define se a operação será assíncrona (true) ou síncrona/bloqueante (false).

A Evolução com a Fetch API

Embora o XMLHttpRequest continue amplamente suportado, a Fetch API tornou-se o
padrão moderno para requisições no browser. Ela oferece uma sintaxe mais limpa, direta e menos verbosa.

A principal diferença técnica é que a Fetch API se baseia em Promises (e suporte nativo a
async/await), eliminando a necessidade de gerenciar múltiplos estados e callbacks de
eventos manuais. Isso torna o tratamento de fluxos de sucesso e exceções muito mais
legível e sustentável.

Agora, vamos ver como essas questões são cobradas nos concursos!

1) Ano: 2024 Banca: CS-UFG Órgão: TJ-AC Prova: Analista Judiciário – Analista de Projetos de TI

Qual é a principal vantagem do uso de requisições assíncronas (Ajax) em uma aplicação
web?
A. Melhorar a experiência do usuário ao permitir que a página web seja atualizada
dinamicamente sem a necessidade de recarregamento completo.
B. Reduzir a carga sobre o servidor ao minimizar o número de requisições necessárias.
C. Permitir que o servidor execute scripts em background sem a necessidade de um
navegador.
D. Aumentar a segurança da aplicação web ao ocultar detalhes de implementação do
servidor.

Gabarito: A

Comentário:

• A) Correta. A essência e o grande propósito do AJAX é permitir a atualização parcial e dinâmica do DOM, melhorando substancialmente a experiência do usuário (UX) por evitar o recarregamento total da página (full page reload).
• B) Incorreta. O AJAX não reduz necessariamente a quantidade de requisições; em muitas arquiteturas reativas, o número de requisições enviadas ao servidor até aumenta (porém trafegando dados muito menores, como payloads JSON).
• C) Incorreta. O AJAX é uma tecnologia/técnica client-side (executada no navegador do usuário) e não tem como função executar scripts de servidor independentes de navegadores.
• D) Incorreta. O uso de AJAX não altera a segurança da arquitetura do servidor nem oculta lógicas de backend; chamadas HTTP realizadas pelo cliente continuam visíveis nas ferramentas de inspeção do navegador.

2) Ano: 2023 Banca: VUNESP Órgão: TCM-SP Prova: Auxiliar Técnico de Controle Externo – Técnico de Informática

Em uma requisição AJAX, o evento onreadystatechange, de um objeto XMLHttpRequest, é
acionado no máximo
A. 1 vez.
B. 2 vezes.
C. 3 vezes.
D. 4 vezes.
E. 5 vezes.

Gabarito: D

Comentário:

• D) Correta. A propriedade readyState transita pelos estados de 0 (não enviado) a 4 (concluído). Como o objeto é instanciado no estado 0, as transições ocorrem para os estados 1 (OPENED), 2 (HEADERS_RECEIVED), 3 (LOADING) e 4 (DONE). Portanto, o evento onreadystatechange é disparado exatamente 4 vezes ao longo do ciclo de vida da requisição. As demais alternativas (1, 2, 3 e 5) estão incorretas.

3) Ano: 2023 Banca: FGV Órgão: Câmara dos Deputados Prova: Analista Legislativo – Informática Legislativa

Considere a requisição AJAX a seguir:

xhttp.open(“GET”, “teste.txt”, true);
xhttp.send();

O valor true, utilizado como o terceiro parâmetro do método, estabelece que:
A. a execução da requisição é síncrona.
B. a execução da requisição é assíncrona.
C. a execução da requisição inclui um call back.
D. um evento erro na requisição deve ser tratado.
E. em caso de sucesso, o valor é retornado pela requisição.

Gabarito: B

Comentário:

• A) Incorreta. O valor false no terceiro parâmetro forçaria uma requisição síncrona (bloqueante), o que é desencorajado no desenvolvimento moderno.
• B) Correta. A assinatura do método é open(method, url, async). Definir o terceiro argumento como true especifica explicitamente que a requisição deve ser processada de forma assíncrona.
• C) Incorreta. O parâmetro booleano não injeta nem define callbacks na requisição.
• D) Incorreta. O tratamento de erros é feito via ouvintes de evento (como onerror ou checagem do atributo status), não pelo booleano de assincronismo.
• E) Incorreta. O retorno dos dados é armazenado em propriedades como responseText ou responseXML após o término da operação, sem relação com a flag do parâmetro.

Conclusão

Dominar a evolução das requisições assíncronas — do funcionamento estrutural do
XMLHttpRequest às Promises na Fetch API — é um diferencial fundamental para provas de desenvolvimento web. Compreender como o cliente se comunica em segundo plano sem travar o DOM é o caminho seguro para arrasar nas questões de frontend!

Bons estudos e até nosso próximo artigo!

Para acompanhar mais conteúdos de TI, siga minha página no Instagram:
@dev.anajbsouza.

Referências

• MOZILLA DEVELOPER NETWORK (MDN). XMLHttpRequest API. Disponível em: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
• MOZILLA DEVELOPER NETWORK (MDN). Fetch API. Disponível em: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• FLANAGAN, D. JavaScript: O Guia Definitivo. O’Reilly / Novatec, 2021.