Introdução ao AJAX e Fetch API em JavaScript
Entenda o que é AJAX e como utilizar a Fetch API para realizar requisições assíncronas ao servidor. Veja exemplos de carregamento de dados sem recarregar a página.
Introdução ao AJAX e Fetch API em JavaScript
Com o avanço das tecnologias web, a necessidade de carregar dados sem a necessidade de recarregar a página tornou-se essencial para melhorar a experiência do usuário. O AJAX (Asynchronous JavaScript and XML) é uma técnica que permite fazer isso de maneira eficiente. Mais recentemente, a Fetch API foi introduzida como uma alternativa moderna e mais simples ao XMLHttpRequest, o método tradicional usado no AJAX. Neste post, vamos explorar ambos os conceitos e ver como você pode utilizá-los em seus projetos.
O que é AJAX?
AJAX é um conjunto de técnicas que permite a atualização de partes de uma página web sem recarregar a página inteira. Isso é alcançado através do envio de requisições assíncronas ao servidor, que podem retornar dados em formatos como JSON, XML, HTML ou texto simples.
Antes da introdução da Fetch API, a maneira mais comum de fazer requisições AJAX era usando o objeto XMLHttpRequest. Vamos ver um exemplo básico de como usar o XMLHttpRequest para fazer uma requisição:
function carregarDados() {
let xhr = new XMLHttpRequest();
xhr.open('GET', '<https://api.example.com/dados>', true);
xhr.onload = function() {
if (xhr.status === 200) {
let dados = JSON.parse(xhr.responseText);
console.log(dados);
} else {
console.error('Erro ao carregar dados');
}
};
xhr.onerror = function() {
console.error('Erro de rede');
};
xhr.send();
}
carregarDados();
Introdução à Fetch API
A Fetch API é uma interface mais moderna e poderosa para fazer requisições HTTP. Ela retorna uma Promise, facilitando o uso de async/await para trabalhar com requisições assíncronas de forma mais legível e concisa.
Vamos ver um exemplo de como usar a Fetch API para realizar uma requisição GET:
async function carregarDados() {
try {
let resposta = await fetch('<https://api.example.com/dados>');
if (resposta.ok) {
let dados = await resposta.json();
console.log(dados);
} else {
console.error('Erro ao carregar dados');
}
} catch (erro) {
console.error('Erro de rede', erro);
}
}
carregarDados();
Carregando Dados Sem Recarregar a Página
Um dos usos mais comuns do AJAX e Fetch API é carregar dados dinâmicos sem recarregar a página. Vamos criar um exemplo prático de carregamento de dados de usuários a partir de uma API pública.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carregar Usuários</title>
</head>
<body>
<h1>Lista de Usuários</h1>
<button id="carregarUsuarios">Carregar Usuários</button>
<ul id="listaUsuarios"></ul>
<script src="script.js"></script>
</body>
</html>
JavaScript
document.getElementById('carregarUsuarios').addEventListener('click', async function() {
let listaUsuarios = document.getElementById('listaUsuarios');
listaUsuarios.innerHTML = 'Carregando...';
try {
let resposta = await fetch('<https://jsonplaceholder.typicode.com/users>');
if (resposta.ok) {
let usuarios = await resposta.json();
listaUsuarios.innerHTML = '';
usuarios.forEach(usuario => {
let li = document.createElement('li');
li.textContent = `${usuario.name} (${usuario.email})`;
listaUsuarios.appendChild(li);
});
} else {
listaUsuarios.innerHTML = 'Erro ao carregar usuários';
}
} catch (erro) {
listaUsuarios.innerHTML = 'Erro de rede';
}
});
Vantagens da Fetch API
A Fetch API oferece várias vantagens sobre o uso do XMLHttpRequest, incluindo:
- Sintaxe mais simples e limpa: O uso de Promises e async/await torna o código mais legível e fácil de manter.
- Maior suporte para recursos modernos: Suporta nativamente operações como streaming e interceptação de requisições e respostas através dos Service Workers.
- Mais flexibilidade e poder: Permite manipular diretamente objetos Request e Response, oferecendo maior controle sobre as requisições.
Conclusão
Tanto o AJAX quanto a Fetch API são ferramentas poderosas para carregar dados de maneira assíncrona sem recarregar a página. A Fetch API, em particular, proporciona uma maneira moderna e eficiente de trabalhar com requisições HTTP, tornando o desenvolvimento web mais intuitivo e produtivo. Pratique o uso dessas técnicas para melhorar a experiência do usuário em seus projetos web.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com a WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
