Roundtrip processing of HTML webpage Request

Matching exercise

Match the items on the right to the items on the left.
Browser Request
Browser Request
Browser Request
Browser Request
Browser Request
Browser Request
Browser Request
Server Response
Server Response
Server Response
Server Response
Server Response
Server Response
Server Response
Browser Response
Browser Response
Browser Response
Browser Response
Browser Response
Browser Response
Browser Response
You type an URL into address bar in your preferred browser.
The browser parses the URL to find the protocol, host, port, and path.
http://fakedomain.birkdale.co.uk port 80 or 8080 index.html
(Protocol -- host -- default port -- default page)
The browser forms a HTTP request (specified in the protocol)
Like any other application layer protocol, HTTP works over TCP. So the first step done by the client in initiating a http connection is establishing a TCP connection with the http server.
To reach the host, the OS first needs to translate the human readable host into an IP number, and it does this by doing a DNS lookup on the host
E.g. fakedomain.birkdale.co.uk could be 188.39.0.0 (see WhoIs IP lookup)
A socket needs to be opened from the user’s computer to the IP number of the host server, on the port specified (most often port 80 for http requests)
When a connection is open, the HTTP request is sent to the host
When a connection is open, the HTTP request is sent to the host
The host forwards the request to the server software (e.g. Apache or MS IIS) configured to listen on the specified port
The server inspects the request, and launches the server plugin needed to handle the request (corresponding to the server language you use, PHP, Java, .NET, Python?)
The plugin gets access to the full request, and starts to prepare a HTTP response.
The server retrieves the requested file (probably HTML, but may be generated from a script using a database such as MySQL).
The plugin combines that data with some meta data (in the form of HTTP headers), and sends the HTTP response back to the browser.
The browser receives the response, and parses the HTML in the response
The browser receives the response, and parses the HTML in the response
A DOM tree is built (Document Object Model) out of the HTML
New requests go to the server for each new resource found in the HTML source (e.g. images, CSS, and JavaScript files)… repeat for each resource.
Stylesheets are parsed, and the rendering information in each gets attached to the matching node in the DOM tree
Javascript is parsed and executed, and DOM nodes are moved and style information is updated accordingly
The browser renders the page on the screen according to the DOM tree and the style information for each node
You see the page on the screen