PathTailor
FRSign inBuild my path
PathTailor
Build my pathSign inLire en français

The HTTP Protocol: Requests, Responses, and URLs

First lesson of the HTTP and REST APIs course, free to read: about 16 minutes, 3 exercises and 3 quiz questions. This is the catalogue's base lesson; in the student space, it is rewritten for your profile.

Objectives

  • Describe the request/response exchange and the structure of an HTTP message
  • Break down a URL (scheme, host, port, path, parameters, fragment)
  • Work with URL and URLSearchParams in JavaScript

HTTP request and responseURL structureHTTP headers

The HTTP Protocol: Requests, Responses, and URLs

HTTP (HyperText Transfer Protocol) is the common language of the web: browsers, mobile apps, data analysis scripts, and servers all use it to exchange resources. The principle: a client sends a request, a server returns a response.

HTTP is stateless: by protocol, the server does not remember previous requests. Each request must contain everything needed to process it (identity via a token or a cookie, parameters…).

Anatomy of an exchange

GET /api/produits?categorie=velos&page=2 HTTP/1.1
Host: boutique.exemple.fr
Accept: application/json
Authorization: Bearer eyJhbGciOi...
  • Request line: method (GET), target (path + parameters), version.
  • Headers: Name: value metadata (accepted format, authentication, language…).
  • Body (optional): the data sent, for example as JSON for a POST.
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Cache-Control: max-age=60

{"page":2,"produits":[{"id":12,"nom":"Vélo de ville"}]}
  • Status line: version, status code (200), and reason phrase.
  • Response headers, then the body.

Header names are case-insensitive (content-type = Content-Type).

Anatomy of a URL

https://boutique.exemple.fr:8443/api/produits?categorie=velos&page=2#avis
└─┬─┘   └────────┬────────┘ └┬─┘└─────┬─────┘ └─────────┬────────┘ └┬─┘
scheme         host       port   path          query string      fragment

The fragment (#avis) stays in the browser: it is never sent to the server. Without an explicit port, https uses 443 and http uses 80.

Working with URLs in JavaScript

The standard URL object (browser and Node.js) parses a URL without a fragile regular expression:

const url = new URL("https://boutique.exemple.fr/api/produits?categorie=velos&page=2#avis");
url.protocol;                        // "https:"
url.hostname;                        // "boutique.exemple.fr"
url.pathname;                        // "/api/produits"
url.searchParams.get("page");        // "2" (always a string)
url.hash;                            // "#avis"

// Relative URL resolved against a base
new URL("../contact", "https://exemple.fr/blog/article").href; // "https://exemple.fr/contact"

To build a query string, URLSearchParams encodes special characters:

const params = new URLSearchParams({ q: "vélo & casque", tri: "prix" });
params.append("tag", "urbain");
params.toString(); // "q=v%C3%A9lo+%26+casque&tri=prix&tag=urbain"

const url2 = new URL("https://api.exemple.fr/recherche");
url2.search = params.toString();

Without encoding, the & in “vélo & casque” would split the parameter in two. Concatenating strings by hand is a classic source of bugs… and security flaws.

HTTPS and versions

HTTPS is HTTP encrypted with TLS: confidentiality, integrity, and server authentication. It is the standard today, essential as soon as personal data or tokens are involved.

HTTP/1.1, HTTP/2 (multiplexing), and HTTP/3 (over QUIC) change how messages are transported, but the semantics stay the same: same methods, same statuses, same headers. This course therefore applies to all versions.

Key takeaways

  • Request = method + target + headers + body; response = status + headers + body.
  • URL and URLSearchParams to read and build URLs.
  • The fragment does not go to the server; HTTPS everywhere.

Exercises

Solutions and tests stay on the server. In the student space, your code is run and checked, and the tutor gives hints before the solution.

  1. CodeDifficulty 1JavaScript in the browser2 hints

    Break down a URL

    Write decomposer(texte) that returns { schema, hote, port, chemin, params, fragment }:

    • schema without the : ("https");
    • port: the explicit port as a number, otherwise the default port (443 for https, 80 for http);
    • params: an object { name: value } (last value if repeated);
    • fragment: without the #, empty string if absent.
    function decomposer(texte) {
  const url = new URL(texte);
  // TODO
}

  2. CodeDifficulty 2JavaScript in the browser2 hints

    Build a search URL

    Write urlRecherche(base, filtres) that adds the non-empty filters to base: every property whose value is neither undefined, nor null, nor ""; an array value produces a repeated parameter. Keys are added in alphabetical order to get stable URLs (useful for caching). Returns the URL string.

    function urlRecherche(base, filtres) {
  // TODO
}

  3. Multiple choiceDifficulty 11 hint

    What does the server receive?

    The browser requests https://exemple.fr/doc?page=3#section-2. Which part is not sent to the server?

    • The path /doc
    • The query string ?page=3
    • The fragment #section-2
    • The host exemple.fr

End-of-lesson quiz

  1. What does “HTTP is stateless” mean?

    • The server cannot store anything
    • Each request is handled independently of the previous ones by the protocol
    • Responses have no status code

  2. What does new URL(“https://x.fr/?n=5”).searchParams.get(“n”) return?

    • 5 (number)
    • "5" (string)
    • undefined

  3. What changes between HTTP/1.1 and HTTP/2?

    • The methods and status codes
    • How messages are transported (multiplexing), not their semantics
    • The URL format

The rest of the course

  1. Methods and Status Codes18 min
  2. Designing a REST API: Resources, URLs, and Pagination18 min
  3. JSON Bodies, Validation, and Error Format18 min
  4. Essential Headers: Caching, CORS, and Authentication20 min
  5. Assembling a Minimal API Router20 min
Build my pathSee the full syllabus

HTTP and REST APIs · Intermediate · 3 h 50 min