有没有办法用 XMLHttprequest 调用多个 URL？

【问题标题】：Is there a way to call multiple URLs with XMLHttprequest?有没有办法用 XMLHttprequest 调用多个 URL？
【发布时间】：2017-05-21 23:43:45
【问题描述】：

/*你好，窥视，

我希望你能帮助我，我正在尝试从同一个 coinmarket URL 获取 3 个不同的代码。我希望能够在同一个脚本中调用蜂蜜币、比特币和游戏积分。不幸的是，这个API似乎没有一个选项可以一次专门调用它们但是有一个选项可以调用它们的巨大列表并以这种方式提取它们，尽管很难确定哪个是哪个（因为我不知道该怎么做）。

-如果您想知道-： Anthropodia 目标是一种“游戏内货币”，由于 stackoverflow 自己的 Fen1x，该脚本的第一次迭代确实有效。 :) 目的是让我们的游戏内货币通过使用加密货币真实地波动。玩家以后可以通过购买加密货币来影响游戏...现在我只是设置网页，反正我尝试了两种不同的方法，

第一个示例没有任何结果，只是一个空白页面，不幸的是，我认为这超出了我的想象。我试图通过调用一组代码并仅使用前 3 个对象“price_usd”来规避这一点，但这不符合最初的计划。那么有没有人对第一个或第二个示例或两者都有答案？

第一次尝试：

我很乐意将您的用户名或真实姓名（如果您愿意）添加到游戏积分和我们的网页上，任何有兴趣加入我们游戏项目的人都非常受欢迎（这完全是自愿的，我是唯一的编码员有了javascript知识，我也拉了短稻草。:)

*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" Access-Control-Allow-Origin: *>
<link href="style.css" type="text/css" rel="stylesheet"> 

    <head>
    <title>Displaying JSON Data</title>
    </head>


<script type="text/javascript"> 


        window.addEventListener('load',init,false);

function init(e) {
    document.getElementById('myButton').addEventListener('click',documentLoader,false);
}

function reqListener() {
    var obj = JSON.parse(this.responseText);
    document.getElementById('honey_price_usd').innerHTML= obj[0].price_usd; //Honey Coin Price 
    document.getElementById('Anthropodia Honey Price').innerHTML= obj[0].price_usd * 10; //Anthropodia Honey Price * 10 

}


function reqListener() {
    var obj = JSON.parse(this.responseText);
    document.getElementById('game_price_usd').innerHTML= obj[0].price_usd; //Game Credits Price 
    document.getElementById('Anthropodia Sugar Price').innerHTML= obj[0].price_usd * 10; //Anthropodia Sugar Price * 10 

}

function reqListener() {
    var obj = JSON.parse(this.responseText);
    document.getElementById('btc_price_usd').innerHTML= obj[0].price_usd; //Bitcoin Price 
    document.getElementById('Anthropodia Asparatime Price').innerHTML= obj[0].price_usd * 10; //Anthropodia Asparatime Price * 10 

}


function documentLoader(){
    var oReq = new XMLHttpRequest();
    oReq.onload = reqListener; 
    oReq.open("GET", "https://api.coinmarketcap.com/v1/ticker/HONEY/?convert=USD",true); 
    oReq.send(); 
}

function documentLoader(){
    var oReq = new XMLHttpRequest();
    oReq.onload = reqListener; 
    oReq.open("GET", "https://api.coinmarketcap.com/v1/ticker/gamecredits/?convert=USD",true); 
    oReq.send(); 
}

function documentLoader(){
    var oReq = new XMLHttpRequest();
    oReq.onload = reqListener; 
    oReq.open("GET", "https://api.coinmarketcap.com/v1/ticker/bitcoin/?convert=USD",true); 
    oReq.send(); 
}
</script>

<body>

<!-- Form that holds Anthropodia Currency Prices --> 

    <form id="Currency_Form" style="width:50%">
         <table style="width:100%">
<center>         <h1>Anthropodia Currency</h1>      </center> 
  <tr>
    <th>Crypto-Currency</th>
    <th>Game Currency</th>  
  </tr>
  <tr>
    <td>Honey Coin Price: <div id="honey_price_usd"></div></td>
    <td>Anthropodia Honey Price: <div id="Anthropodia Honey Price"></div></td>  
  </tr>
  <tr>
    <td>Game Credits Price: <div id="game_price_usd"></div></td>
    <td>Anthropodia Sugar Price: <div id="Anthropodia Sugar Price"></div></td>
  </tr>
    <tr>
    <td>Bitcoin Price: <div id="btc_price_usd"></div></td>
    <td>Anthropodia Asparatime Price: <div id="Anthropodia Asparatime Price"></div></td>
  </tr>

</table>

    <center> 

    <button id="myButton" type="button">Click to load</button>

    <center>  

</form> 



</body> 

</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" Access-Control-Allow-Origin: *>
<link href="style.css" type="text/css" rel="stylesheet"> 

    <head>
    <title>Displaying JSON Data</title>

        <script type="text/javascript"> 
        window.addEventListener('load',init,false);

function init(e) {
    document.getElementById('myButton').addEventListener('click',documentLoader,false);
}

function reqListener() {
    var obj = JSON.parse(this.responseText);
    document.getElementById('honey_price_usd').innerHTML= obj[0].price_usd; //Honey Coin Price 
    document.getElementById('Anthropodia Honey Price').innerHTML= obj[0].price_usd * 10; //Honey Coin Price * 10 
    document.getElementById('game_price_usd').innerHTML= obj[1].price_usd; //Game Credit Price
    document.getElementById('Anthropodia Sugar Price').innerHTML= obj[1].price_usd * 10; //Sugar Coin Price * 10 
    document.getElementById('btc_price_usd').innerHTML= obj[2].price_usd; //Bitcoin Price 
    document.getElementById('Anthropodia Asparatime Price').innerHTML= obj[2].price_usd * 10; //Asparatime Coin Price * 10 

}

function documentLoader(){
    var oReq = new XMLHttpRequest();
    oReq.onload = reqListener; 
    oReq.open("GET", "https://api.coinmarketcap.com/v1/ticker/?limit=10",true); 
    oReq.send(); 
}

/* Thanks go out to Fen1x from Stackoverflow for helping fix the code (you are also on the webpage) */ 
        </script>

    </head>
