Scripting Week 8 Notes

Topics Covered

• How does HTTP work?

• Importance of HTTP

• HTTP v.s. HTTPS

• Evolution of HTTP

• HTTP Methods

• HTTP Status Codes

• HTTP Headers

• Web Protocols

Introduction to HTTP

What is it?

• HTTP (HyperText Transfer Protocol) is the core protocol used for communication on the web.

• Developed by Tim Berners-Lee in 1989.

• Operates using a request-response model:

  • Client (browser) sends a request.

  • Server processes the request and responds with data.

• Stateless protocol: Each request is independent; the server does not remember previous interactions.

• Example: Entering a website URL in a browser initiates an HTTP request to fetch the page.

Function/Purpose:

• Application-layer protocol used for transmitting hypertext requests (aka hypermedia documents like HTML) & information on the internet

• Designed for communication b/w web browsers & web servers

  • But also used for other purposes

• Follows classical client-server model (aka request-response protocol)…

  • Client opens a connection to make a request & waits to receive a response

• HTTP is a stateless protocol meaning that the server doesn’t keep any data (state) b/w two requests

• Operates as a request-response protocol b/w a client & server

  • Example: web browser ——> request a page (client) —> web server responds by loading the page

How Does HTTP work?

Request-Response Cycle:

1. The client sends a request using an HTTP method (e.g., GET or POST).

2. The server processes the request and sends a response.

3. The response includes:

   • Status code (e.g., 200 OK or 404 Not Found)

   • Headers (metadata about the response)

   • Content (HTML, JSON, etc.)

Example 1:

• GET Request (Requesting a webpage): Like ordering a coffee at a shop.

• POST Request (Submitting a form): Like placing a custom order via an app.

Example 2 (Full Scenario):

Once upon a chilly morning in Canada, Roger ventured out to get his much-needed coffee from Tim Hortons. There were two ways Roger could get his hands on that steaming cup of joy: by walking into the Tim Hortons and ordering in person or by using the Tim's app on his smartphone.

Ordering In Person: The GET Request

Roger decided first to try the traditional way – walking directly into Tim Hortons. Upon entering, he approached the counter and simply asked, "May I have a medium double-double, please?" This is much like a GET request in the world of HTTP – straightforward and to the point, asking the server (in this case, the barista) for some specific piece of content (the coffee).

With a smile, the barista nodded, turned around to prepare the coffee, and soon handed Roger his medium double-double. This action resembles the server's response in HTTP, where the barista (server) processes the request and responds with the status (a nod and a smile, indicating success), headers (the cup, lid, and a sleeve indicating it's hot), and the requested content (the double-double itself).

Ordering Through the Tim's App: The POST Request

The next day, intrigued by technology and craving another double-double, Roger decided to use the Tim's app. Using the app, he had to provide more details: selecting the size of the coffee, the amount of cream and sugar, and the location for pickup. This process is akin to a POST request in HTTP, where more data is sent to the server (the Tim Hortons app) to create or update a resource (Roger’s specific coffee order).

Upon arrival at Tim Hortons, Roger announced his name, and the barista presented the coffee, which was prepared just as requested. Here, the barista's response resembles the HTTP response to a POST request. The status is conveyed through the readiness of the order (success!), the headers could be seen as the labelling on the cup with Roger's name and order details, and the content, of course, is the perfectly tailored double-double, ready to energize Roger's morning.

The Importance of HTTP

• Enables data exchange and communication across the internet.

• Supports web applications and dynamic content.

• Continuously evolving to meet security and performance needs.

HTTP v.s. HTTPS

HTTPS

• Secure version of HTTP

• Incorporates SSL/TLS to encrypt data

• Essential for protecting sensitive data & building trust

Example: On a cold morning, Roger finds himself on another crisp Canadian morning craving his beloved Tim Hortons coffee. This day, however, brings a new twist to his routine, illustrating the difference between HTTP and HTTPS with two unique coffee-picking adventures.

Adventure 1: The HTTP Coffee Run

Roger decides to place his coffee order by simply shouting it across a crowded Tim Hortons, hoping the barista hears him correctly among the din of other customers. This method is much like HTTP - it’s straightforward but not particularly secure. Anyone in the cafe could overhear Roger's order and name, much like how data sent over HTTP can be intercepted by anyone who might be listening in on the network.

The barista nods, prepares the coffee, and places it on the counter with a shout, "Roger's medium double-double!" While Roger does receive his coffee, the lack of privacy in the transaction is akin to the vulnerabilities in HTTP, where data is not encrypted, and information can be easily exposed.

Adventure 2: The HTTPS Coffee Encounter

The next day, Roger opts for a more secure way to order his coffee. He writes his order on a piece of paper, seals it in an envelope, and hands it directly to the barista. This is similar to HTTPS, where the 'S' stands for 'Secure'. It's like adding a layer of encryption to the order. Only Roger and the barista, who open the envelope, know what's inside, ensuring the order is private and secure.

