JSFiddle - React, Tailwind, and code Playground

by Evgeniy Viniychuk

HTML

<body>
<h1>Test <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange" target="_blank">onreaydstatechange</a></h1></body>

JavaScript

function getTextBlock(status, text) {
		var div = document.createElement('div');
		div.innerHTML = "<b>"+status+"</b>" + "<span>"+text+"</span>"
		return div;
	}
	
	function responseHandler (eventType) {

		var text  = xhr.responseText + " " + xhr.readyState

		if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
			console.log("Done: " + eventType, text);
            document.body.appendChild(getTextBlock("Done: " + eventType, text));
        } else if (xhr.status === 0 && xhr.readyState === 4) {
        	console.log("Abort: " + eventType, text);	
        	document.body.appendChild(getTextBlock("Abort: " + eventType, text));
        } else {
			console.log("Response: " + eventType, text);	
        	document.body.appendChild(getTextBlock("Response: " + eventType, text))
        }
      
	}

	var xhr    = new XMLHttpRequest(),
        method = "GET",
        url    = "https://jsonplaceholder.typicode.com/users";
	
	xhr.onreadystatechange = function () {
		responseHandler('readyStateChange');
	};
	xhr.onload             = function() {
		responseHandler('onLoad');
	};
	xhr.onerror            = function (e) {
		console.log("Error: ", e);
		document.body.appendChild(getTextBlock("Error: ", e));
	};

	xhr.open(method, url, true);
	xhr.send();

	setTimeout(function () {
		xhr.abort();
	}, 50)