JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv">
    <h2>Let AJAX change this text</h2>
</div>

<button type="button" onclick="myFunction();">Change Content</button>

JavaScript

//comments are from http://www.tizag.com/ajaxTutorial/ajaxxmlhttprequest.php

function loadXMLDoc(url, cfunc) {
    var xmlhttp;

    //XMLHttpRequest object is used to exchange data with a server behind the scenes
    //creates an xmlhttprequest object
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //The XMLHttpRequest object has a special property called onreadystatechange
    //onreadystatechange stores the function that will process the response from the server
    //every time the "ready state" changes, this function will be executed
    xmlhttp.onreadystatechange = function() {
        cfunc.call(this, xmlhttp);
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);

}

function myFunction() {
    loadXMLDoc("/echo/js/?js=Success!", function(xmlhttp) {
        //The XMLHttpRequest object has another property called readyState
        //This is where the status of our SERVER'S RESPONSE is stored
        //The SERVER RESPONSE can be processing, downloading or completed
        //When the property readyState is 4 that means the response is complete and we can get our data
        //Download worked as intended, data request successful if status property = 200
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }

    });
}