HTTP Methods Explained (GET, POST, PUT, DELETE)

Every time you open a web page, submit a form, scroll through a feed or tap a button in a mobile app, your device is sending HTTP requests to a server. These requests use HTTP methods (also called HTTP verbs) to tell the server exactly what kind of action you want to perform — read data, create something new, update it or delete it.

Understanding HTTP methods is fundamental to web development. Whether you are building a frontend that fetches data from an API, designing a REST API on the backend, or debugging network requests in DevTools — you need to know these methods inside and out. This guide covers all of them simply, with real examples you can use immediately.

What Is HTTP

HTTP stands for HyperText Transfer Protocol. It is the language that web browsers and servers use to communicate. When you type a URL into your browser and press Enter, your browser sends an HTTP request to a server. The server processes the request and sends back an HTTP response with the data (an HTML page, JSON data, an image, etc.).

Think of HTTP like ordering at a restaurant. You (the client) tell the waiter (HTTP) what you want, the waiter takes your order to the kitchen (the server), and the kitchen sends back your food (the response). The HTTP method is the type of action — are you ordering something new, asking to see the menu, changing your order, or cancelling it?

HTTP is stateless — the server does not remember previous requests. Each request is completely independent. This is why cookies, tokens and sessions exist — to carry state between requests.

Anatomy of an HTTP Request

Every HTTP request has the same basic structure. Understanding this structure helps you work with any API or debug any network issue.

HTTP — structure of a request
// An HTTP request has these parts:

Method      →  GET, POST, PUT, PATCH, DELETE, etc.
URL         →  https://api.example.com/users/42
Headers     →  Content-Type: application/json
                   Authorization: Bearer eyJhbGci...
Body        →  { "name": "Shashank", "role": "dev" }
                   (only for POST, PUT, PATCH — not GET or DELETE)

// The server responds with:
Status Code →  200 OK, 201 Created, 404 Not Found, etc.
Headers     →  Content-Type: application/json
Body        →  { "id": 42, "name": "Shashank" }

GET — Read Data

The GET method is used to retrieve data from a server. It is the most common HTTP method — every time you load a web page, your browser sends a GET request. GET requests should never change data on the server. They are safe (no side effects) and idempotent (calling it once or 100 times gives the same result).

JavaScript — GET request with fetch
// Fetch a single user
const response = await fetch('https://api.example.com/users/42');
const user = await response.json();
console.log(user);   // { id: 42, name: 'Shashank', role: 'developer' }

// Fetch all users
const allUsers = await fetch('https://api.example.com/users');
const users = await allUsers.json();
console.log(users.length);   // 150

Query Parameters — Filter and Search

GET requests often include query parameters in the URL to filter, sort or paginate results. These come after a ? and are separated by &.

JavaScript — GET with query parameters
// Search users with filters
const url = 'https://api.example.com/users?role=developer&sort=name&limit=10';
const response = await fetch(url);

// Using URLSearchParams for cleaner code
const params = new URLSearchParams({
  role: 'developer',
  sort: 'name',
  limit: '10'
});
const res = await fetch(`https://api.example.com/users?${params}`);

ℹ️ Remember: GET requests should never have a request body. All data goes in the URL or headers. URLs have a practical limit of about 2,000 characters — if you need to send more data, use POST instead.

POST — Create New Data

The POST method is used to create new resources on the server. When you submit a registration form, upload a file, or add a new item to a shopping cart — that is a POST request. POST is not idempotent — sending the same POST twice will typically create two separate resources.

JavaScript — POST request to create a user
// Create a new user
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Shashank',
    email: 'shashank@example.com',
    role: 'developer'
  })
});

const newUser = await response.json();
console.log(newUser);   // { id: 43, name: 'Shashank', email: '...', role: 'developer' }
console.log(response.status);   // 201 Created

The Request Body

POST requests carry data in the request body, not in the URL. The most common format is JSON, but you can also send form data, files (multipart/form-data), or plain text. The Content-Type header tells the server what format the body is in.

