Exemple Client HTML

Création de la page HTML dynamique du client

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Client REST</title>

<script type='text/javascript'>
function lirephrase() {
  var url = "http://localhost:8080/liste";
  var client = new XMLHttpRequest();
  client.open("GET", url, false); // synchrone
  client.setRequestHeader("Accept", "application/json"); 
  client.send();
  console.log("The request succeeded!\n");
  if (client.status == 200) {
    console.log("The request succeeded!\n\nThe response representation was:\n\n" + client.responseText);
    document.getElementById('phrase').innerHTML = client.responseText;
  } else {
    console.log("The request did not succeed!\n\nThe response status was: " + client.status + " " + client.statusText + ".");
  }
}

function ajouter() {
  var monmemo = document.getElementById('ajout').value
  var url = "http://localhost:8080/liste";
  var client = new XMLHttpRequest();
  client.open("POST", url, false); // synchrone
  client.setRequestHeader("Content-Type", "application/json"); 
  client.send("{\"item\":\""+monmemo+"\"}");
  console.log("The request succeeded!\n");
  if (client.status == 200) {
    console.log("The request succeeded!\n\nThe response representation was:\n\n" + client.responseText);
    document.getElementById('phrase').innerHTML = client.responseText;
  } else {
    console.log("The request did not succeed!\n\nThe response status was: " + client.status + " " + client.statusText + ".");
  }
}

</script>


</head>

<body>
<button onClick="lirephrase()">Lire la phrase du jour</button> <div id="phrase"></div>
<p></p>
<button onClick="ajouter()">Ajouter un mémo à ma liste</button><INPUT id="ajout" TYPE="text" NAME="ajout" VALUE="pain">
<p></p>
<button>Enlever un mémo de ma liste</button><INPUT TYPE="text" NAME="enleve" VALUE="lait">
<p></p>
<button>Lire ma liste de mémos</button><div id="liste"></div>

</body>
</html>