从 JavaScript 中的链接读取数据

很多时候，我们需要从网页中获取数据，进而进行处理和分析。在 JavaScript 中，我们可以通过链接 (也称为 URL) 来获取数据。这种方式被称为 HTTP 请求，我们可以把它想象成是发了一封信给服务端，请求服务端返回一些东西。

发起 HTTP 请求

在 JavaScript 中，发起 HTTP 请求可以使用 XMLHttpRequest 对象或者 fetch 方法。

使用 XMLHttpRequest

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 打开一个 GET 请求，并指定 URL
xhr.open('GET', '/api/data');
// 发送请求
xhr.send();
// 监听请求状态变化
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    // 处理响应数据
    console.log(xhr.responseText);
  }
};

在 XMLHttpRequest 对象上定义了一个 onreadystatechange 事件，当 readyState 的值发生变化时，会触发此事件。当 readyState 的值为 XMLHttpRequest.DONE 时，说明请求已经完成，可以处理响应数据了。

使用 fetch

fetch('/api/data')
  .then(response => response.text())
  .then(data => {
    // 处理响应数据
    console.log(data);
  });

使用 fetch 方法可以更简单、更直观地发起 HTTP 请求。fetch 方法返回一个 Promise 对象，我们可以使用 .then() 接口来处理响应数据。

解析响应数据

在成功发起了 HTTP 请求之后，我们需要解析响应数据，得到我们想要的数据。

解析 JSON 数据

通常，我们在使用 HTTP 请求获取数据时，返回的是 JSON 格式的数据。下面是一个将 JSON 数据解析为 JavaScript 对象的示例代码：

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    // 处理响应数据
    console.log(data);
  });

在此示例中，我们使用了 response.json() 方法来将响应数据解析为 JSON 对象。

解析 XML 数据

除了 JSON 数据，有时候我们也需要解析 XML 格式的数据。下面是一个将 XML 数据解析为 JavaScript 对象的示例代码：

fetch('/api/data')
  .then(response => response.text())
  .then(data => {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(data, 'text/xml');
    const nodes = xmlDoc.getElementsByTagName('node');
    // 处理响应数据
    console.log(nodes);
  });

在此示例中，我们使用了 DOMParser 对象来将 XML 数据解析为 DOM 对象，并通过 getElementsByTagName 方法来获取指定元素的集合。

错误处理

在发起 HTTP 请求时，可能会出现一些错误，例如网络问题、服务端异常等。下面是一个处理 HTTP 请求错误的示例代码：

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.text();
  })
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理请求错误
    console.error(error);
  });

在此示例中，当 HTTP 响应码不为 200 时，我们抛出一个错误。并使用 .catch() 接口来处理请求错误。