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.

Dicas de JavaScript básico para iniciantes - Manipulação de DOM — Tutorial de JavaScript básico para iniciantes

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.