Journey of a Web Request: From Browser to Server and Back

Journey of a Web Request: From Browser to Server and Back

When you type a website address into your browser and press Enter, what actually happens behind the scenes? It’s a complex series of events, involving many different protocols and components. This article will help you understand the Request-Response cycle, from the moment you type a website address to the moment the website appears on your screen.

Main components in the Request-Response cycle

To better understand this process, we need to grasp some important concepts:

• DNS (Domain Name System): Domain name resolution system, which helps convert domain names (eg google.com) into IP addresses (eg 142.250.185.142) that computers can understand.
• TCP/IP (Transmission Control Protocol/Internet Protocol): The underlying protocol suite of the Internet, ensuring that data transmission between devices is performed reliably.
• HTTP/HTTPS (Hypertext Transfer Protocol/HTTP Secure): Application protocol used to transmit data on the web. HTTPS is the secure version of HTTP, using encryption to protect data.
• Headers: The header of an HTTP request or response, containing metadata information such as content type, language, cookies, etc.
• Body: The body of an HTTP request or response, containing the actual data being transmitted (e.g. form data, web page content).
• Status Codes: Numeric status codes returned by the server, indicating the outcome of the request (e.g. 200 OK, 404 Not Found, 500 Internal Server Error).

Detailed Journey of a Web Request

Now, let's follow each step in detail in the Request-Response cycle:

1. DNS Lookup

When you type a website address (for example, example.com) into your browser, your browser performs a DNS query to find the IP address that corresponds to that domain name. This process goes like this:

1. The browser checks the local DNS cache (on your computer).
2. If not found, the browser will send the query to the DNS server configured on the system (usually the DNS server of the Internet service provider - ISP).
3. The ISP's DNS server may have the information in its cache. If not, it will make a recursive query to other DNS servers, starting with the root DNS servers, to find the authoritative name server for the domain example.com.
4. The authoritative name server will return the IP address for example.com.
5. The ISP's DNS server caches this information and returns the IP address to the browser.

You can learn more about DNS in this article .

2. TCP Handshake

Once the browser has the IP address, it establishes a TCP (Transmission Control Protocol) connection with the server. This is called a three-way handshake:

1. SYN (Synchronize): The browser sends a SYN packet to the server, requesting to establish a connection.
2. SYN-ACK (Synchronize-Acknowledge): The server responds with a SYN-ACK packet, accepting the connection request and synchronizing the sequence number.
3. ACK (Acknowledge): The browser sends an ACK packet to acknowledge receipt of the SYN-ACK, and the TCP connection is established.

TCP ensures that data is transmitted reliably, in order, and without loss.

3. HTTP Request Composition

Once the TCP connection is established, the browser creates an HTTP request and sends it to the server. The HTTP request includes:

• Method: HTTP method (eg GET, POST, PUT, DELETE). GET is usually used to retrieve data, POST is used to send data to the server.
• URL: The address of the resource to be accessed.
• Headers: Metadata information about the request, for example:
  • Host : Server domain name.
  • User-Agent : Information about the user's browser and operating system.
  • Accept : The content types the browser can handle (e.g. text/html, application/json).
  • Cookie : Cookie information is sent to the server.
• Body (optional): Data sent to the server (e.g. form data when submitting a form).

Example of an HTTP GET request:

GET /index.html HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

GET /index.html HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

4. Server Processing

When the server receives an HTTP request, it processes the request. The processing may include:

• Check access. You can learn more about authentication and authorization in Microservices architecture .
• Read data from database. You can read more about database scaling .
• Perform calculations.
• Generate HTTP response.

5. HTTP Response

After processing the request, the server will return an HTTP response to the browser. The HTTP response includes:

• Status Code: The status code indicates the result of the request.
• Headers: Metadata information about the response, for example:
  • Content-Type : The content type of the response (e.g. text/html, application/json).
  • Content-Length : Length of the response content.
  • Set-Cookie : Requests the browser to store cookies.
• Body: The data returned to the browser (e.g. HTML web page content, JSON data).

Example of an HTTP response:

HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 1234 <!DOCTYPE html> <html> <head> <title>Example Domain</title> </head> <body> <h1>Example Domain</h1> <p>This is an example web page.</p> </body> </html>

HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 1234 <!DOCTYPE html> <html> <head> <title>Example Domain</title> </head> <body> <h1>Example Domain</h1> <p>This is an example web page.</p> </body> </html>

Common HTTP Status Codes

• 200 OK: Request successful.
• 301 Moved Permanently: The resource has been moved to a new URL.
• 400 Bad Request: Invalid request.
• 401 Unauthorized: Authentication is required to access the resource.
• 403 Forbidden: No permission to access resource.
• 404 Not Found: Resource does not exist.
• 500 Internal Server Error: An error occurred on the server.
• 502 Bad Gateway: The server acting as the gateway or proxy received an invalid response from the upstream server.
• 503 Service Unavailable: The server is currently unable to process the request, usually due to overload or maintenance.

6. Browser Rendering

Finally, the browser receives the HTTP response and displays the content to the user. If the response is HTML, the browser parses the HTML, CSS, and JavaScript to display the web page visually. This process may include loading additional resources (images, CSS, JavaScript) by making additional HTTP requests.

HTTPS: Security in the Request-Response Cycle

HTTPS is the secure version of HTTP, which uses TLS/SSL to encrypt data transmitted between the browser and the server. This helps protect data from being stolen or modified during transmission.

When using HTTPS, the TCP handshake is performed via the TLS handshake, in which the browser and server agree on a common encryption key to encrypt the data.

Summary

The Web Request-Response cycle is a complex but important process that underpins everything on the web. Understanding this process will help you become a better web developer, able to debug and optimize web application performance.