<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Task 2</title>
</head>
<body>
<button onclick="makeAjaxQuery()">Get Faculty Details</button>
<br/>
<br/>
<div id="display"></div>
<script type="text/javascript">
function makeAjaxQuery() {
// create an XMLHttpRequest
var xhttp = new XMLHttpRequest();
// create a handler for the readyState change
xhttp.onreadystatechange = function() {
readyStateChangeHandler(xhttp);
};
// get JSON file by making async call
xhttp.open("GET", "faculty.json", true);
xhttp.send();
}
// handler for the readyState change
function readyStateChangeHandler(xhttp) {
if (xhttp.readyState == 4) {
// readyState = 4 means DONE
if (xhttp.status == 200) {
// status = 200 means OK
handleStatusSuccess(xhttp);
} else {
// status is NOT OK
handleStatusFailure(xhttp);
}
}
}
// XMLHttpRequest failed
function handleStatusFailure(xhttp) {
// display error message
var display = document.getElementById("display");
display.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
}
// XMLHttpRequest success
function handleStatusSuccess(xhttp) {
var jsonText = xhttp.responseText;
// parse the json into an object
var facultyObj = JSON.parse(jsonText);
// display the object on the page
displayFaculty(facultyObj);
}
function displayFaculty(facultyObj) {
// show the constructed HTML code in the display div
var display = document.getElementById("display");
// construct HTML code to display weather information
console.log(facultyObj);
var html = "";
html += "<b>Name: </b>" + facultyObj.name + "<br/>";
html += "<b>Abbreviation: </b>" + facultyObj.abbreviation + "<br/>";
html += "<b>Email: </b>" + facultyObj.email + "<br/>";
html += "<b>Website: </b>" + facultyObj.web;
display.innerHTML = html;
}
</script>
</body>
</html>