HTTP and �The Rise of The Planet of the Apps

COMP 426, Fall 2026

Lecture 5.5

Ketan Mayer-Patel

​

Announcements

• A02 will be out shortly
• Midterm is Monday, September 14^th
• Schedule with ARS for accommodations.
• Will cover through next Wednesday's lecture.

HTML vs. HTTP

• HTML specifies syntax and semantics of web page content
• Associated CSS controls rendering
• Associated TypeScript / JavaScript provides front-end programmability
• Event handling
• HTTP is a request/response protocol
• Protocol
• A formal set of rules for communicating over a network.
• Specifies message syntax and semantics
• HTTP can be used for any kind of resource
• Resource named by URL path

​

Basic HTTP Exchange

• Establish connection
• This is TCP's job
• Needs to know hostname and port number
• Default port number is 80 for non-secure HTTP, 443 for HTTPS
• Client sends a request
• Who is the client?
• Server sends a response
• Possibly repeat
• Close connection

​

Typical use pattern

• First HTTP exchange to retrieve HTML page
• Subsequent HTTP exchanges to retrieve any associated content:
• Stylesheets
• JavaScript
• Images

​

HTTP is stateless

• Each request/response is independent
• No notion of persistent conversation between client and server
• Why is this good?
• Why is this bad?

​

• Attendance check here.

​

HTTP Requests

• 3 parts:
• Request-line
• Header section
• One header per line
• Empty line indicates end of headers
• Message Body (aka Payload)
• May or may not exists
• Often doesn't for simple retrieval requests

​

Request Line

• Single line of text.
• METHOD RESOURCE VERSION
• METHOD
• One of a well-defined set of operations
• GET, POST, PUT, DELETE, OPTIONS, HEAD, TRACE, CONNECT
• Generally either GET or POST
• HEAD sometimes used to get information about resource without actually getting the resource
• RESOURCE
• Path portion of the URL
• Entire URL also legal
• VERSION
• String literal: HTTP/1.1

​

Request Line Example

• http://server:port/path/to/resource
• If no port, then port = 80
• TCP opens a connection to server at port number port
• Request line:
• GET /path/to/resource HTTP/1.1

​

Header Section

• Types of headers:
• General headers
• Message headers (specific to either requests or replies)
• Entity headers (information about message body)
• Syntax:
• HEADER: VALUE
• One header per line.
• Examples
• Date: Wed, 28 Sep 2011 5:30:00 GMT
• Content-type: text/html
• Header reference
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers

​

Common Request Headers

• User-agent
• Describes client making the request
• Host
• Required in HTTP 1.1
• Provides name of server that client intended to contact
• Facilitates "multi-hosting"
• One web server that is handling request for several different entities / domains.
• Host header needed to know which one is intended
• Accept
• Indicates acceptable formats for reply
• Cookie
• Cookie data associated with requested resource.

HTTP Replies

• 3 parts
• Status-line
• Header section
• Message body

​

Reply Status Line

• VERSION CODE REASON
• VERSION
• String literal: HTTP/1.1
• CODE
• 3 digit number
• First digit indicates general response type:
• 1xx (Informational)
• 2xx (Success)
• 3xx (Redirection)
• 4xx (Client Error)
• 5xx (Server Error)
• REASON
• A human readable phrase
• Not standardized officially (can be anything), but some reason phrases are ubiquitous
• "File Not Found" for 404

​

The Evolution of Server-side Programming

• In the beginning, there were forms…
• Form input elements to create a user-interface.
• Input values encoded as part of the URL (GET) or as request payload (POST).
• Common Gateway Interface to invoke server-side processing.
• URL path mapped to external process.

Cookies and Server-side State

• Intra-session state possible with stateless HTTP
• Required being passed back and forth.
• Not suitable for information that should be exposed to client.
• Inter-session state not possible with stateless HTTP
• Cookies provided a mechanism to add state.
• As an index to state stored on the backend
• For example, a shopping cart id.
• As a certificate of authentication
• Requires encrypted communication to prevent man-in-the-middle attacks.

Enter AJAX

• Eary web applications still a little clunky.
• Reloaded the DOM on every interaction.
• Noticeable round trip latency to server.
• Asynchronous JavaScript and XML (AJAX)
• Introduced by Microsoft around 1999/2000
• XMLHttpRequest (XHR) mechanism
• Construct and initiate HTTP requests
• Response handled in JavaScript asynchronously
• Enabled communication with backend without requiring full DOM reload.
• Early use case: search term autocompletion by Google.

Rise of the Planet of the Apps

• Web transformed from document-based request service to distributed application framework.
• Web application HTML skeleton loads once at the beginning.
• All subsequent communication retrieves and updates application state from backend asynchronously.
• Backend becomes a web service.
• URLs understood as endpoints
• Replies are NOT new HTML pages, but simply data.

The current state of the art

• Web servers primarily serve as endpoint API implementations first and as static document servers secondarily.
• XHR was callback based.
• You created an object that represented the HTTP request.
• The object encapsulated callbacks that were invoked when response received.
• The modern approach uses Promises
• fetch()
• async / await