$25
CSCI128 - Lab 10 - Solved
Introduction to Web Technology
Programming Exercise
Initial Setup: Create a directory to store the code of this lab exercise. Follow the instructions below to start a web server at the newly created directory.
Running web server on Mac using command:
python3 -m http.server [port-number] -d [web-directory]
For example, to run on port 50000 and directory /Users/jsmith/Desktop/myweb
python3 -m http.server 50000 -d "/Users/jsmith/Desktop/myweb"
The website will be at the address: http://localhost:50000/
Running web server on Windows using command:
python -m http.server [port-number] -d [web-directory]
For example, to run on port 8000 and directory "C:\Users\jsmith\Desktop\my web"
python -m http.server 8000 -d "C:\Users\jsmith\Desktop\my web"
The website will be at the address: http://localhost:8000/
This is a sample code for making AJAX call to get JSON:
// make ajax query function makeAjaxQuery()
{
// create an XMLHttpRequest var xhttp = new XMLHttpRequest();
// create a handler for the readyState change xhttp.onreadystatechange = function() { readyStateChangeHandler(xhttp);
};
// making query by async call
xhttp.open("GET", "url-to-query-the-server", 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)
{
alert("AJAX request fail"); alert("readyState = " + xhttp.readyState); alert("status = " + xhttp.status);
}
// XMLHttpRequest success
function handleStatusSuccess(xhttp)
{
alert("AJAX request success");
var jsonText = xhttp.responseText; alert(jsonText);
// parse the json into an object var obj = JSON.parse(jsonText);
// display the object on the page display(obj);
}
// display the javascript object info on the webpage function display(obj)
{
// TODO
}
Question 1. Create a JSON document faculty.json with the following content:
{
"name": "Faculty of Engineering and Information Sciences",
"abbreviation": "EIS",
"email": "eis@uow.edu.au",
"web": "www.uow.edu.au/engineering-information-sciences"
}
Create a web page Question1.html .
On the web page, display a button “Get Faculty Details”.
When the user clicks this button, write an AJAX call to get the above JSON file, parse the JSON into a Javascript object, and then display the Javascript object on the webpage as follows:
Question 2. Create a JSON document airport.json with the following content:
{
"searchQuery": "Australia",
"searchResult": [
{
"airportName": "Sydney Airport",
"ICAO": "YSSY",
"IATA": "SYD",
"city": "Sydney",
"country": "Australia"
},
{
"airportName": "Canberra Airport",
"ICAO": "YSCB",
"IATA": "CBR",
"city": "Canberra",
"country": "Australia"
},
{
"airportName": "Brisbane Airport",
"ICAO": "YBBN",
"IATA": "BNE",
"city": "Brisbane",
"country": "Australia"
},
{
"airportName": "Adelaide Airport",
"ICAO": "YPAD",
"IATA": "ADL",
"city": "Adelaide",
"country": "Australia"
},
{
"airportName": "Hobart International Airport",
"ICAO": "YMHB",
"IATA": "HBA",
"city": "Hobart",
"country": "Australia"
},
{
"airportName": "Melbourne Airport",
"ICAO": "YMML",
"IATA": "MEL",
"city": "Melbourne",
"country": "Australia"
},
{
"airportName": "Perth Airport",
"ICAO": "YPPH",
"IATA": "PER",
"city": "Perth",
"country": "Australia"
},
{
"airportName": "Darwin International Airport",
"ICAO": "YPDN",
"IATA": "DRW",
"city": "Darwin",
"country": "Australia"
}
]
}
Create a web page Question2.html .
On the web page, display a button “Search Airport”.
When the user clicks this button, write an AJAX call to get the above JSON file, parse the JSON into a Javascript object, and then display the Javascript object on the webpage as follows:
