Denis Martins

Denis Martins

I am a professor working on data science and artificial intelligence.

Sistemas Distribuídos - Lab Prático XHR

2 minute read

Published:

Lab Prático: XHR em JavaScript

Neste laboratório, você irá:

  • utilizar XMLHttpRequest (XHR)
  • consumir uma API REST
  • interpretar dados em JSON
  • exibir resultados na tela
  • tratar erros básicos

Estrutura do Projeto

Crie a seguinte estrutura de pastas:

lab_xhr_js/
├── index.html
├── script.js
└── style.css

Passo 1 — Criar o arquivo HTML

Crie o arquivo index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Catálogo Digital</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Catálogo Digital</h1>

    <button id="loadProductsButton">Carregar Produtos</button>

    <p id="message"></p>

    <ul id="productList"></ul>

    <script src="script.js"></script>
</body>
</html>

Passo 2 — Criar o CSS

Crie o arquivo style.css:

body {
    font-family: Arial;
    margin: 30px;
}

button {
    padding: 10px;
}

li {
    margin: 5px 0;
}

Nota: Você pode modificar o CSS como quiser.

Passo 3 — Implementar o XHR

Crie o arquivo script.js:

const button = document.getElementById("loadProductsButton");
const list = document.getElementById("productList");
const message = document.getElementById("message");

button.addEventListener("click", loadProducts);

function loadProducts() {
    list.innerHTML = "";
    message.textContent = "Carregando...";

    const xhr = new XMLHttpRequest();

    xhr.open("GET", "https://api.restful-api.dev/objects", true);

    xhr.onload = function () {
        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);

            message.textContent = "Dados carregados";

            for (let i = 0; i < data.length; i++) {
                const item = data[i];

                const li = document.createElement("li");
                li.textContent = item.name;

                list.appendChild(li);
            }
        } else {
            message.textContent = "Erro: " + xhr.status;
        }
    };

    xhr.onerror = function () {
        message.textContent = "Erro de rede";
    };

    xhr.send();
}

Passo 4 — Executar

Abra o arquivo index.html no navegador.

Clique no botão “Carregar Produtos”.

Resultado Esperado

  • A página NÃO recarrega
  • Os dados aparecem na tela
  • Uma lista de itens é exibida

Verificação

Você deve observar:

  • requisição GET sendo feita
  • resposta em JSON
  • dados renderizados no HTML

Problemas Comuns

  • esquecer JSON.parse
  • erro na URL da API
  • não tratar xhr.status
  • erro ao acessar responseText

Exercícios

Exercício 1

Mostrar também o ID do item.

Dica: use item.id dentro do loop

Exercício 2

Exibir apenas os 5 primeiros itens.

Dica: limite o loop com i < 5

Exercício 3

Exibir mensagem quando não houver dados.

Dica: verifique data.length

Exercício 4

Adicionar campo de busca por nome.

Dica: use um <input> e filtre os itens

Exercício 5

Implemente a criação de um novo produto:

  1. Crie um formulário HTML com os dados do produto.
  2. Implemente as funções JavaScript para o submit do formulário. Use como base o tutorial em https://developer.mozilla.org/pt-BR/docs/Web/API/FormData/FormData.
  3. Use o método POST seguindo as especificaçõe da API em https://restful-api.dev/
    • Você precisa especificar o header Content-Type. Por exemplo: xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');

Dica: Veja mais informações em https://javascript.info/xmlhttprequest#post-formdata.