javascript - 开始通过 XMLHttpRequest 调用 API

Question

我刚刚开始学习如何使用 API，但在理解如何使用它们时遇到了一些困难。

感谢一些在线文档，我能够编写以下代码，但我对如何添加到其中有一些疑问:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=London&mode=xml", false); xhr.send(); 
console.log(xhr);

现在，当我在浏览器中运行这段代码并打开控制台时，我会看到一个下拉菜单，下面有一大堆东西。首先，我怎样才能让代码只显示响应？我希望控制台在我运行代码时仅显示要显示的 XML。其次，我如何解析 XML？有没有什么方法可以从 XML 元素中获取值并将其分配给 JavaScript 变量？

谢谢!

Answer 1

您正在打印的是 XMLHttpRequest 对象本身，而您真正想要的是您发出的请求的响应。要获得响应，您可以使用

xhr.responseXML;

这是文档类型的对象。 (参见 MDN docs)。

要展示代码，你可以

console.log(xhr.responseXML);

但要实际处理响应，您可能希望按照 Josh 的建议进行操作，并从 API 请求 JSON 格式的响应(而不是 XML 格式的响应)。

您可能也想异步执行此操作(参见 this )。该页面有一个更强大的示例。让我们对其进行调整以显示伦敦的温度:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=London&mode=json", true);
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
      var response = JSON.parse(xhr.responseText);
      console.log("Temperature(K): " + response.main.temp);
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(null);

异步意味着 xhr.onLoad 函数将在收到响应后立即执行。因此，您的所有代码都将按顺序执行，并且只有在收到响应时才会执行 onLoad。