javascript/ajax.html

<html>
<head>
	<style type="text/css">
		#square {
			margin-top: 20px;
			margin-left: 100px;
			height: 200px;
			width: 200px;
			background: orange;
		}

		div {
			margin-bottom: 20px;
		}

		.round {
			border-radius: 20px;
		}

		#square:hover{
			cursor: pointer;
		}

	</style>
</head>

<body>

	<!-- <div id="square" onclick="showSentence()"></div> -->
	<div id="square" onclick="trigger()"></div>

	<div>
		<p> Hello, this is inside a PPPPP tag. </p>
	</div>


<script>
/*
function showSentence(){
 	var xhttp = new XMLHttpRequest();
 	xhttp.onreadystatechange = function() {
 		if (this.readyState == 4 && this.status == 200) {
 			document.getElementById("square").innerHTML = this.responseText;
 		}
 	};
 	xhttp.open("GET", "test.txt", true);
 	xhttp.send();
}
*/


function trigger(){
	//showSentence();
	showSentence("json/data.json", test1);
}

function showSentence(url, func){
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			func(this);
		}
	};
	xhttp.open("GET", url, true);
	xhttp.send();
}

function test1(xhttps){
	document.getElementById("square").innerHTML = xhttps.responseText;
	//var data = eval(xhttps.responseText);
	var data = JSON.parse(xhttps.responseText);
	//eval("alert('BOO! I could be bad!')");
	alert("Response has " + data.length + " entries.")
}

function test2(xhttps){
	document.getElementById("square").innerHTML = xhttps.responseText;
	document.getElementById("square").style.color = "green";
}

</script>

</body>
</html>