Ajax Integration

If you’re really clever, you’ll integrate the following code into your script. But this challenge is only for those with the very biggest of brains.

Again, the raw code is here.

If you copy and paste the code below, with the correct URL, you may pull in unwanted HTML characters from the webpage. Copying the raw code is the safest bet.

Make sure you use the correct URL!

Here are the number of wins:
<div id="wins"></div>


<script>
let url = "http://localhost:8080/score/increasewins";
let ajaxRequest = new XMLHttpRequest();

ajaxRequest.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
		console.log(this.responseText);
        let score = JSON.parse(this.responseText);
        // possibly  document.getElementById("wins").innerHTML = this.responseText if the API returns an int not a score;
        document.getElementById("wins").innerHTML = score.wins;
    }
};
ajaxRequest.open("GET", url, true);
ajaxRequest.send();

</script>

One Step Further

The script above hits a RESTful web service, deployed as a microservice to a Kubernetes cluster on Amazon. If you’re really bold, you could code it on your own. Here’s the GitHub repo for reference:

GitHub Keeping Score Code Repository

One Step Backwards

This Single Page Interface (SPI) approach is a far cry from how we developed web applications in the days of Servlets and JSPs. Here’s a version of the game that takes a more traditional, monolithic approach to implementation:

• Monolithic Rock-Paper-Scissors Game
• Monolithic RPS Source Code

Play the game. Check out the code!