如何发送带有头部参数的HTTP请求？

Question

我对JavaScript和Web编程一般非常陌生，需要一些帮助。我有一个需要通过JavaScript发送HTTP请求的需求，并需要将输出存储在变量中。我尝试仅使用调用URL：

https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015

但是它返回了一个认证错误，因为我没有发送我的API密钥，并且它没有在URL中显示如何发送API密钥。 API密钥被列为标头而不是参数，我不确定该怎么做。 我尝试使用XMLHttpRequest()类，但我不太确定它的确切作用，也无法使其工作。

实际的HTTP请求

GET https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015 HTTP/1.1
Host: api.fantasydata.net
Ocp-Apim-Subscription-Key: ••••••••••••••••••••••••••••••••

我只需要弄清楚如何在javascript中将请求与密钥一起发送，以及如何将返回的JSON文档存储为变量。

编辑：到目前为止，我有以下内容：

function testingAPI(){
var key = "8a1c6a354c884c658ff29a8636fd7c18";
httpGet("https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015",key    );
alert(xmlHttp.responseText);
var x = 0;
}

function httpGet(theUrl,key)
{
var xmlHttp = new XMLHttpRequest();

xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
xmlHttp.setRequestHeader("Ocp-Apim-Subscription-Key",key);
xmlHttp.send( null );
return xmlHttp.responseText;
}

谢谢！

- Faraz Ahsan

---

你的代码发送请求到哪里了？ - hindmost

抱歉，刚刚添加了它！ - Faraz Ahsan

Answer 1

如果显示API密钥列在头文件中，很可能需要在您的HTTP请求的headers选项中设置它。通常像这样：

headers: {'Authorization': '[your API key]'}

这里是来自另一个问题的示例。

$http({method: 'GET', url: '[the-target-url]', headers: {
  'Authorization': '[your-api-key]'}
});

编辑：刚刚看到您想要将响应存储在变量中。在这种情况下，我可能会使用AJAX。像这样：

$.ajax({ 
   type : "GET", 
   url : "[the-target-url]", 
   beforeSend: function(xhr){xhr.setRequestHeader('Authorization', '[your-api-key]');},
   success : function(result) { 
       //set your variable to the result 
   }, 
   error : function(result) { 
     //handle the error 
   } 
 }); 

我从这个问题中获得了这个内容，我现在正在工作所以无法立即测试，但看起来很可靠。

编辑2：我相当确定您应该能够使用这行代码:

headers: {'Authorization': '[your API key]'},

在第一个编辑中，用这行代码替换 beforeSend。这对你来说可能更简单。

- Danny H

---

那很有道理，但我该如何将其纳入我的JavaScript文件中？ - Faraz Ahsan

当你评论时，我正在编辑我的答案，希望能够澄清一些事情。您可以将该AJAX请求放置在JS文件中需要获取信息的任何位置。我个人喜欢将它们放在自己的函数中。 - Danny H

我现在会尝试！非常感谢。 - Faraz Ahsan

不需要使用 beforeSend，我相信你可以直接在答案顶部使用 headers 行。这可能更容易，我也会将其添加到答案底部。 - Danny H

Answer 2

使用自己的代码并且没有使用jQuery进行轻微更改，

function testingAPI(){ 
    var key = "8a1c6a354c884c658ff29a8636fd7c18"; 
    var url = "https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015";
    console.log(httpGet(url,key)); 
}


function httpGet(url,key){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", url, false );
    xmlHttp.setRequestHeader("Ocp-Apim-Subscription-Key",key);
    xmlHttp.send(null);
    return xmlHttp.responseText;
}

谢谢你

- Shashank

---

【过时提醒】在主线程上使用同步XMLHttpRequest已经过时，因为它会对最终用户的体验产生不利影响。如需更多帮助，请查看https://xhr.spec.whatwg.org/。 - Shapon Pal

Answer 3

**`

你需要一个

send(); 语句。

这样你就可以将请求发送到网站服务器。

`**

- Mike

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community