HTTP
HTTP (Hypertext Transfer Protocol) is the application-layer protocol that governs how web browsers and servers exchange data. Every web request you make — loading a page, submitting a form, calling an API — uses HTTP.
Explanation
HTTP is a request-response protocol: a client (browser, mobile app, script) sends an HTTP request to a server, and the server sends back an HTTP response. Both request and response have three parts: a start line (method + URL for requests; status code for responses), headers (key-value metadata), and an optional body (the actual data payload). The HTTP methods define the intended operation: GET (retrieve a resource, no side effects), POST (create a new resource or submit data), PUT (replace a resource entirely), PATCH (partially update a resource), DELETE (remove a resource). This is the semantic contract that REST APIs use. GET requests should be idempotent and safe (no side effects); POST requests are neither. HTTP status codes communicate the result: 2xx = success (200 OK, 201 Created, 204 No Content), 3xx = redirect (301 Moved Permanently, 302 Found), 4xx = client error (400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 422 Unprocessable Entity, 429 Too Many Requests), 5xx = server error (500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable). Returning the correct status code is an important API design detail that AI-generated APIs often get wrong. HTTP/1.1 (1997) introduced persistent connections (one TCP connection for multiple requests). HTTP/2 (2015) added multiplexing (multiple requests over one connection simultaneously), header compression, and server push. HTTP/3 (2022) replaced TCP with QUIC (UDP-based) for reduced latency, especially on lossy networks. Most production web traffic uses HTTP/2 or HTTP/3.
Code Example
javascript// HTTP requests in JavaScript (fetch API)
// GET — retrieve data
const response = await fetch('https://api.example.com/users/42');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const user = await response.json();
// POST — create a resource
const newPost = await fetch('https://api.example.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token },
body: JSON.stringify({ title: 'Hello', content: 'World' }),
});
// 201 Created expected
// PATCH — partial update
await fetch(`https://api.example.com/posts/${id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: 'Updated Title' }),
});
// Checking status codes explicitly
if (response.status === 404) console.log('Not found');
if (response.status === 401) redirectToLogin();
if (response.status >= 500) alertOpsTeam();
Why It Matters for Engineers
HTTP is the foundation of all web communication. Every API call your application makes, every page load, every image and font fetch — they're all HTTP transactions. Understanding HTTP methods, status codes, and headers is non-negotiable for building and debugging web applications. When an API returns a 422 instead of a 400, or a 401 vs 403, there's a semantic difference that affects how your client should respond. Understanding HTTP also means understanding caching (Cache-Control headers determine when browsers and CDNs cache responses), security (HTTPS, CORS, CSP headers), and performance (connection reuse, compression, HTTP/2 multiplexing). These are all HTTP-layer concerns that directly affect your application's production behavior.
Related Terms
HTTPS · REST API · CORS · Middleware
Learn This In Practice
Go deeper with the full module on Beyond Vibe Code.
Web Development Fundamentals → →