Ajax/JavaScript get request to update a HTML element

I am trying to make an empty circle appear when the contents of a GET request are a 0, and a full circle appear when the contents are 1. I am not really sure how to implement this. Needs to poll every 5 seconds or so.

<style>
    .emptycircle {
          border-radius: 50%;
          height: 20px;
          width: 20px;
          border: 2px solid red;
        }
       .fullcircle {
          border-radius: 50%;
          height: 20px;
          width: 20px;
          border: 2px solid red;
          background-color: #f00;
        }       
...
<p id="state" class="emptycircle"></p>
...
<script>
    function getState() {
      $.ajax({
        url: '/state',
        type: 'GET',
        success: function(data) {
          console.log(data);
        }
      });
      if (getState == 0) {
        var state = '.emptycircle';
      } else {
        state = '.fullcircle';
      }
    }
</script>

Currently, invoking getState() from the console returns ‘undefined 0’ or ‘undefined 1’ (with undefined and the number being each on their own line), which is sort of the correct behaviour, so I just need to connect that to the element with id “state” and then have the script run every few seconds.