HTTP SERVER GET and POST examples using JSON

You are reading a single comment by @Cale and its replies. Click here to read the full conversation.

•

Cale

A simple web interface using the ESP8266 as a web server. This example sends the current buttons color to the ESPRUINO PICO and then the pico sends back the other color. (red or green) Changes the buttons color. There is a bunch of extra JSON and this is to represent multiple reads to get all of the JSON.

<!DOCTYPE html>
<html>
  <head>
    <title>POST GET EXAMPLE</title>
    <script>
      function response(arr,type){//arr is in JSON
        if(type==="get"){
          document.getElementById("get").style.backgroundColor=arr.color;
        }else{
          document.getElementById("post").style.backgroundColor=arr.color;
        }
      }
      
      function postServer(color){
        var req = new XMLHttpRequest(),
        obj = {'color':color,'the':'rest','are':'test','Red':'red','Purple':'purple','Green':'green','Yellow':'yellow'},
        arr;
        req.open("POST","/", true);
        req.setRequestHeader("Content-type", "application/json");
        req.onreadystatechange = function(){
          if(req.readyState === 4){
            var status = req.status;
            if(status>=200 && status <300 || status === 304){
              arr=req.responseText;
              arr=JSON.parse(arr);
              response(arr,"post");
            }else{
              alert("something bad");
            }
          }
        }
        
        obj=JSON.stringify(obj);
        console.log(obj);
        req.send(obj);
      }
      function postControl(){
        var color = document.getElementById("post").style.backgroundColor;
        postServer(color);
        
      }
      
      function getServer(color){
        var req=new XMLHttpRequest(),
        arr;
        req.open("GET", "?color="+color, true);
        req.onreadystatechange = function(){
          if(req.readyState === 4){
            var status = req.status;
            if(status>=200 && status <300 || status === 304){
              arr=req.responseText;
              arr=JSON.parse(arr);
              response(arr,"get");
            }else{
              alert("something bad");
            }
          }
        }
        req.send(null);
      }
      function getControl(){
        var color = document.getElementById("get").style.backgroundColor;
        getServer(color);
      }
    </script>
  </head>
  <body>
    <button style="background-color:red" id="post" type="button" onclick="postControl()">POST</button>
    <button style="background-color:red" id="get" type="button" onclick="getControl()">GET</button>
  </body>
</html>

HTTP SERVER GET and POST examples using JSON

About

Espruino