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

• Etudier les méthodes GET et POST en html;
• Mettre en oeuvre les datas au format JSON;
• Envoyer et recevoir des données.

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 : 

• Utiliser innerHTML pour mettre la valeur de la température dans le div;
• Utiliser la fonction XMLHttpRequest() avec la script ci-dessous pour récupérer la température  1 fois sur le serveur:

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

• Utiliser la fonction XMLHttpRequest() avec la script ci-dessous pour récupérer la température  toutes les 2 secondes sur le serveur: 

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

• Il faut ajouter dans le body de la page html une balise canvas avec l'id "monCanvas" pour afficher la jauge à l'intérieur :

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

• Pour utiliser RGraph, il faut importer les librairies suivantes :

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

• Pour créer l'objet jauge, vous devez utilisez le script ci-dessous :

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

</script>

• Pour mettre à jour la valeur de la jauge, vous devez utiliser les instructions suivantes :

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 : 

• Pour la méthode Get, l'url doit être sous la forme : adresseServeur?parametre1=valeur1&parametre2=valeur2
• Pour récupérer la valeur d'un "input text", il faut utiliser l'instruction document.getElementById("idDuDiv").value 

 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 : 

• Utiliser la fonction XMLHttpRequest() avec la script ci-dessous pour récupérer la température  1 fois sur le serveur:

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

• Pour convertir la "responseText" en JSON, il faut utiliser l'instruction suivante : 

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

• Pour récupérer la valeur d'une grandeur d'un JSON, par exemple "temp", il faut utiliser : data.temp  

Faire valider votre travail par le professeur. 

VII. Conclusion