Topic 2 · 2 of 43

Client-Server Architecture

All in one: the whole client–server conversation, side by side

What this example compares

Who does what: client vs server vs database
The round trip: click, DNS lookup, request, processing, response, render
What comes back: plain file vs dynamic page, HTML vs JSON
One page, many requests: <link> vs <img> vs <script> vs <video>, with a live picture
URL parts: protocol vs domain vs path vs query string, plus port and fragment
Absolute vs relative URL, with a live relative URL
HTTP request vs response: request line vs status line, headers, blank line, body
The method: GET vs POST
Memory: stateless HTTP vs a cookie
Status codes: 1xx vs 2xx vs 3xx vs 4xx vs 5xx and the famous codes in each
Protocols and ports: http (80) vs https (443) vs mailto: vs tel:, and 21, 25, 8080
Worked example: one portal URL beside the request it really sends
Look-alike names: HTTP vs HTTPS vs HTML vs URL vs DNS vs IP address vs TLS

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see thirteen panels of labelled boxes. Panel 1 shows the client, server and database with the arrows between them; panel 2 shows the six steps in order; panel 3 shows a small HTML answer beside a JSON one. Panels 4 and 6 each show the campus picture, the one real file this page asks the server for. Panel 5 colours the four parts of a URL. Panels 7, 8 and 9 show HTTP messages as dark text boxes: a request beside a response, GET beside POST, and a request without and with a cookie. Panel 10 shows the five status-code ranges with coloured tops, panel 11 the protocols and ports, panel 12 the worked portal URL beside the request it sends, and panel 13 the look-alike names. There is no JavaScript, so nothing is printed to a console.

Quick check: in panel 12, which part of the URL is missing from the request the browser sends, and why?

The fragment #marks. The browser keeps it and uses it to scroll to the element with id="marks"; it is never sent to the server. The query string ?reg=12345&sem=3, by contrast, travels in the request line.