02 HTTP

HTTP Request & Response Interactions

  • Definition: Interaction between clients and servers using the HTTP protocol involves requests from clients (browsers) and responses from servers.

  • Key Processes:

    • Clients (browsers) make requests to retrieve resources identified by URLs.

    • Servers respond to these requests accordingly.

Caching

  • Definition: Caching is the process of storing copies of resources to improve retrieval times.

  • Benefits:

    • Reduces response times by storing content closer to the user.

    • Decreases network traffic to distant servers.

  • Types of Caches:

    • Private Browser Caches: Stored in the user's browser to speed up access to previously visited web pages.

    • Proxy Server Caches: Operated by network service providers or organizations to cache resources for all users.

Cookies

  • Purpose of Cookies:

    • Session management

    • Personalization of user experience

    • Tracking user behavior across sessions

  • Definition: A cookie is a small piece of data sent from the server to the browser, which is stored and sent back by the browser on future requests.

  • Example: A server may send Set-Cookie: user_id=1678 which the browser sends back in future requests as Cookie: user_id=1678.

Using Developer Tools

  • Browser Developer Tools allow users to analyze and debug HTTP traffic:

    • Chrome/Firefox: Press "F12" or "Control+Shift+I".

    • Edge: Same as Chrome/Firefox.

    • Safari: Enable Develop menu via Preferences -> Advanced, then press "Option-Command-I".


Core Features of the Web

  1. Unique Resource Identification: Every resource is identified by a URL.

  2. Client-Server Interaction: Two programs (client and server) communicate via HTTP protocol:

    • The browser creates HTTP requests and displays HTML.

    • The web server responds to HTTP requests.

  3. HTTP Protocol: Describes the operation of requests and responses.

  4. HTML and CSS: Technologies used to publish web documents.

Hypertext Transfer Protocol (HTTP)

  • Foundation of Data Communication: HTTP establishes how data is communicated on the web.

  • Application Layer Protocol: Operates on top of TCP (Transmission Control Protocol).

  • Characteristics:

    • Messages in plaintext and can include binary data.

    • Allows downloading/uploading data.

Client-Server Model

  • Stateless Protocol: Each request is independent, with no retention of prior context by the server.

    • Implications:

    • Difficulty in user interactions, e.g., shopping carts that require maintaining state.

Evolution of HTTP

  • Versions:

    • HTTP/0.9 (1991): Simple GET requests with no headers.

    • HTTP/1.0 (1996): Introduced HTTP headers and status codes; issues with performance due to new TCP connection for each request.

    • HTTP/1.1 (1997):

    • Persistent Connections: Reuses TCP connections.

    • Pipelining: Allows multiple requests before receiving responses.

    • Caching mechanisms.

    • Content negotiation for varied client capabilities.

    • HTTP/2 (2015): Improved on HTTP/1.1 by introducing binary framing, header compression, and multiplexing.

    • HTTP/3 (2022): A proposed standard improving latency through usage of QUIC protocol (not yet fully standardized).

HTTP Messages

  • Types:

    • Request Messages: Sent by the client to consider what action should be performed.

    • Response Messages: Sent by the server concerning the outcome of a request.

  • Structure: Both messages have a similar structure:

    • Composed of headers, a blank line, and an optional message body.

HTTP Request Structure

  • Request Line:

    • Includes the request type (e.g., GET, POST), URL, and HTTP version.

    • Common Request Types:

    • GET: Retrieve a resource.

    • POST: Submit data to be processed.

    • HEAD: Retrieve headers only.

    • PUT: Update/modify a resource.

    • DELETE: Remove a resource.

HTTP Response Structure

  • Status Line: Contains HTTP version, status code, and status phrase.

    • Common Status Codes:

    • 200 OK: Success.

    • 302 Found: Redirection.

    • 304 Not Modified: Resource unchanged since the last request.

    • 404 Not Found: Resource unavailable.

HTTP Headers

  • General Structure: A string followed by a colon and its corresponding value.

  • Types of Headers:

    • General Headers: Provide information regarding entire message.

    • Entity Headers: Concerned with the body of the request/response.

    • Request Headers: Offer more information about the client's request.

    • Response Headers: Provide additional info about the server's response.

Common HTTP Headers

  • Connection: Indicates if the connection should remain open.

  • Cache-Control: Controls cacheability of the response.

  • Accept: Media types the client can handle.

  • Last-Modified: Date and time the resource was last modified.

  • Content-Type: The type of the returned content (e.g., text/html).

Validation and Stale Resources

  • Stale Content: Cached content may become outdated.

  • Validation Mechanisms: Use of Etag and Last-Modified headers by the origin server helps determine freshness.

    • Example of an Etag: "33a64df551425fcc55e4d42a148795d9f25f89d4".

  • Conditional Requests: Clients can send requests that conditionally get the resource based on the Etag or Last-Modified values.

Example of an HTTP Exchange

Request Example:
GET /~atctam/view/Simple.html HTTP/1.1
Host: i.cs.hku.hk
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64;  rv:79.0) Gecko/20100101 Firefox/79.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Connection: keep-alive
Response Example:
HTTP/1.1 200 OK
Date: Sat, 05 Sep 2020 03:00:56 GMT
Content-Type: text/html
Content-Length: 136
Example Resource:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Sample HTML Page</title>
</head>
<body>
<h1>This is an HTML Page</h1>
</body>
</html>

Web Resource Requests and Parsing

  • Process: When a web page loads, the browser:

    • Requests the initial HTML page.

    • Parses that HTML to find all included resources (images, CSS, scripts).

    • Sends separate requests for each resource, thus requiring multiple HTTP exchanges.

Conclusion

  • Caching: Enhances web page loading times but requires careful consideration of freshness to avoid serving stale content.

  • Cookies: Allow for stateful sessions across an otherwise stateless protocol, enhancing user sessions and tracking.

  • Developer Tools: Vital for understanding HTTP interactions in modern web development and debugging.

  • MDN Web Docs: HTTP Overview: https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview

  • The TCP/IP Guide: Hypertext Transfer Protocol: http://www.tcpipguide.com/free/t_TCPIPHypertextTransferProtocolHTTP.htm