JavaScript — POST with form data (file upload)
// Upload a file using FormData
const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
formData.append('username', 'shashank');

const response = await fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData   // No Content-Type header needed — browser sets it automatically
});

PUT — Replace Entire Resource

The PUT method replaces the entire resource at the given URL with the data you send. If the resource does not exist, some APIs will create it. PUT is idempotent — sending the same PUT request 10 times has the same effect as sending it once (the resource ends up in the same state).

The key difference from POST: PUT targets a specific resource by its ID, while POST targets a collection to create a new item.

JavaScript — PUT request to replace a user
// Replace user 42 entirely — ALL fields must be included
const response = await fetch('https://api.example.com/users/42', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: 'Shashank Shekhar',
    email: 'shashank@example.com',
    role: 'senior developer',    // updated role
    active: true
  })
});

console.log(response.status);   // 200 OK

// ⚠️ WARNING: If you forget a field in PUT, it gets removed!
// This would DELETE the email and active fields:
// body: JSON.stringify({ name: 'Shashank', role: 'developer' })

PATCH — Partial Update

The PATCH method applies a partial update to a resource. Unlike PUT, you only send the fields you want to change. All other fields remain unchanged. This is often more practical than PUT in real-world applications.

JavaScript — PATCH request for partial update
// Only update the role — everything else stays the same
const response = await fetch('https://api.example.com/users/42', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    role: 'senior developer'   // only this field changes
  })
});

// Result: { id: 42, name: 'Shashank', email: '...', role: 'senior developer', active: true }
// All other fields remain untouched ✅

PUT vs PATCH — When to Use Each

ℹ️ PUT = "Here is the complete new version of this resource. Replace everything."
PATCH = "Here are just the changes I want to make. Keep everything else."

In practice, most APIs use PATCH for updates because it is simpler and less error-prone. PUT is used when you need to guarantee the exact state of the full resource.

DELETE — Remove a Resource

The DELETE method removes a resource from the server. It is idempotent — deleting the same resource twice should give the same end result (the resource is gone). The second request might return a 404 (not found) since it is already deleted, but the state of the server is the same.

JavaScript — DELETE request
// Delete user 42
const response = await fetch('https://api.example.com/users/42', {
  method: 'DELETE'
});

console.log(response.status);   // 204 No Content (success, no body returned)
                                // or 200 OK with a confirmation message

// Some APIs support bulk delete
const bulkDelete = await fetch('https://api.example.com/users', {
  method: 'DELETE',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ ids: [42, 43, 44] })
});

HEAD & OPTIONS — The Utility Methods

HEAD is identical to GET but the server only returns headers, not the body. It is useful for checking if a resource exists, getting its size, or checking when it was last modified — without downloading the full content.

OPTIONS asks the server what methods and headers are allowed for a resource. Browsers send OPTIONS requests automatically before cross-origin requests (called a "preflight request" in CORS).

JavaScript — HEAD and OPTIONS requests
// HEAD — check if file exists and get its size
const head = await fetch('https://api.example.com/files/report.pdf', {
  method: 'HEAD'
});
console.log(head.status);                           // 200 — file exists
console.log(head.headers.get('Content-Length'));   // 2048576 (bytes)

// OPTIONS — check what methods are allowed
const options = await fetch('https://api.example.com/users', {
  method: 'OPTIONS'
});
console.log(options.headers.get('Allow'));    // GET, POST, OPTIONS

Idempotency & Safety

Two important concepts help you understand how HTTP methods should behave:

Safe — the method does not modify the resource. It only reads data. GET, HEAD and OPTIONS are safe methods.

Idempotent — calling the method multiple times has the same effect as calling it once. GET, PUT, DELETE, HEAD and OPTIONS are idempotent. POST and PATCH are generally not idempotent.

💡 Why does this matter? If a network request fails or times out, you need to know if it is safe to retry. Retrying a GET or PUT is always safe. Retrying a POST might create duplicates. This is why idempotency is a key concept in API design.

Common Status Codes

Every HTTP response includes a status code — a 3-digit number that tells the client what happened. Here are the ones you will see most often:

