getpost27
Bac STI2D

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 : https://code.tutsplus.com/tutorials/http-headers-for-dummies--net-8039

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

 

 

 

En poursuivant votre navigation sur mon site, vous acceptez l’utilisation des Cookies et autres traceurs  pour réaliser des statistiques de visites et enregistrer sur votre machine vos activités pédagogiques. En savoir plus.