JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<button id='ajaxButton'>ajaxButton</button>

JavaScript

var htmlToElements = (function () {
    var div = document.createElement('div');
    return function (s) {
        div.innerHTML = s;
        return div.childNodes;
    };
}());
addEventListener('response', function (e) {
    document.body.appendChild.apply(document.body, e.detail);
});
addEventListener('failure', function (e) {
    document.body.appendChild.apply(document.body, e.detail);
});
var httpRequest;
document.getElementById("ajaxButton").onclick = function () {
    makeRequest('//www.google.com/search');
};

function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        try {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!httpRequest) {
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
    httpRequest.onreadystatechange = alertContents;
    
   
    httpRequest.open('GET', url,true);
 httpRequest.withCredentials  =true;
    httpRequest.setRequestHeader('Access-Control-Allow-Origin','*');

    httpRequest.send(null);
}

function alertContents() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
            dispatchEvent(new CustomEvent('response', {
                'detail': htmlToElements(httpRequest.responseText)
            }));
        } else {
            dispatchEvent(new CustomEvent('failure', {
                'detail': htmlToElements('There was a problem with the request.')
            }));
        }
    }
}