JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="doajax()">Do Ajax!</button>
<br>
<span id="rs0">0</span>
<br>
<span id="rs1">1</span>
<br>
<span id="rs2">2</span>
<br>
<span id="rs3">3</span>
<br>
<span id="rs4">4</span>
<br>
<span id="msg"></span>
<br>

JavaScript

function doajax() {
    // first we create the XHR object
    

    xmlhttp = new XMLHttpRequest();
    var el = document.getElementById("rs" + xmlhttp.readyState);
    el.innerHTML = "readyState = " + xmlhttp.readyState + " " + new Date().getMilliseconds();
    // here we assign an anonymous function as an event handler that is 
    // called any time the "onreadystatechange" event has fired.
    xmlhttp.onreadystatechange = function () {
        el = document.getElementById("rs" + xmlhttp.readyState);
        el.innerHTML = "readyState = " + xmlhttp.readyState + " " + new Date().getMilliseconds();
        //readyState == 4 indicates that all data has been receieved
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            // Do something with xmlhttp.responseText
        }
    };
    xmlhttp.open("GET", "http://fiddle.jshell.net/favicon.png", true);
    xmlhttp.send();
    document.getElementById("msg").innerHTML = "End of JavaScript at time " +  new Date().getMilliseconds();
}