Week 10&11
Task 2user_1373341
html
a year ago
2.3 kB
2
Indexable
Never
<!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>