 |
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.
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 5527
Lire la suite : TP n°35 : Application hybride objets connectés
<!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>
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 2115
<!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>
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 2334
<!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>
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 2099
<!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>
- Détails
- Écrit par : Richard GAUTHIER
- Clics : 2072