PALS3004: Web Programming Demo 8-2

<html>
<head>
<title>PALS3004: Web Programming Demo 8-2</title>
<script>
// send the data to the server
function button1click() {
   var req=new XMLHttpRequest();
   req.open("POST","http://www.phon.ucl.ac.uk/courses/spsci/webprog/storeinfo.php");
   req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   req.onreadystatechange=function () {
      if ((req.readyState==4)&&(req.status==200))
        console.log(req.responseText);
   };
   var subject=document.getElementById("subject").value;
   var score=parseFloat(document.getElementById("score").value);
   var msg="subject=" + encodeURIComponent(subject) + "&" + "score=" + score;
   req.send(msg);
   document.getElementById("subject").value="";
   document.getElementById("score").value="";
}
// get all the data back from the server
function button2click() {
   var req=new XMLHttpRequest();
   req.open("GET","http://www.phon.ucl.ac.uk/courses/spsci/webprog/loadinfo.php");
   req.onreadystatechange=function () {
      if ((req.readyState==4)&&(req.status==200))
         processData(req.responseText);
   };
   req.send();
}
// callback function
function processData(txt) {
   document.getElementById("response").innerHTML=txt;
}
</script>
</head>
<body>
  <h2>Demo 8-2: Demonstrate Server-Side Storage</h2>

  <p>Subject name: <input type="text" id="subject" size="10">
  Subject score: <input type="text" id="score" size="10">
  <p><button onclick="button1click()">Save Score</button>
  <p><button onclick="button2click()">Load All Scores</button>

  <p><pre id="response">
  </pre>
  
</body>
</html>
Demo 8-2: Demonstrate Server-Side Storage

Subject name: Subject score: