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

时间:2017-05-20 22:11:59

标签: javascript json xmlhttprequest

/ *你好peeps,

我希望你可以帮助我,我试图从同一个coinmarket网址获得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> 

1 个答案:

答案 0 :(得分:0)

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

至于你的功能,那些相同的功能名称会相互覆盖,所以只有最后一个功能名称可以使用,就像var x=1,x=2,x=3一样,那么x将是3.所以你需要3个不同的函数名,或者使用1并传递url和id进入它并在里面使用它。但我会保持它的可读性并使用3。

此外,ID不应包含空格,因此我将_替换为center,html5不支持 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>
from