getpost27
Bac STI2D

TP n°34 : Méthodes Get et Post

Noms :  
Centre d'intérêt : CI 5 Communication entre systèmes
Classe : Term Sti2d Sin
Id programme : sin15, sin31  
Conditions : Seul , durée  3 heures.
Matériel : - un ordinateur;

Logiciel : - le logiciel Netbeans;
- Utiliser le navigateur chrome;
Document :  

I. Objectifs

II. Afficher une requête

Le lien ci-dessous renvoie la température d'une salle :

http://sciencesappliquees.com/templates/php/temp.php

Réaliser une page html qui affiche la température dans un div toutes les secondes.

Aide : 

<script type="text/javascript">
//declaration de l'objet pour la requete
var maRequete = new XMLHttpRequest();
//l'adresse email du serveur
var url = "http://sciencesappliquees.com/templates/php/temp.php";

//gestion de la reponse du serveur
maRequete.onload = function() {
//reponse du serveur
alert(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>
<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);

}
}

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

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

 

Faire valider votre travail par le professeur.

III. La requête dans une Jauge

A l'aide de la bibliothèque RGraph, afficher la température dans une jauge toutes les secondes.

Aide :

<canvas id="monCanvas" width="100" height="400">
[No canvas support]
</canvas>

<script src="https://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
<script src="https://www.rgraph.net/libraries/RGraph.thermometer.js" ></script>

<script type="text/javascript">
var thermometre = new RGraph.Thermometer({
   id: 'monCanvas',
   min: 0,
   max: 30,
   value: 20.3,
   options: {
   }
   }).draw();

</script>
thermometre.value = laNouvelleValeur;
RGraph.Redraw();

 

Faire valider votre travail par le professeur. 

 

IV. La requête Get

Nous avons 2 "input text" sur une page html :

<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>

Nous souhaitons envoyer leur contenu, au serveur ci-dessous, par la méthode Get.

http://sciencesappliquees.com/templates/php/metGet.php 

Réaliser le programme. 

Aide : 

 Faire valider votre travail par le professeur. 

 

V. La requête Post

Nous avons 2 "input text" sur une page html :

<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>

Nous souhaitons envoyer leur contenu, au serveur ci-dessous, par la méthode Post.

http://sciencesappliquees.com/templates/php/metPost.php 

Réaliser le programme. 

Aide : 

<script>

   //déclaration de l'objet contenant les données à envoyer.
   var data = "parametre1=valeur1&parametre2=valeur2";

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

//url du serveur
var url = "adresse de la page";
//gestion de la reponse du serveur
maRequete.onreadystatechange = function(){
if(maRequete.readyState == 4){
//affiche la réponse du serveur
alert(maRequete.responseText);
}
}

    //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");
   //envoyer la requete au serveur
maRequete.send(data);

</script>

Faire valider votre travail par le professeur. 

 

VI. Les datas au format JSON

Donner une définition du JSON.

Le serveur ci-dessous envoie les datas au format JSON.

http://sciencesappliquees.com/templates/php/json.php

Elles sont sous la forme suivante :

{
  "temp":19.07,
  "humi":27,
  "led1":"OFF"
}

Réaliser une page html qui affiche les 3 grandeurs dans 3 div toutes les secondes.

Aide :

var data = JSON.parse(maRequete.responseText);

Faire valider votre travail par le professeur. 

 

VII. Conclusion

 

 

 

Affichages : 4687