Title Which student would you like to know about? Your results are here function loadData() { let results = document.getElementById("container"); //results.innerHTML = oStr; alert("Click"); loadFromServer( results ) } function loadFromServer( resContainer ){ // Use Ajax and xmlHttp to create the following output when you click the button xmlHTTP.open("getData.php") document.getElementById("container").innerHTML = this.resposeText; // Uses AJax via the XMLHttpRequest(); let xmlHTTP = new XMLHttpRequest(); // open server: let serverURL = ; alert( "inside load") // This code make a request over the WWW for the serverURL data xmlHTTP.open( "GET", serverURL, true); xmlHTTP.send(); xmlHTTP.onreadystatechange = function() { if( xmlHTTP.readyState == 4 && xmlHTTP.status == 200 ) { let resText = xmlHTTP.responseText; let myObject = JSON.parse( resText );
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/practice.js"></script>
</head>
<body>
<h2> Which student would you like to know about?</h2>
<form>
<input type="button" name="showResults" onclick="loadData();" value="Click to start"/>
</form>
<div id="container">
Your results are here
</div>
</body>
</html>
<?php
print <<<EOF
{"employees":[
{ "firstName":"Mark", "lastName":"Henry" },
{ "firstName":"Joe", "lastName":"Sterna" },
{ "firstName":"Pat", "lastName":"Garcia" }
]}
EOF;
?>function loadData() {
let results = document.getElementById("container");
//results.innerHTML = oStr;
alert("Click");
loadFromServer( results )
}
function loadFromServer( resContainer ){
// Use Ajax and xmlHttp to create the following output when you click the button
xmlHTTP.open("getData.php")
document.getElementById("container").innerHTML = this.resposeText;
// Uses AJax via the XMLHttpRequest();
let xmlHTTP = new XMLHttpRequest();
// open server: let serverURL = ;
alert( "inside load")
// This code make a request over the WWW for the serverURL data
xmlHTTP.open( "GET", serverURL, true);
xmlHTTP.send();
xmlHTTP.onreadystatechange = function() {
if( xmlHTTP.readyState == 4 && xmlHTTP.status == 200 ) {
let resText = xmlHTTP.responseText;
let myObject = JSON.parse( resText );
// Write code that parses the JSON output and writes first and last name to container
resContainer.innerHTML = `<b> Fist:</b> ${first} <b> Last:</b> ${last} <b> Major:${major}`;
}
}
}

Step by step
Solved in 2 steps with 1 images









