How to correctly use XMLHttpRequest to send an asynchronous POST request and handle the response

This article explains in detail the root cause of "empty response" in XMLHttpRequest asynchronous requests - reading the responseText directly without waiting for the request to be completed, and provides the correct writing method based on event monitoring. It also compares and recommends a more modern and concise Fetch API implementation solution.

The problem you encountered is very typical: accessing xmlhttp.responseText immediately after xmlhttp.send(), but getting an empty string - this is not a browser bug, but a misunderstanding of the asynchronous execution mechanism . XMLHttpRequest runs asynchronously by default (the third parameter is true). Send() will return immediately after being called, but the server response may arrive after several milliseconds or even hundreds of milliseconds. At this time, responseText has not been assigned a value, so it is naturally empty when it is read forcefully.

And alert() "coincidentally" pauses the execution of the code, giving the network request enough time to complete. Therefore, it seems "effective", but in fact it is an unreliable race trap.

✅ The correct approach is: use the event listener and then operate the DOM after the response is ready . The key is to use the load event (equivalent to readystatechange and readyState === 4 && status === 200):

 function submit_cost_code() {
  const costCode = document.getElementById("cost-code").value;
  const xhr = new XMLHttpRequest();
  const url = 'process-cost-code.php';
  const params = 'cost-code=' encodeURIComponent(costCode); // ✅ Prevent special characters from destroying parameters xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  // ✅ Register the load event handler xhr.addEventListener('load', function() { before send
    if (xhr.status >= 200 && xhr.status  {
    document.getElementById("feedback").innerHTML = "Network request failed, please check the connection";
  });

  xhr.send(params);
}

? Notes:

• Always bind event listeners before send() , otherwise the event may be missed;
• Use encodeURIComponent() to encode parameter values ​​to avoid submission exceptions caused by spaces, &, =, etc.;
• Check xhr.status to ensure that the HTTP status code is normal (such as 200), rather than relying solely on whether responseText is non-empty;
• Add error event monitoring to cover network interruption, cross-domain rejection and other scenarios.

?More recommended: Use modern fetch() API (good compatibility, Chrome 42/Firefox 39/Edge 14):

 function submit_cost_code() {
  const costCode = document.getElementById("cost-code").value;
  const formData = new FormData();
  formData.append('cost-code', costCode);

  fetch('process-cost-code.php', {
    method: 'POST',
    body: formData // ✅ Automatically set Content-Type to multipart/form-data
    // If application/x-www-form-urlencoded is required, use:
    // body: new URLSearchParams(formData).toString()
  })
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.text();
  })
  .then(text => {
    document.getElementById("feedback").innerHTML = text;
  })
  .catch(err => {
    document.getElementById("feedback").innerHTML = 
      `Submission failed: ${err.message}`;
  });
}

? Summary: asynchronous ≠ "automatic wait". Whether using XMLHttpRequest or fetch, the data must be processed through callbacks (events/.then()) after the response is ready. Abandon alert() as a "delay technique" and embrace event-driven or Promise chains in order to write robust and maintainable front-end interaction logic.

The above is the detailed content of How to correctly use XMLHttpRequest to send an asynchronous POST request and handle the response. For more information, please follow other related articles on the PHP Chinese website!