Script bitcoin : Le cours du Bitcoin en temps réel

Récupérer le cours du bitcoin via un appel AJAX vers une API

Partie II : L'interactivité

Edition 1 | Chapitre 14 : Les appels AJAX / Page 223

Edition 2 | Chapitre 14 : Les appels AJAX / Page 238

Edition 3 | Chapitre 14 : Les appels AJAX / Page 238

<html>
<head><title>Cours du Bitcoin en temps réel</title>
</head>
<body><h1 id="monH1">Cours du Bitcoin en temps réel</h1><div id="bitcoin"><div id="cours"></div><div id="horo"></div></div><div id="info"></div><div id="source">Cours provenant de l'API cryptocompare.com</div>
<script type="text/javascript">
function formatMontant(m) {var intlN=new Intl.NumberFormat();return intlN.format(m);
}
/* Récupération des données de cours du Bitcoin */
function getCours() {/* Appel AJAX vers cryptocompare.com */var ajax=new XMLHttpRequest();console.log("readyState après new : "+ajax.readyState);/* Détection de l'avancement de l'appel */ajax.onreadystatechange=function() {console.log("readyState a changé et vaut : "+ajax.readyState) } /* Détection de la fin de l'appel */ajax.onload = function() {console.log("Appel AJAX terminé");console.log(" status : "+this.status);console.log(" response : "+this.response); if (this.status == 200) { /* Le service a bien répondu */try {var json=JSON.parse(this.response); // Convertir le retour JSON} catch(err) {console.log("Retour JSON incorrect"); return false; }/* Vérifier que le JSON de retour contient bien la propriété EUR */if (json.EUR) {var eur=formatMontant(json.EUR); var dt=new Date();document.getElementById("cours").innerHTML=eur+" €";document.querySelector("div#horo").innerHTML="Maj "+dt.toLocaleString();} else {console.log("Retour du cours incorrect"); }}}/* Détection du timeout */ajax.ontimeout=function() {console.log("Le service n'a pas répondu à temps : nouvel essai dans 5 sec"); /* Relancer l'appel 5 secondes plus tard */setTimeout("getCours()", 5000); }/* Préparation de la requête et envoi */var url="https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=EUR";ajax.open("GET", url, true);ajax.timeout=1000; /* Délai d'expiration à 1 seconde */ajax.send();
}
/* Démarrage de l'appel */
window.onload=function() {getCours();setInterval("getCours()", 30000);
}
</script>
</body>
<style type="text/css">div#bitcoin {margin: 5px;padding: 5px;font-size: 30px;line-height: 60px;min-height:60px;font-weight: bold;border:1px solid #ccc;border-radius:5px;width:250px;margin-left:auto;margin-right:auto;padding-top:0px;text-align: center;position: relative;}div#horo {position:absolute;right:5px;bottom:-21px;font-size: 12px;}div#source {font-size:12px;color:#999;position:fixed;bottom:5px;right:5px; }div#info {background-color:#eee;min-height: 20px;padding:5px;margin:10px; }
</style>
</html>

Exécution du script

Emulation de la console

Code source

<html><head>  <title>Cours du Bitcoin en temps réel</title></head><body>  <h1 id="monH1">Cours du Bitcoin en temps réel</h1>    <div id="bitcoin"><div id="cours"></div><div id="horo"></div></div>  <div id="info"></div>  <div id="source">Cours provenant de l'API cryptocompare.com</div>  <script type="text/javascript">function formatMontant(m) {  var intlN=new Intl.NumberFormat();  return intlN.format(m);}/* Récupération des données de cours du Bitcoin */function getCours() {  /* Appel AJAX vers cryptocompare.com */  var ajax=new XMLHttpRequest();  console.log("readyState après new : "+ajax.readyState);  /* Détection de l'avancement de l'appel */  ajax.onreadystatechange=function() {    console.log("readyState a changé et vaut : "+ajax.readyState)    }    /* Détection de la fin de l'appel */  ajax.onload = function() {    console.log("Appel AJAX terminé");    console.log("  status : "+this.status);    console.log("  response : "+this.response);        if (this.status == 200) { /* Le service a bien répondu */      try {        var json=JSON.parse(this.response); // Convertir le retour JSON      } catch(err) {        console.log("Retour JSON incorrect");          return false;        }      /* Vérifier que le JSON de retour contient bien la propriété EUR */      if (json.EUR) {        var eur=formatMontant(json.EUR);          var dt=new Date();        document.getElementById("cours").innerHTML=eur+" &euro;";        document.querySelector("div#horo").innerHTML="Maj "+dt.toLocaleString();      } else {        console.log("Retour du cours incorrect");        }    }  }  /* Détection du timeout */  ajax.ontimeout=function() {    console.log("Le service n'a pas répondu à temps : nouvel essai dans 5 sec");         /* Relancer l'appel 5 secondes plus tard */    setTimeout("getCours()", 5000);   }      /* Préparation de la requête et envoi */  var url="https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=EUR";  ajax.open("GET", url, true);  ajax.timeout=1000; /* Délai d'expiration à 1 seconde */  ajax.send();}/* Démarrage de l'appel */window.onload=function() {  getCours();  setInterval("getCours()", 30000);}</script></body><style type="text/css">  div#bitcoin {    margin: 5px;    padding: 5px;    font-size: 30px;    line-height: 60px;    min-height:60px;    font-weight: bold;    border:1px solid #ccc;    border-radius:5px;    width:250px;    margin-left:auto;    margin-right:auto;    padding-top:0px;    text-align: center;    position: relative;  }  div#horo {    position:absolute;    right:5px;    bottom:-21px;    font-size: 12px;  }  div#source {    font-size:12px;    color:#999;    position:fixed;    bottom:5px;    right:5px;    }  div#info {    background-color:#eee;    min-height: 20px;    padding:5px;    margin:10px;        }</style></html>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...