Aula 4

Aplicações modernas precisam buscar dados de bancos de dados, validar informações, autenticar usuários e salvar alterações. Para isso, é fundamental a comunicação entre cliente (navegador) e servidor.

Exemplos

• Carregar produtos de uma loja online.
• Enviar um formulário de cadastro.
• Atualizar apenas parte da página (sem recarregar tudo).

Uma solicitação síncrona bloqueia a execução do código até o servidor responder. Já uma solicitação assíncrona permite que o restante do programa continue rodando.

Exemplo Síncrono (não recomendado)

let xhr = new XMLHttpRequest();
xhr.open("GET", "dados.json", false); // false = síncrono
xhr.send();
console.log(xhr.responseText); // bloqueia até terminar

Exemplo Assíncrono

let xhr = new XMLHttpRequest();
xhr.open("GET", "dados.json", true); // true = assíncrono
xhr.onload = function() {
  console.log(xhr.responseText);
};
xhr.send();

HTTP (HyperText Transfer Protocol) é o protocolo que define como o cliente e o servidor se comunicam na web.

• Cliente envia uma request.
• Servidor devolve uma response.
• Comunicação baseada em métodos e códigos de status.

• Request: dados enviados pelo cliente (ex: formulário).
• Response: resposta do servidor (ex: lista de produtos).

• GET - Obter dados.
• POST - Enviar dados (ex: formulário).
• PUT - Atualizar dados.
• DELETE - Excluir dados.
• PATCH - Atualizar parcialmente.

Exemplo GET com Fetch

fetch("https://api.exemplo.com/produtos")
  .then(resp => resp.json())
  .then(dados => console.log(dados));

• 200 - Sucesso
• 201 - Criado
• 400 - Requisição inválida
• 401 - Não autorizado
• 404 - Não encontrado
• 500 - Erro interno no servidor

O XMLHttpRequest (XHR) é um objeto usado para enviar e receber dados de um servidor de forma assíncrona.

Metas e Objetivos

• Fazer requisições HTTP sem recarregar a página.
• Trocar dados em tempo real com o servidor.

Métodos e Propriedades

• open(método, url, async)
• send()
• onload - executa quando a resposta chega.
• status - código de resposta.
• responseText - corpo da resposta.

Exemplo POST com XHR

let xhr = new XMLHttpRequest();
xhr.open("POST", "/api/cadastro");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onload = () => console.log(xhr.responseText);
xhr.send(JSON.stringify({ nome: "João", idade: 30 }));

• Carregar dados em tabelas sem recarregar a página.
• Validação de login.
• Envio de formulários AJAX.

O fetch é uma API moderna e mais simples para requisições HTTP, substituindo o uso de XMLHttpRequest.

Metas e Objetivos

• Mais simples e legível.
• Baseado em Promises.
• Suporte a async/await.

Exemplo GET

fetch("/api/usuarios")
  .then(resp => resp.json())
  .then(dados => console.log(dados));

Exemplo POST

fetch("/api/cadastro", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ nome: "Maria", idade: 22 })
})
.then(resp => resp.json())
.then(dados => console.log(dados));

• Buscar informações em APIs públicas (ex: clima, moedas).
• Enviar dados de formulários.
• Consumir serviços REST de back-end.