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

Hey there! I totally get the confusion when building for older browsers—compatibility can feel like navigating a maze. Let’s break down your options clearly, starting with XMLHttpRequest (XHR) and then covering alternatives that might fit your needs better.

首先说说XMLHttpRequest (XHR) #

XHR is actually a rock-solid choice for old browser support. It’s supported in IE6+, plus all early versions of Chrome, Firefox, Safari, and Opera. That’s a huge compatibility net.

The catch? Its API is pretty verbose and callback-heavy. You’ll end up writing a lot of boilerplate code, and nested callbacks can get messy (hello, callback hell). But if you need maximum compatibility without adding extra libraries, it’s a reliable workhorse.

Here’s a quick example of a basic GET request with XHR:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // Do something with the response
    console.log(response);
  }
};
xhr.send();

替代方案 #

If XHR’s verbosity is turning you off, here are other options that play nice with old browsers:

1. jQuery AJAX #

Back in the day, jQuery was the go-to for simplifying AJAX in old browsers. It wraps XHR (and even ActiveXObject for super old IE) into a clean, consistent API. You get shorthand methods like $.get(), $.post(), and the flexible $.ajax()—plus it handles cross-browser quirks so you don’t have to.

It works in IE6+ (with older jQuery versions, like 1.x) and all modern old browsers. The downside is you’ll need to include the jQuery library, but it’s a small tradeoff for cleaner code.

Example of a GET request with jQuery:

$.get('/api/data', function(response) {
  // Do something with the response
  console.log(response);
})
.fail(function(error) {
  // Handle errors
  console.error('Request failed:', error);
});

2. ActiveXObject (for ultra-old IE) #

If you need to support IE5 or earlier (which is extremely rare these days, but maybe your use case requires it), XHR won’t work—you’ll need to use ActiveXObject instead. This is a legacy Microsoft API that predates XHR.

Here’s a quick example:

var xhr;
try {
  xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    // Fallback if neither works (unlikely for IE5+)
    xhr = false;
  }
}

if (xhr) {
  xhr.open('GET', '/api/data', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    }
  };
  xhr.send();
}

Note: Only use this if you absolutely have to support IE5. Most projects don’t need this anymore.

3. Fetch API with Polyfills #

If you prefer writing modern code but still need old browser support, you can use the Fetch API (the modern replacement for XHR) with polyfills. Fetch has a cleaner, promise-based API, but it’s not supported in old browsers like IE11 or early Chrome/Firefox.

To make it work, you’ll need two polyfills:

• A Fetch polyfill to add Fetch support
• A Promise polyfill since old browsers don’t support Promises natively

Once you include those, you can write Fetch code that works in IE11+ and older modern browsers:

fetch('/api/data')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error('Error:', error);
  });

The downside is adding extra polyfill files, which increases your app’s load size—so weigh that against the cleaner code.

我的建议 #

• If you need maximum compatibility (IE6+) and want to avoid extra libraries: Stick with XHR. It’s verbose but reliable.
• If you want simpler code without handling cross-browser quirks: Go with jQuery AJAX (use jQuery 1.x for IE6 support). It’s battle-tested and widely used in legacy projects.
• If you prefer modern syntax and don’t mind adding polyfills: Use Fetch with polyfills (good for IE11+).
• Only use ActiveXObject if you must support IE5 or earlier: It’s a legacy solution that’s rarely needed today.

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