Web and HTTP

What is a Web Page?

A web page consists of objects (HTML files, images, audio, etc.).

A base HTML file links to these objects, all of which are accessible via
URLs (e.g., www.example.com/image.jpg ).

What is HTTP?

HTTP stands for Hypertext Transfer Protocol, which governs

communication between a client (e.g., your browser) and a server (e.g.,
a website's backend).

It's part of the Application Layer in networking.

HTTP overview
HTTP: hypertext transfer protocol

Client: A browser (like Firefox, Safari) that requests, receives, and displays
web objects.

Server: A web server (like Apache) that sends web objects when
requested.

Steps:
1. The client creates a connection to the server.

2. HTTP messages are exchanged (requests from the client, responses from
the server).

3. The connection is closed (in some cases).

Using TCP for HTTP Communication

TCP (Transmission Control Protocol) is a method used by HTTP to send
data between your browser (client) and the web server.

TCP Connection: This is like a phone call between your browser and the
web server, where they exchange information.

Web and HTTP 1

 Step-by-Step Process
1. Client Initiates TCP Connection:

Your browser (client) starts a connection to the web server. This is like
picking up the phone and calling the server.

The browser connects to the server using port 80, which is the
standard port for HTTP.

2. Server Accepts the Connection:

The web server is waiting for incoming connections on port 80.

Once the server receives the connection request, it accepts the call,
and the connection is established.

3. HTTP Messages Exchanged:

Once the TCP connection is established, HTTP messages are

exchanged:

Request message: The browser asks the server for specific content
(like a web page).

Response message: The server sends the content (e.g., an HTML

file, image).

These messages happen over the established TCP connection.

4. Closing the Connection:

After the messages have been exchanged, the TCP connection is

closed.

This is like hanging up the phone call after the conversation is finished.

Statelessness of HTTP
Stateless: HTTP doesn’t remember previous interactions.

Example: If you refresh a page, the server treats it as a brand-new

request.

Why?

It simplifies the protocol.

Maintaining state (history) increases complexity and potential for errors.

Web and HTTP 2

 HTTP Connections
1. Non-persistent HTTP:

Only one object is sent per TCP connection.

Multiple objects (e.g., images) require multiple connections.

Slower: requires 2 RTTs (Round-Trip Times) per object (time for a

packet to travel to the server and back).

2. Persistent HTTP:

The connection stays open, allowing multiple objects to be sent over

the same connection.

Faster: requires only 1 RTT for all objects.

Non-persistent HTTP: Response Time

1. RTT (Round-Trip Time):

RTT is the time it takes for a small packet of data to travel from your
browser (client) to the web server and back.

Web and HTTP 3

 It's like the time it takes for a letter to be sent to someone and for them
to send a reply.

2. Non-persistent HTTP Response Time:

When using non-persistent HTTP (which is the old method), a new

TCP connection is made for each object (like a file or image) on the
web page.

Steps to get an object (file):

1. First RTT: To start the connection, a packet travels from the client to
the server and back.

2. Second RTT: The client sends the request for the object, and the
server sends the first few bytes of the response (another RTT).

3. File transmission: The time it takes to actually send the file (like
downloading it).

Total Time:

The response time for non-persistent HTTP is:

2 RTT (for the connection and request) + the time it takes to

transmit the file.

Non-persistent HTTP Issues

2 RTT per object: For each file (like a picture or HTML file), 2 RTTs are
needed (one to establish the connection and one for the request/response).

Overhead: Creating a new TCP connection every time takes up extra

resources and time.

Parallel Connections: Browsers sometimes open multiple TCP connections

to get several objects at once, which can slow down performance.

Persistent HTTP: Improved Performance

What is Persistent HTTP?:

With persistent HTTP, the connection stays open after the first
response.

This means that multiple HTTP requests and responses can happen
over the same TCP connection without needing to open a new one

Web and HTTP 4

 each time.

How it works:

After the first object is fetched, the server keeps the connection open.

The client can send more requests as soon as it finds new objects to
load (like images or scripts) without waiting for new connections.

Advantage:

Only 1 RTT for all objects: Once the connection is open, all objects on
the page can be fetched with just 1 RTT (instead of 2 RTTs for each
object like in non-persistent HTTP).

This reduces the delay and improves loading speed for web pages.

HTTP Request Message

Contains:

1. Request line (method, URL, HTTP version):

Example:
GET /index.html HTTP/1.1

2. Header lines (details about the request):

Example:
Host: www.example.com

3. (Optional) Body: Contains data (e.g., form submissions).

Common Methods:
GET: Retrieve a resource.

POST: Send data to the server (e.g., form input).

HEAD: Retrieve metadata only, without the actual content.

PUT: Upload files.

DELETE: Remove files.

Uploading Form Input

When you submit a form on a website, there are two main ways the data is sent
to the server:

Web and HTTP 5

 1. POST Method:

What it is: The POST method is used when you submit data (like a form
input) to a server.

Where the data goes: The form data is included in the body of the
HTTP request (called the entity body).

Example: If you fill out a contact form and click submit, your information
is sent in the body of the request.

2. GET Method (URL method):

What it is: The GET method is used when you send data via the URL.

Where the data goes: The data is attached directly to the URL of the
request. For example:

www.somesite.com/animalsearch?monkeys&banana

Here, monkeys and banana are sent as part of the URL, and they are
considered query parameters.

Note: GET is typically used for searches or simple data retrieval, and
the data is visible in the URL.

Types of HTTP Methods

There are different HTTP methods (commands) that define how data is
exchanged between the client (you) and the server:

HTTP/1.0 Methods:
1. GET:

What it is: Used to retrieve data from the server (e.g., a webpage or
file).

Where it's used: When you load a webpage or image.

2. POST:

What it is: Used to send data to the server, often for forms or
submitting information.

3. HEAD:

Web and HTTP 6

 What it is: Similar to GET, but it only asks the server for metadata about
the requested resource, without downloading the resource itself.

HTTP/1.1 Methods:
In addition to the methods in HTTP/1.0, HTTP/1.1 introduces:

1. PUT:

What it is: Used to upload a file or data to the server. The file is
included in the request body and sent to the path specified in the URL.

2. DELETE:

What it is: Used to delete a file or resource specified in the URL.

Key Differences:
POST vs GET:

POST sends data in the body of the request, so it is more secure and
allows for larger amounts of data (like form submissions).

GET sends data in the URL, which is visible to everyone and is typically
used for retrieving information (like searches).

PUT and DELETE are used for modifying or removing resources on the
server, respectively.

HTTP Response Message

Contains:

1. Status line:
Example:
HTTP/1.1 200 OK

2. Headers: Additional information about the response.

3. Data: The requested content (e.g., HTML, images).

Common Status Codes:

200 OK: request succeeded, requested object later in this msg

301 Moved Permanently: requested object moved, new location specified

later in this msg

Web and HTTP 7

 400 Bad Request : request msg not understood by server

404 Not Found: requested document not found on this server

505 HTTP Version Not Supported: Server doesn’t support the request's
HTTP version.

Cookies: Keeping Track of Users

What are cookies?

Small pieces of data stored by your browser, used to track your session
state.

Four components:

1. Cookie in the server's response.

2. Cookie in the next client request.

3. A cookie file stored on your device.

4. A database entry on the server.

What Cookies Can Be Used For:

1. Authorization:

What it means: Cookies are used to keep you logged in to websites.

For example, after logging into your email or social media, cookies
remember that you're logged in, so you don't have to log in every time.

2. Shopping Carts:

What it means: When you add items to your online shopping cart,
cookies can remember what you’ve added even if you leave the site
and come back later.

3. Recommendations:

What it means: Websites like Amazon or YouTube use cookies to track

your behavior and recommend products or videos based on what
you’ve previously looked at or purchased.

4. User Session State:

What it means: Cookies are used to keep track of your session on a

website. For example, when you check your email, cookies help the

Web and HTTP 8

 website remember that you're viewing your inbox, not starting a new
session every time.

Cookies and Privacy:

How cookies impact privacy:

Cookies can store a lot of information about you, such as your name,
email address, and online activity.

Websites use this information to provide a personalized experience,

but it also means that websites can track your actions across different
sessions or websites.

Important to note: Some people are concerned about cookies because

they allow websites to track their behavior and create a profile of their
activities.

How Cookies Help Keep “State”:

State: This refers to the current status or information about what you’re
doing on a website.

How cookies help: Normally, HTTP (the protocol websites use) is stateless,
meaning it doesn’t remember anything from one request to the next.
Cookies allow websites to remember things across different visits (e.g.,
keeping you logged in or remembering your shopping cart items).

Other ways to keep state: Websites can also use other methods like
session variables or database entries to remember your state during
interactions.

Web Caching
What is caching?

A proxy server stores frequently accessed web objects to reduce load

on the origin server.

Benefits:
1. Faster response for clients.

2. Reduced bandwidth usage on the internet.

Web and HTTP 9

 3. Saves costs for the institution (e.g., universities, ISPs).

Types of Cache Scenarios:

1. No Cache: Every request goes to the origin server → Slow, costly.

2. Local Cache: Common requests are served from the cache → Faster and
cheaper.

What is a Web Cache (Proxy Server)?

A web cache is a server or device that stores copies of frequently requested
web content (like web pages, images, or files). It acts as a middleman between
your browser and the original website.

How Web Caches Work:

1. Browser Sends Request:

When you try to access a website, your browser sends the request to
the web cache instead of the original server.

2. Cache Checks for Object:

If the requested object (e.g., a web page or image) is already in the

cache, the cache sends it back to you without contacting the original
server.

If the object isn’t in the cache, the cache fetches it from the original
server, saves a copy, and sends it to your browser.

Key Goal of Web Caching:

To satisfy user requests as much as possible without involving the original
server. This speeds up loading times and reduces traffic to the original server.

Why Web Caching is Useful:

1. Faster Response Times:

The cache is usually closer to the user than the original server, so
fetching content is much faster.

2. Reduces Internet Traffic:

Web and HTTP 10

 If multiple users request the same content, the cache serves it without
asking the original server each time. This reduces the strain on the
network and the original server.

3. Supports Smaller Content Providers:

Caches help smaller websites deliver content faster because cached

content is distributed closer to users.

How Caches Act:

As a Client: When the cache doesn’t have the requested object, it acts as a
client and fetches it from the original server.

As a Server: When the cache has the requested object, it acts as a server
and sends the content directly to the user.

Where are Web Caches Found?

Internet Service Providers (ISPs):

Universities, companies, and residential ISPs often use caches to

manage bandwidth and speed up access for users.

Browsers:

Even your browser has a small cache to store recently visited content
for quicker access.

Conditional GET: What is it and Why it’s Useful?

A Conditional GET is a method used in web caching to check if the content
stored in the cache is still up-to-date. The goal is to avoid downloading the
same content again if it hasn’t changed, which saves time and bandwidth.

How Conditional GET Works:

1. Cache Sends a Request:

The cache includes the date of the stored version in the HTTP request
using the If-Modified-Since header.

Example: If-Modified-Since: <date>

2. Server Checks the Date:

Web and HTTP 11

 The server compares the date in the request with the last modification
date of the content.

3. Server Responds:

If the cached content is still valid:

The server replies with HTTP/1.0 304 Not Modified (No new content
sent).

The cache can continue using its stored version.

If the content has changed:

The server sends the updated version.

Why Use Conditional GET?

Saves Time: No need to re-download the object if it hasn’t changed.

Reduces Network Traffic: Prevents unnecessary data transfer.

Efficient Use of Resources: Helps optimize bandwidth usage and server

workload.

Key Terms to Remember:

Cache: A temporary storage for web content.

If-Modified-Since: An HTTP header used to tell the server when the cache
last received the content.

HTTP/1.0 304 Not Modified: A response indicating that the cached content
is still up-to-date, so no new data is sent.

Benefits of Conditional GET:

Faster Response: No transmission delay if content hasn’t changed.

Efficient Bandwidth Usage: Saves link capacity by avoiding redundant data

transfers.

Quick Example:
1. Cache: "I have this page stored from Oct 1. Has it changed since then?"

Header: If-Modified-Since: Oct 1, 2024

Web and HTTP 12

 2. Server Response:

If unchanged: HTTP/1.0 304 Not Modified (No data sent).

If updated: Sends the new version.

Key Takeaways
1. HTTP is stateless, meaning each request is independent.

2. Persistent connections make web browsing faster by reducing the number

of TCP connections.

3. Cookies help maintain user sessions and personalization.

4. Web caching improves efficiency by serving frequently accessed data

locally.

5. Conditional GET avoids unnecessary data transfers, saving bandwidth and

time.

Web and HTTP 13