Usama

Posted on Sep 10

🌐 Understanding HTTP Requests and Responses

#webdev #programming #frontend

When you open a website or interact with an API, your browser or application communicates with a web server using HTTP (HyperText Transfer Protocol). Let’s break down how this communication works step by step.

🔹 1. HTTP Requests

Every HTTP interaction starts with a request sent by the client (e.g., your browser).

📝 (a) Request Line

The first line of the request specifies:

The method
The resource
The protocol version

Example:

GET /home.html HTTP/1.1

GET → HTTP method

/home.html → resource being requested

HTTP/1.1 → protocol version

🛠️ (b) Common HTTP Methods

GET → Request a resource from the server

POST → Send data to the server

PUT → Replace an existing resource

PATCH → Update part of a resource

DELETE → Remove a resource

📬 (c) Request Headers

Headers provide extra information about the request.
Example:

Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html
Accept-Language: en
Content-Type: application/json

Host → identifies the target server

User-Agent → tells the server which client is making the request

Accept → specifies which content types are acceptable in response

Accept-Language → preferred language

Content-Type → type of data being sent (e.g., JSON, HTML)

📦 (d) Request Body

Often used with POST or PUT to send data:

POST /users HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "Usama",
  "age": 23
}

🔹 2. HTTP Responses

Once the server processes the request, it replies with an HTTP response.

🏷️ (a) Status Line

Example:

HTTP/1.1 200 OK

HTTP/1.1 → protocol version

200 → status code

OK → reason phrase

📊 (b) Common Status Codes

1xx Informational → Request received (e.g., 100 Continue)

2xx Success → Request succeeded (e.g., 200 OK, 201 Created)

3xx Redirection → Resource moved (e.g., 301 Moved Permanently, 302 Found)

4xx Client Error → Problem in request (e.g., 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found)

5xx Server Error → Problem on server side (e.g., 500 Internal Server Error, 503 Service Unavailable)

📑 (c) Response Headers

Provide metadata about the response:

Date: Tue, 10 Sep 2025 12:00:00 GMT
Server: Apache/2.4.1 (Linux)
Content-Type: text/html
Content-Length: 120

Date → when the response was generated

Server → server software details

Content-Type → type of returned content

Content-Length → size of the response body

📄 (d) Response Body

This is the actual content returned (HTML, JSON, images, etc.):

<html>
  <head><title>Hello</title></head>
  <body>Hello Usama!</body>
</html>

🔹 3. Full Example: Request → Response Flow

Client Request

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome/120.0
Accept: text/html

Server Response

HTTP/1.1 200 OK
Date: Tue, 10 Sep 2025 12:00:00 GMT
Server: Apache/2.4.1 (Linux)
Content-Type: text/html
Content-Length: 120

<html>
  <body>Hello World!</body>
</html>