Différences

Ci-dessous, les différences entre deux révisions de la page.

--- lespetitshackers:nodejs:clienthtmldynamic [2013/08/03 14:43] – créée christian.jacolot
+++ lespetitshackers:nodejs:clienthtmldynamic [2024/04/16 22:26] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
+====== Exemple Client HTML ======
+===== Création de la page HTML dynamique du client =====
+<code>
+<!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>
+</code>