网络技术问题 | JavaScript 课程测验 2 |问题2

问题描述

在编写 JavaScript 代码时，有时需要进行网络请求，常见的方式是使用 XMLHttpRequest 对象。在使用 XMLHttpRequest 时，如何判断请求是否成功并获取返回的数据？

请编写一个函数 loadData，该函数接受一个参数 url，表示要请求的地址。函数应该使用 XMLHttpRequest 对象发起 GET 请求，并在请求成功时返回获取到的数据；在请求失败时返回 null。请在下方的输入框中编写函数 loadData 的代码。

解决方案

我们可以使用 XMLHttpRequest 的 onreadystatechange 属性来监听请求的状态变化，通过判断 readyState 和 status 属性的值来确定请求是否成功，并获取返回的数据。

具体来说，当 readyState 的值为 4 时，表示请求已完成，即请求成功或失败。此时，我们还需要检查 status 属性的值，如果为 200，则表示请求成功并返回了数据；否则表示请求失败。

在请求成功时，我们可以通过 responseText 属性获取返回的数据，在请求失败时我们可以返回 null。

下面是我们的代码实现：

function loadData(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        const responseText = xhr.responseText;
        return responseText;
      } else {
        return null;
      }
    }
  };
  xhr.send();
}

在上述代码中，我们创建了一个 XMLHttpRequest 对象，并通过 open 方法指定了请求的方法和地址。然后，我们使用 onreadystatechange 属性监听请求的状态变化，在请求完成时，根据 status 值来判断请求是否成功，并获取返回的数据。

最后，我们通过 send 方法发送请求，并在函数的末尾返回获取到的数据（如果请求成功），否则返回 null。

请注意，在使用 XMLHttpRequest 对象时，如果请求跨域，则需要配置相应的 CORS 头信息，具体请参考文档：MDN Web Docs - Same-origin policy。

参考资料

• MDN Web Docs - XMLHttpRequest