Code	Name	Meaning	Common With
200	OK	Request succeeded	GET, PUT, PATCH, DELETE
201	Created	New resource was created	POST
204	No Content	Success but no body in response	DELETE
301	Moved Permanently	Resource has a new URL	GET
400	Bad Request	Invalid data sent by client	POST, PUT, PATCH
401	Unauthorized	Authentication required	All
403	Forbidden	Authenticated but no permission	All
404	Not Found	Resource does not exist	GET, PUT, DELETE
409	Conflict	Conflict with current state	POST, PUT
500	Internal Server Error	Server crashed or had a bug	All

REST API Patterns

REST (Representational State Transfer) is the most common way to design APIs. REST APIs map HTTP methods to CRUD operations on resources. Here is the standard pattern:

REST — standard resource endpoints
// A typical REST API for a "users" resource:

GET    /users       →  List all users
GET    /users/42    →  Get user with id 42
POST   /users       →  Create a new user
PUT    /users/42    →  Replace user 42 entirely
PATCH  /users/42    →  Update specific fields of user 42
DELETE /users/42    →  Delete user 42

// Nested resources:
GET    /users/42/posts      →  Get all posts by user 42
POST   /users/42/posts      →  Create a new post for user 42
DELETE /users/42/posts/7    →  Delete post 7 by user 42

⚙️ REST best practices: Use nouns for resource names (not verbs). Use plural names (/users not /user). Use HTTP methods to express the action. Use proper status codes. Keep URLs clean and predictable.

Quick Reference

Method	Purpose	Has Body	Idempotent	Safe
GET	Read / retrieve data	No	Yes	Yes
POST	Create new resource	Yes	No	No
PUT	Replace entire resource	Yes	Yes	No
PATCH	Partial update	Yes	No	No
DELETE	Remove resource	Optional	Yes	No
HEAD	Get headers only	No	Yes	Yes
OPTIONS	Check allowed methods	No	Yes	Yes

⚡ Key Takeaways

GET retrieves data without modifying anything. It is safe, idempotent and the most common HTTP method. Data is sent via URL query parameters, never in the body.
POST creates new resources. Data goes in the request body (usually JSON). It is not idempotent — sending the same POST twice can create duplicates.
PUT replaces an entire resource at a specific URL. You must send all fields — missing fields may be deleted. It is idempotent.
PATCH applies a partial update — send only the fields you want to change. In practice, PATCH is used more often than PUT for updates.
DELETE removes a resource. It is idempotent — deleting something twice has the same end result.
HEAD is like GET but returns only headers (no body). Useful for checking if a resource exists or how large it is.
OPTIONS checks what methods and headers a server allows. Browsers send it automatically for CORS preflight checks.
Idempotency means calling a method multiple times has the same effect as calling it once. This matters for retry logic — you can safely retry GET, PUT and DELETE but not POST.
REST APIs map HTTP methods to CRUD: GET = Read, POST = Create, PUT/PATCH = Update, DELETE = Delete. Use nouns for URLs, proper status codes, and keep endpoints predictable.

Tags: HTTP REST API GET POST PUT DELETE Web Development Beginner

Shashank Shekhar

Founder & Creator — Hoopsiper.com

Full stack developer and educator. Building Hoopsiper to help developers learn faster through practical, no-fluff coding guides on JavaScript, AI/ML, Python and modern web development.

HTTP Methods ExplainedGET, POST, PUT, DELETE

What Is HTTP

Anatomy of an HTTP Request

GET — Read Data

Query Parameters — Filter and Search

POST — Create New Data

The Request Body

PUT — Replace Entire Resource

PATCH — Partial Update

PUT vs PATCH — When to Use Each

DELETE — Remove a Resource

HEAD & OPTIONS — The Utility Methods

Idempotency & Safety

Common Status Codes

REST API Patterns

Quick Reference

Async Patterns in JavaScript

JavaScript Functions Explained

Semantic HTML and Modular CSS

HTTP Methods Explained
GET, POST, PUT, DELETE