How can a client understand that data has been sent from the server to the browser?

The client browser understands that data from the server has been sent based on the following signs:

1. HTTP status code: Receiving a response with a successful HTTP status (e.g., 200 OK).
2. HTTP headers: Presence and analysis of headers like Content-Length (indicating the size of the response body) or Transfer-Encoding: chunked (for streaming data).
3. Response body: Receiving the HTTP response body containing the requested data (HTML, JSON, images, etc.).
4. DOM events: In the case of AJAX requests (using XMLHttpRequest or Fetch API), triggering the corresponding events (onload, onreadystatechange with readyState == 4 and status == 200).
5. Network connection state: Closing the TCP connection after receiving all data (if persistent connection is not used).

Example of using XMLHttpRequest:

// Example of handling data retrieval in JavaScript
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);

xhr.onload = function() {
  if (xhr.status === 200) {
    // Data successfully received and processed
    console.log('Data received:', xhr.responseText);
  } else {
    // An error occurred
    console.error('Error receiving data:', xhr.statusText);
  }
};

xhr.onerror = function() {
  // Network error
  console.error('Network error');
};

xhr.send();