i've been given the task to do a website with HTML/CSS/JS and have 3 buttons that when clicked sends a code like "10", "01" and "11" to a c++ program. The c++ program is expected to send back a response and do a function depending on the code it receives. Send some data to the website and the website should give a response back to the c++ program.

I'm pretty new to Ajax and i'm trying to understand if this is the right path for the both party to communicate with each other.

for now i did this in HTML:

<button class="btn" id="btnfront" onclick="sendfrontimg()">front</button>
<button class="btn" id="btnback" onclick="sendbackimg()">back</button>
<button class="btn" id="btnboth" onclick="sendbothimg()">both</button>

and in the Javascript file (for one button):

function sendfrontimg() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
       document.getElementById("demo").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send();
  }

and this part for the callback function to have a response from the server:

function sendfrontimg(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onload = function(){ // When the request is loaded
       callback(httpRequest.responseText);// We're calling our method
    };
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
}

is this right so far?