本机 javascript rest api 调用答案

【问题标题】：native javascript rest api call本机 javascript rest api 调用
【发布时间】：2016-03-16 15:57:54
【问题描述】：

我正在尝试在不使用任何 js 框架的情况下进行 api 调用以在本机 javascript 中获取 spotify 专辑。我遇到了无法使用本机 js 发送 Oauth 令牌的问题。对于 spotify，我有客户端 ID 和客户端密码。我可以使用它或 Oa

(function() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.spotify.com/v1/albums", false);
    xhr.send();
    document.getElementById("results").innerHTML = xhr.responseText;
})();

【问题讨论】：

标签： javascript api rest

【解决方案1】：

function request(callback) {

  var xobj = new XMLHttpRequest();
                 // true parameter denotes asynchronous
  xobj.open('GET', YOUR_URL_HERE, true);
  xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
          // This marks that the response has been successfully retrieved from the server
          // Utilize callback
          callback(xobj.responseText);
        }
  };
  xobj.send(null);
}

我绝对会建议您查看 Frobber 提供的链接。总是更好地理解为什么某事会/没有工作，而不是让它工作。这是一个模拟请求，可以帮助您入门。希望这会有所帮助！

【讨论】：

感谢那个代码块。我遇到的问题是交换我的身份验证详细信息。我知道通过 jquery ajax 调用我们可以发送数据参数。但是如何使用 XMLHttpRequest 实现呢？
我会看看这个问题：stackoverflow.com/questions/21850454/… 您可以设置 .open() 方法的可选第四个和第五个参数（分别是用户和密码）但我已经看到了情况仅此一项是行不通的。他在回答中提供了简洁的答案和有用的文章

【解决方案2】：

我认为您需要阅读有关如何使用XMLHttpRequest的基础教程，您可以find here

您的代码的一个直接问题是它没有使用任何回调来读取从服务器返回的结果。这一切都是异步发生的，所以在您的情况下发生的情况是您正在 send() 发送请求，然后立即将 innerHTML 设置为可能甚至无法从服务器获得的值。

查看教程，了解如何在服务器准备好后从服务器取回该信息。

注意myFunction回调的使用，注意onreadystatechange的使用。这里发生的是send() 在一个单独的执行线程中向服务器发送一些东西。您需要注册一个回调函数，该函数将在服务器报告数据可用时执行数据获取和 DOM 更新，不是立即。

【讨论】：

我想这就是我要找的。我一直在使用框架及其方法，但是当归结为使用原生 JS 时，这就是他们的问题所在。