Skip to content

Beginner · How the web and backends work · topic 3 of 54 · 25 min

HTTP requests, responses and methods

Explanation

HTTP is the set of rules browsers and servers use to talk. Every request has a method (like GET or POST), a path, headers and sometimes a body. The method says what you want to do: read, create, replace, change or delete. Some methods are safe (they only read) and some are idempotent (doing them twice is the same as doing them once).

What a request looks like

HTTP (HyperText Transfer Protocol) messages are plain text with a fixed shape. A request has a start line, then headers, then an empty line, then an optional body. Headers are extra details written as name: value. The body is the data you send, like a form or JSON.

output
POST /orders HTTP/1.1
Host: api.chaiwala.in
Content-Type: application/json

{"item": "Masala chai", "qty": 2}
A request: start line (method, path, version), headers, an empty line, then the body.

The response has the same shape. Its first line is a status line with a status code (a number like 200 or 404) and a short reason. Then come headers and the body.

output
HTTP/1.1 201 Created
Content-Type: application/json

{"id": 501, "item": "Masala chai", "qty": 2, "total": 40}
A response: status line, headers, empty line, body.

The five main methods

MethodUsed toExampleHas a body?
GETRead dataGET /products/42No
POSTCreate something newPOST /ordersYes
PUTReplace a whole thingPUT /users/7 with the full userYes
PATCHChange a few fieldsPATCH /users/7 with {"city": "Pune"}Yes
DELETERemove somethingDELETE /cart/items/3Usually no
Think of it like this: Think of a kirana shop counter. GET is "show me the price of rice". POST is "add a new item to my bill". PUT is "throw away my old list, here is the new full list". PATCH is "change only the sugar from 1 kg to 2 kg". DELETE is "remove the biscuits".

Safe and idempotent

A safe method only reads; it never changes data on the server. GET and HEAD are safe. That is why browsers and search engines feel free to send GET requests at any time.

An idempotent method gives the same end result whether you send it once or five times. GET, PUT and DELETE are idempotent: deleting item 3 twice still leaves item 3 deleted. POST is not idempotent: sending "create order" twice makes two orders. PATCH is usually treated as not idempotent too.

Think of it like this: Pressing the lift button five times still calls one lift: idempotent. Tapping "Place order" five times on a food app can give you five biryanis: not idempotent, just like POST.
javascript
const cart = { rice: 1 };

// PUT-like: set the value. Doing it twice gives the same result.
function putQty(item, qty) { cart[item] = qty; }
putQty('sugar', 2);
putQty('sugar', 2);
console.log(cart.sugar); // 2

// POST-like: add one more. Doing it twice changes the result again.
const orders = [];
function postOrder(item) { orders.push({ id: orders.length + 1, item }); }
postOrder('chai');
postOrder('chai');
console.log(orders.length); // 2 orders, not 1
Setting a value is idempotent; adding a new record is not.
Tip: Because POST is not idempotent, payment apps disable the Pay button after the first tap, and good backends check for repeated requests. This stops double charges when the network is slow.
Careful: Never use GET to change data, like GET /delete-account?id=5. Browsers, link previews and search engine bots send GET requests on their own, and they could delete things by accident.

Watch the lesson

HTTP requests, responses and methods · 1/6

Start line Headers Empty line Body

HTTP is the language browsers and servers speak. Every message has the same shape.

Prefer a video by a teacher? Find free videos on “http methods get post put patch delete explained for beginners” on YouTube ↗

In real life: Managing a cart on a shopping app

When you open your cart, the app sends GET /cart. When you add a phone cover, it sends POST /cart/items with the product in the body. Changing the quantity from 1 to 2 sends PATCH /cart/items/9 with {"qty": 2}. Removing it sends DELETE /cart/items/9. The server looks at the method first to know what to do.

javascript
const requests = [
  { method: 'GET', path: '/cart' },
  { method: 'POST', path: '/cart/items', body: { productId: 31, qty: 1 } },
  { method: 'PATCH', path: '/cart/items/9', body: { qty: 2 } },
  { method: 'DELETE', path: '/cart/items/9' },
];
for (const r of requests) console.log(r.method, r.path);
Four requests, four different jobs, chosen by the method.

Practice (0/3 done)

Task 1 · Code · Javascript

Write a function methodFor(action) that returns the HTTP method for an action: "list" and "read" give "GET", "create" gives "POST", "replace" gives "PUT", "edit" gives "PATCH", "remove" gives "DELETE". Any other action gives null.

Task 2 · Code · Javascript

Write a function buildRequest(method, path, body) that returns { method, path, headers, body }. The method must be in capital letters. When body is given, headers is { "Content-Type": "application/json" } and body is the JSON text of it. When body is not given, headers is {} and body is null.

Task 3 · Code · Javascript

Write a function describeMethod(method) that returns { safe, idempotent } for a method name in any case. GET and HEAD are safe and idempotent. PUT and DELETE are idempotent but not safe. POST and PATCH are neither.

Quick quiz

Question 1

1.Which method should you use to create a new order?

Question 2

2.You want to change only the phone number of user 7. Which method fits best?

Question 3

3.What does "idempotent" mean?

Question 4

4.Which part of an HTTP request carries the JSON data you send?

Question 5

5.Why is GET /delete-photo?id=8 a bad idea?

Read more (free)

Pass the quiz (60% or more) or mark this topic as done when you are ready.

Your progress is saved on this device only.

Next: HTTP status codes →

← Previous: Clients, servers, IP addresses and URLs