Your Web Browser is a Busy Restaurant
Imagine your web browser is a customer and a web server is the kitchen. HTTP methods are the different ways you talk to the kitchen. You can ask for the menu, order a meal, or even cancel an order. Each action requires a different kind of request.
The HTTP Crew: Main to Specialized
GET
Request data from a specified resource. It's like asking for a menu item's details. These requests are safe and idempotent, meaning they don't change server state and can be repeated.
POST
Send data to the server to create a new resource. This is like placing a new order. They are not idempotent, so submitting the same request twice might create two resources.
PUT
Replace all current representations of the target resource with the request payload. This is a full update to a resource, like replacing an entire order with a new one.
DELETE
Request to delete a specified resource. Like canceling an order, this method removes a resource from the server.
PATCH
Apply partial modifications to a resource. This is for small, partial updates, like asking for a minor change to your meal without replacing the whole thing.
HEAD
Request headers of a resource, without the body. It's a lightweight way to check if a file exists or its metadata before downloading the full content.
TRACE
Perform a message loop-back test along the path to the target resource. This is for diagnostics, allowing the client to see what the server receives after any intermediate proxy modifications.
CONNECT
Establish a tunnel to the server identified by the target resource. This is primarily used for creating secure HTTPS tunnels through an unencrypted HTTP proxy.
Ordering a Pizza: A Real-World Analogy
Let's use a common online task—ordering a pizza—to see how these methods work in practice. Every click and form submission is an HTTP request!
GET: Looking at the menu
When you click on the "menu" page, your browser sends a GET request to the server. It's asking the server for the latest list of pizzas, toppings, and prices.
POST: Submitting your order
When you fill out your name, address, and select your pizza, then click "Place Order," your browser bundles all that data and sends it with a POST request. This tells the server to create a new order in their database.
PUT: Changing your mind completely
You submitted a pizza order, but then you realize you wanted a different pizza entirely. You go to your "My Orders" page, change the pizza, and hit "Update." This sends a PUT request that replaces your old order with a brand-new one.
PATCH: Adding an extra topping
You forgot to add extra cheese! You call the restaurant and say, "Can you just add one more topping to my order?" This is like a PATCH request—it's a small, partial update to an an existing resource, not a full replacement.
DELETE: Canceling your order
Oops, you accidentally ordered two pizzas. You call the restaurant and ask them to cancel the extra one. This action sends a DELETE request, which tells the server to permanently remove that specific order from the system.
Activity: Method Mingle!
Drag each scenario card to the correct box to test your knowledge.
GET
POST
Game: The HTTP Dispatcher
You're a server! Read the incoming request and quickly click the correct button to process it. Don't be too slow!
HTTP Methods in Action: Code and Concepts
Select a Method to Learn More
The Difference Between PUT, POST, & PATCH
These methods are often confused because they all involve sending data to the server. The key difference lies in their purpose and how they affect the server's state. The `TRACE` method is not included here because it is a diagnostic tool, not a data-manipulation method.
POST (Create)
- Purpose: To **create a new resource**.
- Idempotent: **No**. Sending the same POST request twice will create two new, identical resources.
- Example: Creating a new blog post. A form submission to `api/posts` creates a new entry.
PUT (Replace)
- Purpose: To **fully replace** an existing resource.
- Idempotent: **Yes**. Sending the same PUT request multiple times will have the same effect as sending it once.
- Example: Updating an entire blog post. A request to `api/posts/123` with a new, complete body will replace the old post entirely.
PATCH (Update)
- Purpose: To **partially update** an existing resource.
- Idempotent: **No**. It applies a change, so repeating it might have different results.
- Example: Changing only the title of a blog post. A request to `api/posts/123` with only a `{"title": "New Title"}` payload will change only that field.
The Difference Between GET & HEAD
These two methods are used for requesting information, but one is a lightweight version of the other. Think of it as peeking at a package before you open it.
GET (Get Everything)
- Purpose: To **retrieve the entire resource**.
- Includes Body: **Yes**. The server sends the full resource data (e.g., the HTML content of a page, a JSON file, or an image).
- Example: Viewing a blog post. A request to `api/posts/123` will return the entire post, including its title, content, and author.
HEAD (Get Headers Only)
- Purpose: To **retrieve only the headers** for a resource.
- Includes Body: **No**. The server sends no body, only the headers (metadata) from the response.
- Example: Checking if a blog post exists. A request to `api/posts/123` will return headers like `Content-Type` and `Last-Modified` without sending the full post content. This is useful for performance.
HTTP Methods in Action: Code and Concepts
Select an HTTP method from the dropdown to see its explanation and a side-by-side code example for both the frontend (client) and backend (server), both written in JavaScript.
GET Method
The GET method is used to retrieve data from a server. It should not be used for any operation that changes the server's state. It's safe and idempotent.
Frontend (Client-side) JavaScript
// Client requests data for post with ID 1
fetch('/api/posts/1')
.then(response => response.json())
.then(data => console.log('GET response:', data));
Backend (Server-side) JavaScript
// A basic mock server to handle a GET request
// (Conceptual example using Node.js)
const express = require('express');
const app = express();
const posts = [{ id: 1, title: 'Example' }];
app.get('/api/posts/:id', (req, res) => {
const postId = parseInt(req.params.id);
const post = posts.find(p => p.id === postId);
if (post) {
res.status(200).json(post);
} else {
res.status(404).json({ message: 'Not Found' });
}
});
app.listen(3000, () => console.log('Server running on port 3000'));
Animated HTTP Methods Flow
Select a method and watch the animated flow of how a request travels from the client to the server and back.
Animation Log:
Select a method to begin the animation.