如何在不使用fetch()的情况下通过纯JavaScript调用REST API？兼容旧浏览器的可行方案咨询

Hey there! Great question—supporting older browsers can be a bit of a puzzle, but you’re already on the right track thinking about XMLHttpRequest (XHR). Let’s break down your options clearly:

XHR is absolutely the best native choice here. It’s been supported in every major browser for decades (even IE7 and above), which makes it the most reliable option for reaching older user bases. Unlike fetch(), which only landed in browsers around 2015, XHR has stood the test of time for REST API calls in legacy environments.

Here’s a quick example of how to use it for common REST operations:

GET Request #

function makeGetRequest(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true); // Third parameter = async (always use true for non-blocking calls)
  
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Success: parse the response (assuming JSON)
      try {
        const data = JSON.parse(xhr.responseText);
        callback(null, data);
      } catch (err) {
        callback(new Error('Failed to parse JSON response'), null);
      }
    } else {
      // HTTP error (e.g., 404, 500)
      callback(new Error(`Request failed with status ${xhr.status}`), null);
    }
  };
  
  xhr.onerror = function() {
    // Network error (e.g., no internet connection)
    callback(new Error('Network error occurred'), null);
  };
  
  xhr.send();
}

// Usage
makeGetRequest('https://api.example.com/data', function(err, data) {
  if (err) {
    console.error('Error:', err);
    return;
  }
  console.log('Data received:', data);
});

POST Request (Sending JSON) #

function makePostRequest(url, payload, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  
  // Set appropriate headers for JSON
  xhr.setRequestHeader('Content-Type', 'application/json');
  
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        const response = JSON.parse(xhr.responseText);
        callback(null, response);
      } catch (err) {
        callback(new Error('Failed to parse JSON response'), null);
      }
    } else {
      callback(new Error(`Request failed with status ${xhr.status}`), null);
    }
  };
  
  xhr.onerror = function() {
    callback(new Error('Network error occurred'), null);
  };
  
  // Stringify the payload before sending
  xhr.send(JSON.stringify(payload));
}

// Usage
const newData = { name: 'Test', value: 123 };
makePostRequest('https://api.example.com/data', newData, function(err, response) {
  if (err) {
    console.error('Error:', err);
    return;
  }
  console.log('Response:', response);
});

Short answer: Not really, if you want pure, dependency-free JavaScript that works across most older browsers.

• ActiveXObject: This was the predecessor to XHR in IE6 and earlier, but it’s extremely outdated and only works on ancient IE versions. Unless you’re supporting IE6 (which is rare these days), there’s no reason to use this over XHR.
• Frame-based requests: You could technically use hidden iframes to make requests, but this is clunky, hard to work with, and not suited for REST APIs (especially for POST/PUT/DELETE operations or handling JSON responses).

For all practical purposes, XHR is the only viable native alternative to fetch() for legacy browsers.

• Handle async properly: Always use asynchronous requests (the third parameter in xhr.open() set to true) to avoid blocking the browser’s main thread.
• Polyfill JSON if needed: If you’re supporting IE7 or earlier, JSON.parse() and JSON.stringify() aren’t natively available. You can add a lightweight polyfill (but keep in mind this adds a small extra file—if you want strictly no external dependencies, you’d have to write your own parser, which is not ideal).
• Check status codes: Don’t just rely on onload—make sure to check the HTTP status code to distinguish between successful responses and errors (like 404 or 500).
• Set request headers: For REST APIs, you’ll often need to set headers like Content-Type: application/json for POST/PUT requests, or Accept: application/json to tell the server you expect JSON in return.

XMLHttpRequest is absolutely the best choice for your use case. It’s well-supported, flexible enough to handle all REST operations, and requires no external libraries. The examples above should give you a solid starting point to build out your API calls for older browsers.

内容的提问来源于stack exchange，提问作者26_Angel David Rivera Herrera