Retourner à la page d'accueil de TJS

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é / Chapitre 14 : Les appels AJAX / Page 223

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>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 20/09/2019 20:02:12 sur php7 en 54.37 ms