<body>

<!-- Form that holds Anthropodia Currency Prices --> 

    <form id="Currency_Form" style="width:50%">
         <table style="width:100%">
<center>         <h1>Anthropodia Currency</h1>      </center> 
  <tr>
    <th>Crypto-Currency</th>
    <th>Game Currency</th>  
  </tr>
  <tr>
    <td>Honey Coin Price: <div id="honey_price_usd"></div></td>
    <td>Anthropodia Honey Price: <div id="Anthropodia Honey Price"></div></td>  
  </tr>
  <tr>
    <td>Game Credits Price: <div id="game_price_usd"></div></td>
    <td>Anthropodia Sugar Price: <div id="Anthropodia Sugar Price"></div></td>
  </tr>
    <tr>
    <td>Bitcoin Price: <div id="btc_price_usd"></div></td>
    <td>Anthropodia Asparatime Price: <div id="Anthropodia Asparatime Price"></div></td>
  </tr>

</table>

    <center> 

    <button id="myButton" type="button">Click to load</button>

    <center>  

</form> 



</body> 

</html>

【问题讨论】：

  • 没有接受者嗯......好吧，如果我自己解决这个问题，我一定会发布它。

标签： javascript json xmlhttprequest


【解决方案1】：

我不会调用那个大文件，最好调用 3 个 ajax。

至于您的函数，这些相同的函数名称会相互覆盖，因此只有最后一个可以工作，例如 var x=1,x=2,x=3 然后 x 将为 3。所以您需要 3 个不同的函数名称，或者使用 1 并传递 url 和id 进入它并在里面使用它。但我会保持它对你的可读性并使用 3。

