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

  • 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

 

 

 


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.

 

 


Mentions légales


Plan du site

  Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.