Firefox 67.0.2中XMLHttpRequest onreadystatechange回调失效求助

Hey Luca, let's break down why your async monitoring channel works in Firefox 33.1 but fails in 67.0.2—here's a step-by-step troubleshooting guide with fixes tied directly to your code:

Key Issues to Check & Fix #

1. Callback Binding Timing is Wrong #

This is almost certainly the biggest culprit. In your code, you're calling send() before assigning the onreadystatechange callback. Older browsers might have been slow enough that the callback still caught up, but modern Firefox processes requests much faster—by the time you bind the callback, the XHR state may have already changed (or the request completed entirely), so your function never triggers.

Fix: Move the callback assignment before the send() call:

// Hook the callback FIRST
Communication_asynchChannel.onreadystatechange = Communication_receiveAsync;
// Then send the request
Communication_asynchChannel.send("CMD_TYPE=1&PARAMETER1=" + navigator.appCodeName + "_" + (new Date()).getMinutes());

2. Invalid Request Parameter Format #

Your send payload has an unnecessary | character: "CMD_TYPE=1|&PARAMETER1=...". The correct separator between parameters is just &—the stray | will cause server-side parsing errors, which might lead to no response being sent back (or an invalid response), so your callback never fires.

3. MIME Type & Accept Header Mismatch #

You're setting Accept: text/html but overriding the response MIME type to text/plain with overrideMimeType("text/plain"). Modern Firefox enforces stricter handling of content type mismatches, which could prevent the response from being parsed correctly and stop state change events from triggering.

Fix: Align these values—either set Accept: text/plain or remove the overrideMimeType call if the server is actually returning HTML content.

4. Outdated XHR Event Handling #

onreadystatechange is an older API; modern browsers (including Firefox 67+) prefer more specific, reliable events like onload, onerror, and ontimeout. These make debugging easier and avoid edge cases with state change detection.

Example Swap:

// Replace onreadystatechange with more modern events
Communication_asynchChannel.onload = function() {
  if (this.status >= 200 && this.status < 300) {
    console.log(this.responseText);
  } else {
    console.error("Request failed with status:", this.status);
  }
};

Communication_asynchChannel.onerror = function() {
  console.error("Network error occurred");
};

5. Timeout & Connection Persistence #

Setting timeout = 0 is intended to mean "no timeout," but some modern browser versions have adjusted how they handle this for long-lived monitoring connections. If the connection is being dropped silently without triggering an error, your callback won't run.

Check: Test with a reasonable timeout value (e.g., 30000 for 30 seconds) or remove the timeout assignment entirely if you rely on a persistent connection.

6. Browser Dev Tools Debugging #

Use Firefox's DevTools (F12) to diagnose the issue in real time:

• Go to the Network tab: Verify if the update.html request is being sent, check its status code (200 = success, 4xx/5xx = server error), and confirm a valid response is being returned.
• Go to the Console tab: Look for JavaScript errors, CORS warnings, or content type-related issues that might be blocking the callback.

Quick Validation Steps #

1. Fix the callback timing and parameter format first—these are the most impactful and likely fixes.
2. Test the request directly in the browser (or use the Network tab's "Replay" feature) to confirm the server returns a valid response.
3. Check if your server has new CORS restrictions that might block the request in newer Firefox versions (older browsers had looser CORS enforcement).

内容的提问来源于stack exchange，提问作者LucaMt