logo

TP : Requêtes HTML

Utlilisation de wampserver

Dans ce TP nous avons besoin d'un serveur pour faire ses equêtes HTML. C'est pourquoi nous allons utiliser wampserver.

Lancer wampserver, attendez le wpasse au vert et cliquez dessus :

Placez les fichiers dans Répertoire www, puis testez-les en cliquant sur localhost.

Vous pouvez installer un serveur Apache sur votre Raspberry Pi. Voir le tutoriel

Exercice 1

Voici le code d'une page HTML qui exécute une requête HTML.

<!DOCTYPE html>
<html>
<body>

<h2>Requête HTML 0</h2>
<button type="button" onclick="requetehtml0()">Change Content</button>
<pre id="requete0"></pre>

<script>
function requetehtml0() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      text=this.responseText;
      document.getElementById("requete0").innerHTML = text;
    }
  };
  xhttp.open("GET", "info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

  1. Analyser ce code.
  2. Télécharger le fichier info.txt
  3. Copier et coller ce code dans un fichier requetes.html. Lancer la page dans un navigateur. Pourquoi il ne se passe rien lorsqu'on appuie sur le bouton ?
  4. Déplacer les fichiers requetes.html et info.txt dans le répertoire www de wampserver. Que se passe-t-il ?
  5. Pour ceux qui n'ont pas wampserver appuyez sur le bouton ci-dessous. 

    








    Exercice 2 : traitement des données
    


    <!DOCTYPE html>
<html>
<body>

<h2>Exemple 2</h2>
<button type="button" onclick="requetehtml1()">Afficher</button>
<div id="demo"></div>

<script>
function requetehtml1() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      text=this.responseText.split("\n");
	  for (let i=0;i<text.length;i++)
	  {text[i]=text[i].split(",")}
      document.getElementById("demo").innerHTML = text[1][2];
    }
  };
  xhttp.open("GET", "info.txt", true);
  xhttp.send();
}
</script>

</body>
</html>

    

    Copiez et analysez ce code.