HTTP and HTTPS Explained

What is HTTP?

HTTP (HyperText Transfer Protocol) is the foundation of data communication on the World Wide Web.

Think of HTTP as the language browsers and servers use to talk to each other.

🔄 HTTP Request-Response Cycle

Client (Browser)          Server
      |                     |
      |------ Request ----->|
      |                     |
      |<----- Response -----|
      |                     |

Real Example:

Request:

GET /api/users/123 HTTP/1.1
Host: api.example.com
Accept: application/json

Response:

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": 123,
  "name": "John Doe",
  "email": "john@example.com"
}

📬 HTTP Methods (Verbs)

GET - Retrieve Data

// Fetch user data
fetch("https://api.example.com/users/1")
  .then(res => res.json())
  .then(data => console.log(data));

POST - Create New Data

// Create new user
fetch("https://api.example.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    name: "Jane Doe",
    email: "jane@example.com"
  })
});

PUT - Update Entire Resource

// Update user completely
fetch("https://api.example.com/users/1", {
  method: "PUT",
  body: JSON.stringify({
    name: "Jane Updated",
    email: "jane.new@example.com"
  })
});

PATCH - Partial Update

// Update only email
fetch("https://api.example.com/users/1", {
  method: "PATCH",
  body: JSON.stringify({
    email: "newemail@example.com"
  })
});

DELETE - Remove Resource

// Delete user
fetch("https://api.example.com/users/1", {
  method: "DELETE"
});

📊 HTTP Status Codes

2xx Success

200 OK: Request succeeded
201 Created: New resource created
204 No Content: Success but no data to return

3xx Redirection

301 Moved Permanently: Resource moved forever
302 Found: Temporary redirect
304 Not Modified: Use cached version

4xx Client Errors

400 Bad Request: Invalid request syntax
401 Unauthorized: Authentication required
403 Forbidden: No permission
404 Not Found: Resource does not exist
429 Too Many Requests: Rate limit exceeded

5xx Server Errors

500 Internal Server Error: Server crashed
502 Bad Gateway: Invalid response from upstream
503 Service Unavailable: Server overloaded

📋 HTTP Headers

Request Headers

GET /api/data HTTP/1.1
Host: api.example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer [token]
Content-Type: application/json

Response Headers

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 348
Cache-Control: max-age=3600
Set-Cookie: sessionId=abc123; HttpOnly; Secure
Access-Control-Allow-Origin: *

Common Headers:

Request:

Authorization: Authentication credentials
Content-Type: Data format being sent
Accept: Data format client wants
User-Agent: Client software info

Response:

Content-Type: Data format being returned
Cache-Control: Caching instructions
Set-Cookie: Store data in browser
Location: Redirect URL

🔒 HTTPS - The Secure Version

HTTP vs HTTPS

HTTP:  http://example.com  (Port 80)  ❌ Not Secure
HTTPS: https://example.com (Port 443) ✅ Secure

What HTTPS Adds:

Encryption - Data scrambled during transit
Authentication - Verify server identity
Integrity - Detect data tampering

How HTTPS Works:

1. Browser requests HTTPS connection
2. Server sends SSL/TLS certificate
3. Browser verifies certificate
4. Encryption keys exchanged
5. Secure connection established
6. Encrypted data transmission begins

🔐 SSL/TLS Certificates

SSL (Secure Sockets Layer) / TLS (Transport Layer Security)

// Check if site uses HTTPS
if (window.location.protocol === "https:") {
  console.log("✅ Connection is secure");
} else {
  console.log("❌ Connection is NOT secure");
}

Certificate Information:

Issued by trusted Certificate Authority (CA)
Contains public key for encryption
Expires after 1-2 years
Must be renewed regularly

🌐 REST API Example

Full REST API Pattern:

const API_BASE = "https://api.example.com";

// GET - List all users
async function getUsers() {
  const response = await fetch(`${API_BASE}/users`);
  return response.json();
}

// GET - Single user
async function getUser(id) {
  const response = await fetch(`${API_BASE}/users/${id}`);
  return response.json();
}

// POST - Create user
async function createUser(userData) {
  const response = await fetch(`${API_BASE}/users`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(userData)
  });
  return response.json();
}

// PUT - Update user
async function updateUser(id, userData) {
  const response = await fetch(`${API_BASE}/users/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(userData)
  });
  return response.json();
}

// DELETE - Remove user
async function deleteUser(id) {
  const response = await fetch(`${API_BASE}/users/${id}`, {
    method: "DELETE"
  });
  return response.ok;
}

🎯 Best Practices

1. Always Use HTTPS

// Redirect HTTP to HTTPS
if (location.protocol !== "https:") {
  location.replace(`https:${location.href.substring(location.protocol.length)}`);
}

2. Handle Errors Properly

async function fetchData(url) {
  try {
    const response = await fetch(url);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    console.error("Fetch error:", error);
    throw error;
  }
}

3. Set Appropriate Headers

fetch(url, {
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json",
    "Authorization": `Bearer ${token}`
  }
});

4. Use Correct Status Codes

// Server-side (Node.js/Express)
app.get("/api/user/:id", (req, res) => {
  const user = findUser(req.params.id);
  
  if (!user) {
    return res.status(404).json({ error: "User not found" });
  }
  
  res.status(200).json(user);
});

💡 Real-World Example: Login Flow

async function login(email, password) {
  try {
    // Send POST request with credentials
    const response = await fetch("https://api.example.com/auth/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ email, password })
    });
    
    // Check status code
    if (response.status === 401) {
      throw new Error("Invalid credentials");
    }
    
    if (!response.ok) {
      throw new Error("Login failed");
    }
    
    // Parse response
    const data = await response.json();
    
    // Store token
    localStorage.setItem("authToken", data.token);
    
    return data.user;
  } catch (error) {
    console.error("Login error:", error);
    throw error;
  }
}

📚 Summary

Key Points:

HTTP is the protocol for web communication
HTTPS adds security through encryption
Methods define the type of operation (GET, POST, etc.)
Status codes indicate success or failure
Headers provide metadata about requests/responses
Always use HTTPS in production

Next Steps:

Build a simple REST API
Practice with different HTTP methods
Learn about CORS (Cross-Origin Resource Sharing)
Explore WebSockets for real-time communication

🔨 Practice Exercise

Create a simple todo app that uses HTTP methods:

const API = "https://jsonplaceholder.typicode.com";

// GET todos
fetch(`${API}/todos?_limit=5`)
  .then(res => res.json())
  .then(todos => console.log("Todos:", todos));

// POST new todo
fetch(`${API}/todos`, {
  method: "POST",
  body: JSON.stringify({
    title: "Learn HTTP",
    completed: false,
    userId: 1
  }),
  headers: { "Content-Type": "application/json" }
})
  .then(res => res.json())
  .then(todo => console.log("Created:", todo));

Now you understand how HTTP and HTTPS power the modern web!

HTTP and HTTPS Explained - Complete Guide

What You'll Learn