JSFiddle - React, Tailwind, and code Playground
HTML
<pre id="test">
</pre>
JavaScript
function request(url, data, type, callback) {
type = type.toUpperCase();
// try to create an XHR-Instance
var xhr = false;
if( window.XMLHttpRequest && ! window.ActiveXObject) {
xhr = new XMLHttpRequest();
} else if ( window.ActiveXObject ) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xhr = false;
}
}
}
if ( ! xhr ) {
throw 'browser not ajax-capable';
}
//for GET-Requests append param-string to URL
if ( type == 'GET' ) {
url += '?'+data;
}
xhr.onreadystatechange = function() {
if( xhr.readyState == 4 && xhr.status == 200 ) {
callback(xhr);
}
};
xhr.open(type, url, true);
xhr.send( type != 'GET' ? data : null );
}
for (let i = 0; i <= 100; i++) {
request('/echo/html/', 'q='+i, 'get', function(xhr) {
console.log(i);
for (let j=0; j < i; j++) document.querySelector("#test").innerHTML += " ";
document.querySelector("#test").innerHTML += i+"<br>";
});
}