The barista carefully prepares the coffee, places it in a secure container with Roger's name encrypted on it (visible only to Roger and the barista), and hands it over discreetly. This secure exchange mirrors HTTPS, where data is encrypted, and the communication between client and server (Roger and the barista) is protected against eavesdropping or tampering.

The Evolution of HTTP

Summary

In-Depth Breakdown

HTTP/1.0

• Connection Handling: Each request from a client to a server requires a separate TCP connection.

  • For each resource (like an HTML file, an image, or a CSS file), a new connection is opened and closed after the transaction completes.

• Limitations: The need to establish a new connection for each request adds significant overhead.

  • Slows down the web page loading process due to the time it takes to perform the TCP handshake repeatedly.

HTTP/1.1

• Persistent Connections: Introduced the concept of persistent connections.

  • Allows multiple requests and responses to be sent over a single TCP connection.

  • Reduces the overhead of opening new connections.

• Pipelining (In Theory): Added the possibility of pipelining requests.

  • A client could send multiple requests without waiting for each response, intending to improve efficiency.

  • However, in practice, pipelining had limited support and issues with head-of-line blocking.

• Connection Reuse: Improved performance by reusing connections for multiple requests.

  • Significantly reduces the time needed to load resources.

HTTP/2

• Multiplexing: Allows multiple requests and responses to be in flight at the same time over a single TCP connection.

  • Addresses the head-of-line blocking problem of HTTP/1.x.

  • Enables the server to respond to requests as soon as the data is available, not necessarily in the order requested.

• Server Push: Enables servers to send resources proactively to the client before they are explicitly requested.

  • Potentially improves page load times.

• Header Compression: Reduces overhead by compressing header metadata.

  • Makes web communications more efficient.

HTTP/3

• QUIC Protocol: Moves from TCP to QUIC, a transport layer network protocol based on UDP (User Datagram Protocol).

  • QUIC incorporates features of TCP, TLS (for security), and parts of HTTP/2's application layer.

• Reduced Connection Establishment Time: QUIC reduces the time to establish a secure connection.

  • Combines what would be multiple handshakes in TCP and TLS into a single process.

• Improved Performance over Lossy Connections: Handles packet loss more efficiently than TCP.

  • Reduces the impact on performance, especially beneficial in mobile networks and for users with spotty connections.

Anatomy of a URL

http://www.example.com:80/index.html?search=web#content

• Scheme/Protocol: http

• Hostname: www.example.com

• Port: 80 (default for HTTP, 443 for HTTPS)

• Path: /index.html

• Query: ?search=web (extra data sent to the server)

• Fragment: #content (internal page reference, not sent to server)

Components of a URL:

• Scheme/Protocol: Defines the protocol used to access the resource (e.g., http, https).

• Hostname: The domain name of the web server (e.g., www.example.com).

• Port: The network port used for the connection (default is 80 for HTTP and 443 for HTTPS).

• Path: Specifies the specific resource on the server (e.g., /index.html).

• Query: Contains additional parameters passed to the server (e.g., ?search=web).

• Fragment: Refers to a specific section within a webpage, used for internal navigation (e.g., #content).

HTTP Methods

HTTP Status Codes

HTTP Headers

Headers provide metadata about the request/response.

• Request Headers: Sent by the client (e.g., browser type, language preference).

• Response Headers: Sent by the server (e.g., content type, caching policies).

Other Web Protocols

JavaScript: Truthy & Falsy Values

• Falsy values: false, 0, "" (empty string), null, undefined, NaN

• Truthy values: Anything not in the falsy list.

• Used in conditionals (if statements).

Example:

if ("hello") console.log("Truthy"); // Output: Truthy
if ("") console.log("Falsy"); // No output

Common Pitfalls

• 0 and "" (empty string) are falsy but may be valid inputs.

• Solution: Use explicit comparisons (value !== "").

JavaScript: Type Conversion (Coercion)

• Explicit Conversion: Using functions like Number(), String(), Boolean().

• Implicit Conversion: JavaScript automatically converts types.

Example:

console.log("5" - 2);  // Output: 3 (string "5" converted to number)
console.log("5" + 2);  // Output: "52" (number 2 converted to string)

JavaScript: Equality Operators

Example:

console.log(5 == "5");  // Output: true (coerced comparison)
console.log(5 === "5"); // Output: false (different types)

JavaScript: Destructing

• Extract values from arrays/objects easily.

Example:

const [a, b] = [1, 2];
console.log(a, b); // Output: 1 2

const {name, age} = {name: "Alice", age: 25};
console.log(name, age); // Output: Alice 25

JavaScript: Spread Operator

• Expands arrays/objects, merges, or clones data.

Example:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // Merging
console.log(arr2); // Output: [1, 2, 3, 4, 5]