通过XMLHttpRequest调用API入门

我刚开始学习如何使用API，但我在理解如何使用它们时遇到了一些麻烦。通过XMLHttpRequest调用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);

现在，当我在浏览器中运行该代码，我打开控制台，我在下面有一大堆东西的下拉菜单。首先，我怎样才能让代码显示JUST的响应？我想让控制台显示当我运行我的代码时显示的XML。其次，我如何解析XML？有什么办法从XML元素获取值并将其分配给JavaScript变量？

谢谢！

来源

2014-01-23 user2962388

尝试从一开始就使用* A * jax，而不是使用同步请求。 – Bergi

你打印的是XMLHttpRequest对象本身，而你实际需要的是你所做的请求的响应。获得响应，您使用

xhr.responseXML;

这是该类型document的对象。（见MDN docs）。

表现出的代码，你可以

console.log(xhr.responseXML);

但要实际与响应工作，你可能会想要做的乔希认为，从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。

来源

2014-01-23 19:58:37

谢谢！所有的答复都非常有帮助，但这是最有益的。 – user2962388

该下拉列表可能是您的浏览器以交互方式为您设置响应对象格式。

xmlDoc=xhr.responseXML;会给你实际得到的文本

或者：你可以要求一个JSON对象，以便与数据的工作容易得多。

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=London&mode=json", false); xhr.send(); 
var data= JSON.parse(xhr.responseText); //data is now a javascript object full of the API data

请注意现在url如何读取mode=json。

来源

2014-01-23 19:41:14 JoshWillik

您可以将回复作为Document object。

使用上面的代码，您可以参考xhr.responseXML并使用Document documentation来学习如何获取所需的数据。

来源

2014-01-23 19:48:45 Lance

通过XMLHttpRequest调用API入门

回答

相关问题