开始通过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;

哪个是该类型的对象document.(参见MDN文档).

要展示代码,您可以

console.log(xhr.responseXML);

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

您可能也希望异步执行此操作(请参阅此内容).该页面有一个更强大的例子.让我们调整它以显示伦敦的温度:

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.