Programming and Data Persistence

UA5 — JavaScript XMLHttpRequest e API Web

Como o navegador troca dados com o servidor sem recarregar a página — do objeto XMLHttpRequest às APIs Web modernas.

Objeto XMLHttpRequest

O XMLHttpRequest é um objeto JavaScript que permite a troca de dados entre cliente e servidor sem recarregar a página. A ideia central é simples: atualizar partes de uma página Web dinamicamente, sem precisar de uma nova requisição completa ao servidor.

Foi criado pela Microsoft para o Internet Explorer 4.0 e, com o tempo, todos os demais browsers — Firefox, Safari, Opera, Chrome — o implementaram. Hoje é suportado nativamente por todos os navegadores modernos.

Criando um objeto XMLHttpRequest

A criação é direta — basta instanciar o construtor:

var xhttp = new XMLHttpRequest();

A partir da instância, todos os métodos e propriedades do objeto ficam disponíveis.

Métodos

Propriedades

readyState — os 5 estados

O callback onreadystatechange é disparado a cada mudança de estado. Na prática, verifica-se sempre readyState === 4 && status === 200 antes de processar a resposta.

Enviando requisições: GET e POST

A forma mais direta de fazer uma requisição é combinar open() com send():

// GET — busca um recurso no servidor
xhttp.open("GET", "dados.txt", true);
xhttp.send();

// POST — envia dados ao servidor
xhttp.open("POST", "processa.php", true);
xhttp.send("nome=Marcus&curso=ADS");

Os parâmetros do open():

• method — "GET" ou "POST";
• url — caminho do arquivo ou endpoint no servidor;
• async — true para assíncrono (recomendado); false para síncrono (bloqueia a UI).

GET vs. POST:

APIs Web

Uma API (Application Programming Interface) é um conjunto de construções que permite usar funcionalidades complexas por meio de uma sintaxe simples. As APIs Web do JavaScript se dividem em duas categorias:

APIs de navegadores — integradas ao browser, expõem recursos do ambiente:

• Web Audio API — manipulação de áudio (alterar volume, aplicar efeitos);
• Geolocation API — localização do dispositivo;
• Canvas API — desenho e gráficos 2D/3D;
• DOM API — manipulação da estrutura da página.

APIs de terceiros — fornecidas por serviços externos; o código precisa ser carregado de outro servidor:

• API do Twitter/X — busca e exibe tweets;
• API do Google Maps — exibe mapas e rotas;
• APIs REST de backend — endpoints que retornam dados em JSON.

As APIs que fazem uso do XMLHttpRequest internamente atualizam pequenas seções da página de forma independente — sem recarregamento completo — e são a base do que ficou conhecido como AJAX (Asynchronous JavaScript and XML).

Construindo uma aplicação com XMLHttpRequest

Um padrão clássico de uso: uma página carrega o conteúdo de outra página via XMLHttpRequest ao clicar em um link, sem navegação completa.

Estrutura:

• pagina.html — conteúdo a ser carregado;
• principal.html — página principal que faz a requisição.

JavaScript em principal.html:

function getXmlHttpRequest() {
  return new XMLHttpRequest();
}

function alteraURL(url) {
  var xmlhttp = getXmlHttpRequest();

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      document.getElementById("conteudo").innerHTML = xmlhttp.responseText;
    }
  };

  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

O link dispara alteraURL("pagina.html"). O XMLHttpRequest busca o conteúdo de pagina.html e, ao concluir (readyState === 4, status === 200), injeta o HTML no <div id="conteudo"> da página principal.

Práticas Modernas

• Fetch API — substituto nativo e moderno do XMLHttpRequest. Sintaxe baseada em Promises, muito mais legível:

  fetch("dados.json")
    .then(res => res.json())
    .then(data => console.log(data));

• async/await — açúcar sintático sobre Promises que torna o código assíncrono tão legível quanto síncrono:

  async function carregaDados() {
    const res = await fetch("dados.json");
    const data = await res.json();
    console.log(data);
  }

• Axios — biblioteca popular que abstrai Fetch/XMLHttpRequest, adiciona interceptors, transforma JSON automaticamente e simplifica o tratamento de erros.
• JSON como formato padrão — o livro menciona responseXML, mas JSON substituiu XML como formato dominante para troca de dados em APIs Web. responseText + JSON.parse() (ou Fetch com .json()) é o padrão atual.
• REST e GraphQL — arquiteturas de API modernas. REST usa verbos HTTP (GET, POST, PUT, DELETE) sobre recursos com URLs semânticas; GraphQL permite consultas flexíveis e reduz over-fetching.
• CORS (Cross-Origin Resource Sharing) — mecanismo de segurança do browser que restringe requisições a domínios diferentes do de origem. Toda requisição XHR/Fetch para uma API de terceiro passa por esse controle; o servidor precisa enviar os cabeçalhos Access-Control-Allow-Origin corretos.
• Service Workers — interceptam requisições de rede no browser para cache offline, push notifications e estratégias de resiliência (PWA).

Referências

• FREITAS, P. H. C. Programação back-end III. Porto Alegre: SAGAH, [s.d.]. Cap. JavaScript XMLHttpRequest e API Web.
• PRESSMAN, R. S. Engenharia de software: uma abordagem profissional. 7. ed. Porto Alegre: AMGH, 2011.