JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="row">
<pre id="response"></pre>
</div>
</div>
JavaScript
var $response = document.getElementById("response");
var COUNTER = 1;
var xhr = new XMLHttpRequest();
refresher = ()=> {
setInterval(makeRequest, 3000)
}
makeRequest = ()=> {
xhr.timeout = 2000;
xhr.onreadystatechange = updateSomeDiv
xhr.ontimeout = function (){
console.error("request timedout: ", xhr);
}
xhr.open("get", "https://api.github.com/users/vintharas/repos", /*async*/ true);
xhr.send();
}
function updateSomeDiv(e){
console.log(this);
var response = JSON.parse(xhr.response)
if (xhr.readyState === 4){
if (xhr.status === 200){
$response.innerHTML = '<b>' + COUNTER++ + ' updates </b><br>' + response[COUNTER].id + ' ' + response[COUNTER].full_name;
} else {
$response.innerHTML = 'Error: ' + xhr.status
console.error("XHR didn't work: ", xhr.status);
}
}
}
makeRequest();
refresher();