JSFiddle - React, Tailwind, and code Playground
HTML
<a href="http://echo.jsontest.com/key/value/one/gotIt" id="myLink" >Show Comments</a>
<div id="txtHint"></div>
JavaScript
function showUser(event) {
event.preventDefault();
var url = event.srcElement.getAttribute('href');
if(!url) {
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState === 4){
if (this.status >= 200 && this.status < 400){
// Success!
data = JSON.parse(this.responseText);
var el = document.getElementById('txtHint');
el.innerHTML = data.one;
} else {
// Error :(
}
}
}
xmlhttp.open("POST",url,true);
xmlhttp.send();
xmlhttp = null;
}
function addEventListener(el, eventName, handler) {
if (el.addEventListener) {
el.addEventListener(eventName, handler);
} else {
el.attachEvent('on' + eventName, function(){
handler.call(el);
});
}
}
var el = document.getElementById('myLink');
addEventListener(el, 'click', showUser);