HTTP, pedidos e Ajax

URLs, mensagens, métodos, estados, cookies, cache, promessas, JSON, fetch, SOP e CORS.

TLDR

Perguntar sobre esta página

ChatGPTClaudePerplexityGrokGeminiCopiar e abrirDeepSeekCopiar e abrir

Identificar e ler

  • Origem = esquema + host + porta. http e https no mesmo host são origens distintas. Fragmento #... fica no navegador.
  • Pedido: método, alvo, versão; cabeçalhos; linha vazia; corpo. Resposta: estado; cabeçalhos; linha vazia; corpo. HTTP/2 e 3 mudam a codificação, não os conceitos.
  • Accept pede formato; Content-Type descreve o corpo enviado. Content-Length conta bytes. Formulário: urlencoded; upload: multipart; JSON: application/json. Em PHP, JSON não aparece em $_POST: lê o corpo e descodifica.

Métodos e estados

MétodoSeguroIdempotente
GET, HEAD, OPTIONSSimSim
POSTNãoNão, em geral
PUT, DELETENãoSim
PATCHNãoDepende da operação
  • Idempotente descreve efeito, não resposta igual: dois DELETE podem dar 204 e depois 404. Dois POST podem criar duas reservas. GET /apagar?id=7 é errado mesmo com método seguro.
  • REST: recurso no URL, operação no método. JSON sozinho não é REST. Stateless: cada pedido traz o necessário; não proíbe guardar dados no servidor.
  • 200 sucesso; 201 criado (Location); 204 sem corpo; 303 consulta outro destino por GET; 304 cache válida; 400 entrada; 401 credenciais; 403 recusa; 404 ausente; 405 método (Allow); 500 interno.

Sessão, cookies e cache

  • Set-Cookie na resposta; Cookie nos pedidos seguintes. Cookie é entrada do cliente, não prova de permissão. HttpOnly esconde de JavaScript mas não trava o envio.
  • ETag com If-None-Match permite 304 sem corpo. no-store proíbe guardar; no-cache guarda mas revalida. Nada de respostas privadas em caches partilhadas.

Assíncrono e fetch

console.log('A');
Promise.resolve().then(() => console.log('B'));
console.log('C'); // A, C, B
  • await suspende só a função; reações correm como microtarefas após o código corrente. Cálculo pesado continua a bloquear.
  • fetch resolve com 404/500: testa resposta.ok (200 a 299) e lança erro. json() é assíncrono; 200 com HTML falha na mesma.
  • Parâmetros com URLSearchParams (espaços, &, acentos). Respostas fora de ordem: numera pedidos e só a atual toca na lista. AbortController cancela, não dispensa a comparação.
  • JSON: aspas duplas, sem comentários nem vírgula final. stringify codifica, parse descodifica, nunca eval.

Entre origens

  • SOP limita leitura por scripts, não todos os envios. CORS autoriza leitura; não autentica nem impede CSRF.
  • GET simples pode dispensar preflight; POST com application/json exige-o normalmente. OPTIONS leva Origin, método e cabeçalhos; a resposta autoriza cada um, e a resposta real repete Access-Control-Allow-Origin.
  • Falha de CORS na leitura não anula alteração já feita no servidor.
  • Credenciais: credentials: 'include', origem concreta (nunca *) e Access-Control-Allow-Credentials. mode: 'no-cors' dá resposta opaca, ilegível.

Arquiteturas

  • MPA navega entre documentos; SPA atualiza no cliente (mantém URLs, histórico, acesso). SSR gera HTML no servidor; CSR gera no cliente. Eixos independentes.
  • localStorage persiste por origem; sessionStorage por separador e sessão. Não seguem em pedidos; nada de segredos.
  • Service worker interceta pedidos das páginas que controla; não corre dentro dos eventos do DOM.

Explicação completa.

À tua maneira

Aparência

Modo de cor
Tema
Cor de destaque

Leitura

Fonte de leitura

Álgebra, lógica e uma ideia de cada vez.

Código

Fonte do código

Navegação

Cursor de leitura, sem edição. h, j, k, l movem; / pesquisa nesta página. v seleciona caracteres; V seleciona linhas; y copia. Tab permite destacar ou comentar. Espaço ou Enter abre blocos recolhíveis. Nos cartões, h, j, k, l mudam o foco.

CSS personalizado

Ativa uma sugestão ou guarda o teu CSS. Só muda este navegador.

Usa --page, --text e --accent para acompanhar o tema.

Seletores e recuperação

.site-header, .prose, .course-card, [data-reading-history], [data-playground] e .page-actions.

Abre a aparência com a tecla vírgula ou no rodapé. Se o CSS esconder os controlos, abre esta página sem CSS personalizado.

Pesquisar

Escreve para pesquisar em todo o site.

para escolher · Enter para abrir · Esc para fechar

Copiar fórmula

A cópia automática não está disponível. Copia o LaTeX abaixo.

Pesquisar nesta página

Enter procura · n / N repetem · Esc cancela. Ctrl / Cmd K pesquisa todo o site.

Atalhos de teclado

Clica numa tecla para a mudar. Esc cancela. Backspace desativa.

PesquisarCtrl / Cmd K

Os atalhos não interferem enquanto escreves. Tab e Enter funcionam sempre.