I have been tasked with creating a website using HTML, CSS, and JavaScript that includes three buttons. When clicked, these buttons will send codes such as "10," "01," and "11" to a C++ program. The C++ program will then respond and perform a function based on the code it receives. Data will be sent from the website, and the website should return a response to the C++ program.
As someone new to Ajax, I am trying to determine if this is the correct approach for enabling communication between both parties.
Currently, in HTML, I have implemented the following:
<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>
Additionally, 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 a portion for the callback function to receive a response from the server:
function sendfrontimg(callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onload = function(){
callback(httpRequest.responseText);
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();
}
Is this implementation on the right track?