getpost27
Bac STI2D

TP n°35 : Application hybride  <- Json -> objets connectés

Noms :  
Centre d'intérêt : CI 5 Communication entre systèmes
Classe : Term Sti2d Sin
Id programme : sin15, sin31  
Conditions : binôme , durée  3 heures.
Matériel : - un ordinateur;
- un Esp32 ou Esp8266;
- une smartphone ou une tablette;

Logiciel : - l'ide Netbeans;
- l'ide arduino;
- Utiliser le navigateur chrome;
Document :  

I. Objectifs

  • Mettre en forme les données;
  • Programmer en C++ et HTML5;
  • Envoyer et recevoir des données.

<!DOCTYPE html>

<html>
<head>
<title>Hello World</title>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
<script src="https://www.rgraph.net/libraries/RGraph.thermometer.js" ></script>
</head>
<body>
<h1>Température = <spam id="temp"></spam>°C</h1>
<script>
function lancerRequete(){
var maRequete = null; //initialiser l'objet

//déclare l'objet requete
if(window.XMLHttpRequest){
maRequete = new XMLHttpRequest();
}

//url du serveur
var url = "http://sciencesappliquees.com/templates/php/temp.php";

//Choisir le type de requete
maRequete.open("GET", url, true);

//gestion de la reponse du serveur
maRequete.onreadystatechange = function(){
if(maRequete.readyState == 4){
//affiche la réponse du serveur
//alert(maRequete.responseText);
document.getElementById('temp').innerHTML =maRequete.responseText;
}
}

//envoyer la requete au serveur
maRequete.send();

//relance la fonction au bout de 2 secondes
setTimeout('lancerRequete()', 1000);
}
//lance la fonction
lancerRequete();
</script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
<title>Hello World</title>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
<script src="https://www.rgraph.net/libraries/RGraph.thermometer.js" ></script>
</head>
<body>
<div id='mondiv'></div>
<label>Température</label><input type="text" name="temp" id="temp" value="19"><label>°C</label><br/>

<label>humidité</label><input type="text" name="humi" id="humi" value="45"><label>%</label>

<br/>

<script>

//declaration de l'objet pour la requete
var maRequete = new XMLHttpRequest();


//url du serveur
var url = "http://sciencesappliquees.com/templates/php/metGet.php";
var para = "?temp=";
para += document.getElementById('temp').value;
para += "&humi=";
para += document.getElementById('humi').value;
console.log(para);
url = url+para;

 

//gestion de la reponse du serveur
maRequete.onload = function() {
//reponse du serveur
document.getElementById('mondiv').innerHTML = this.responseText; //Affiche la reponse du seveur dans une fenêtre "alert"

};//fin de la fonction reponse (get ou post, adresse , asynchrone)

//Choisir le type de requete
maRequete.open("GET", url, true);
//envoyer la requete au serveur
maRequete.send();
</script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
<title>Hello World</title>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
<script src="https://www.rgraph.net/libraries/RGraph.thermometer.js" ></script>
</head>
<body>
<div id='mondiv'></div>
<label>Température</label><input type="text" name="temp" id="temp" value="19"><label>°C</label><br/>

<label>humidité</label><input type="text" name="humi" id="humi" value="45"><label>%</label>

<br/>

<script>

//declaration de l'objet pour la requete
var maRequete = new XMLHttpRequest();


//url du serveur
var url = "http://sciencesappliquees.com/templates/php/metPost.php";
var data = "temp=";
data += document.getElementById('temp').value;
data += "&humi=";
data += document.getElementById('humi').value;
console.log(data);

//gestion de la reponse du serveur
maRequete.onload = function() {
//reponse du serveur
document.getElementById('mondiv').innerHTML = this.responseText; //Affiche la reponse du seveur dans une fenêtre "alert"

};//fin de la fonction reponse (get ou post, adresse , asynchrone)

//Choisir le type de requete
maRequete.open("POST", url, true);

//Entête de la requete pour la méthode POST
maRequete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//Entête de la requete pour la méthode POST
maRequete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//envoyer la requete au serveur
maRequete.send(data);
</script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
<title>Hello World</title>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
<script src="https://www.rgraph.net/libraries/RGraph.thermometer.js" ></script>
</head>
<body>
<div>temp=<spam id='temp'></spam>°C</div>
<div id='humi'></div>
<div id='led1'></div>


<script>

function lancerRequete(){
var maRequete = null; //initialiser l'objet

//déclare l'objet requete
if(window.XMLHttpRequest){
maRequete = new XMLHttpRequest();
}

//url du serveur
var url = "http://sciencesappliquees.com/templates/php/json.php";

//Choisir le type de requete
maRequete.open("GET", url, true);

//gestion de la reponse du serveur
maRequete.onreadystatechange = function(){
if(maRequete.readyState == 4){
//affiche la réponse du serveur
//alert(maRequete.responseText);
var data = JSON.parse(maRequete.responseText);
document.getElementById('temp').innerHTML = data.temp;
document.getElementById('humi').innerHTML = data.humi;
document.getElementById('led1').innerHTML = data.led1;

 

}
}

//envoyer la requete au serveur
maRequete.send();

//relance la fonction au bout de 2 secondes
setTimeout('lancerRequete()', 1000);
}
//lance la fonction
lancerRequete();
</script>
</body>
</html>


Logo Lycée Paul Sérusier

J'enseigne au
Lycée Paul SERUSIER
Avenue de Waldkappel
29270 CARHAIX PLOUGUER
Tél : 02 98 99 29 29
Site : www.lycee-serusier.fr

footer2

Richard GAUTHIER
Professeur de Physique Appliquée
Certification ISN
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

www.carhaix2020.bzh