另外，id里面不应该有空格，所以我用_替换了，html5不支持center标签，所以我把它们去掉了。

最后被告知此代码没有任何错误处理。

    

window.addEventListener('load', init, false);

function init(e) {
  document.getElementById('myButton').addEventListener('click', documentLoader, false);
}

function reqListenerHoney() {
  var obj = JSON.parse(this.responseText);
  document.getElementById('honey_price_usd').innerHTML = obj[0].price_usd; //Honey Coin Price 
  document.getElementById('Anthropodia_Honey_Price').innerHTML = obj[0].price_usd * 10; //Anthropodia Honey Price * 10 

}

function reqListenerGame() {
  var obj = JSON.parse(this.responseText);
  document.getElementById('game_price_usd').innerHTML = obj[0].price_usd; //Game Credits Price 
  document.getElementById('Anthropodia_Sugar_Price').innerHTML = obj[0].price_usd * 10; //Anthropodia Sugar Price * 10 
}

function reqListenerBitcoin() {
  var obj = JSON.parse(this.responseText);
  document.getElementById('btc_price_usd').innerHTML = obj[0].price_usd; //Bitcoin Price 
  document.getElementById('Anthropodia_Asparatime_Price').innerHTML = obj[0].price_usd * 10; //Anthropodia Asparatime Price * 10 
}

function documentLoaderHoney() {
  var oReq = new XMLHttpRequest();
  oReq.onload = reqListenerHoney;
  oReq.open("GET", "https://api.coinmarketcap.com/v1/ticker/HONEY/?convert=USD", true);
  oReq.send();
}

function documentLoaderGame() {
  var oReq = new XMLHttpRequest();
  oReq.onload = reqListenerGame;
  oReq.open("GET", "https://api.coinmarketcap.com/v1/ticker/gamecredits/?convert=USD", true);
  oReq.send();
}

function documentLoaderBitcoin() {
console.log("docloader");
  var oReq = new XMLHttpRequest();
  oReq.onload = reqListenerBitcoin;
  oReq.open("GET", "https://api.coinmarketcap.com/v1/ticker/bitcoin/?convert=USD", true);
  oReq.send();
}

function documentLoader() {
   // clicked button, call the 3 functions
   documentLoaderHoney();
   documentLoaderGame();
   documentLoaderBitcoin();
}
<form id="Currency_Form" style="width:50%">
  <table style="width:100%">
    <h1>Anthropodia Currency</h1>
    <tr>
      <th>Crypto-Currency</th>
      <th>Game Currency</th>
    </tr>
    <tr>
      <td>Honey Coin Price:
        <div id="honey_price_usd"></div>
      </td>
      <td>Anthropodia Honey Price:
        <div id="Anthropodia_Honey_Price"></div>
      </td>
    </tr>
    <tr>
      <td>Game Credits Price:
        <div id="game_price_usd"></div>
      </td>
      <td>Anthropodia Sugar Price:
        <div id="Anthropodia_Sugar_Price"></div>
      </td>
    </tr>
    <tr>
      <td>Bitcoin Price:
        <div id="btc_price_usd"></div>
      </td>
      <td>Anthropodia Asparatime Price:
        <div id="Anthropodia_Asparatime_Price"></div>
      </td>
    </tr>

  </table>


    <button id="myButton" type="button">Click to load</button>

</form>

【讨论】：

  • 不客气。查看w3schools 中的示例代码，它结合了 documentLoader... 和 reqListener.... 函数并添加了检查（就绪状态和状态行）。
  • 完美运行。您在我们即将推出的游戏和网页上都有积分。我会尽快发给你。
猜你喜欢
  • 2021-09-17
  • 2019-11-02
  • 2020-12-13
  • 2010-12-20
  • 1970-01-01
  • 2019-11-17
  • 2012-02-17
  • 1970-01-01
  • 2016-02-14
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode