Script bitcoin : Le cours du Bitcoin en temps r馥l
R馗up駻er 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
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+" €"; 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>