Week 10&11

Task 2
avatar
user_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>