Understanding the Entire HTTP Request Process to the Backend

1. Client Initiates Request

1.1 User Action

• The user enters a URL in the browser or clicks a link, triggering an HTTP request.
• If it is a form submission or AJAX request, JavaScript constructs the request using <span>XMLHttpRequest</span> or <span>fetch</span> API.

1.2 Browser Constructs Request

• The browser parses the URL to extract the protocol (HTTP/HTTPS), domain name, port, and path.
• Based on the request type (GET, POST, PUT, etc.), the browser constructs the HTTP request headers, including:
• Host: The domain name of the target server.
• User-Agent: Browser identification.
• Accept: Acceptable response types (e.g., <span>application/json</span>).
• Content-Type (for POST/PUT requests): The format of the request body (e.g., <span>application/json</span> or <span>application/x-www-form-urlencoded</span>).
• Cookie: User session information stored in the browser.
• If it is an HTTPS request, the browser encrypts the request data using the SSL/TLS protocol.

1.3 Sending the Request

• The browser sends the request to the target server’s IP address and port (default HTTP is 80, HTTPS is 443) using the TCP/IP protocol.
• If the target server supports HTTP/2 or HTTP/3, the browser will use these more efficient protocols.

2. Network Transmission

2.1 DNS Resolution

• The browser resolves the domain name to an IP address using DNS (Domain Name System). If the IP address of the domain is not in the local cache or router cache, it queries the DNS server.
• The DNS server returns the IP address of the target server.

2.2 TCP Connection

• The browser establishes a connection to the target server using the TCP protocol. This includes the TCP three-way handshake process:

1. The browser sends a <span>SYN</span> packet.
2. The server responds with a <span>SYN-ACK</span> packet.
3. The browser sends an <span>ACK</span> packet, completing the connection establishment.

2.3 Data Transmission

• The browser encapsulates the HTTP request in a TCP packet and sends it to the server.
• If it is an HTTPS request, the data is encrypted using SSL/TLS before transmission.

3. Server-Side Processing

3.1 Web Server Receives Request

• The server’s web server (such as Nginx, Apache, or built-in server) receives the HTTP request.
• The web server parses the request headers and body to extract key information (such as request path, parameters, request method, etc.).

3.2 Routing Dispatch

• The web server forwards the request to the backend application server (such as Tomcat, Node.js, Django, etc.) based on the configured routing rules.
• If a reverse proxy (such as Nginx) is used, the request may go through load balancing and caching processing.

3.3 Application Server Processing

• The application server (such as Spring Boot, Express.js, etc.) receives the request and processes it based on routing and controller logic.
• The controller methods are called to execute business logic:
• Query the database.
• Call other services (e.g., remote calls in a microservices architecture).
• Process request parameters and request body.

3.4 Database Interaction (Optional)

• If needed, the backend application sends queries or update operations to the database:
• Use SQL to query the database.
• The database returns the query results or confirms the update operation.

3.5 Constructing Response

• The backend application constructs the HTTP response based on business logic:
• Set the response status code (e.g., 200, 404, 500, etc.).
• Set response headers (e.g., <span>Content-Type</span>, <span>Set-Cookie</span>, etc.).
• Construct the response body (e.g., JSON data, HTML page, etc.).

4. Returning Response

4.1 Application Server Sends Response

• The application server sends the constructed HTTP response back to the web server.

4.2 Web Server Forwards Response

• The web server forwards the response back to the client browser.

4.3 Network Transmission

• The response is sent back to the client via TCP packets.
• If it is HTTPS, the response data is encrypted using SSL/TLS before transmission.

4.4 Browser Receives Response

• The browser receives the HTTP response and parses the response headers and body.
• Based on the content type of the response (e.g., HTML, JSON, image, etc.), it processes accordingly:
• If it is HTML, the browser renders the page.
• If it is JSON or another data format, the browser processes the data using JavaScript.

5. Browser Renders Page

• If the response is HTML, the browser parses the HTML document and constructs the DOM tree.
• The browser loads and parses CSS and JavaScript files, completing the page rendering.
• If there are images or other resources on the page, the browser initiates additional HTTP requests to load those resources.

6. Closing Connection

• Once the response is complete, the TCP connection is closed based on configuration (HTTP/1.1 keeps connections alive by default, HTTP/1.0 closes connections by default).
• If HTTP/2 or HTTP/3 is used, the connection may be kept longer for reuse.

Summary

An HTTP request involves multiple layers of interaction, from client initiation to backend server processing and response return, including the client browser, network transmission, web server, application server, and database. The entire process is as follows:

1. Client: User action → Browser constructs request → Sends request.
2. Network Transmission: DNS resolution → TCP connection → Data transmission.
3. Server Side: Web server receives request → Routing dispatch → Application server processing → Database interaction → Constructing response.
4. Returning Response: Application server sends response → Web server forwards response → Browser receives response → Renders page.
5. Closing Connection: TCP connection closes or remains alive.

This process showcases the complexity of modern web applications and the close collaboration between various components.