CSE383 Lab #10 Ajax solution




5/5 - (5 votes)

Objective: The objective of this exercise is to:
1. Continue working with JavaScript
2. Continue working with jQuery
3. Understand JSON data structures
4. Access Data service using jQuery/Ajax/JSON
5. Debug remote services
Submit: screenshots, your html file and a link to your web page
You may discuss this with your fellow students or the instructor.
Part #1: Understand the API
Estimated time: 10 minutes
In this assignment you will use AJAX to call a rest server on ceclnx01 that
provides current status information about ceclnx01.
The REST API has the following URL:
where FUNCTION is:
 loadavg: This returns a json data structure with output from the
current load average.
o https://ceclnx01.cec.miamioh.edu/~johnsok9/cse383/ajax/
 who: returns a json data structure with the current users
o https://ceclnx01.cec.miamioh.edu/~johnsok9/cse383/ajax/
 df: returns a json data structure with the current disk utilization
o https://ceclnx01.cec.miamioh.edu/~johnsok9/cse383/ajax/
 network: returns the current tx and rx byte count of the network
Page 1 of 3
CSE383 Lab #10 Ajax
o https://ceclnx01.cec.miamioh.edu/~johnsok9/cse383/ajax/
 ps: returns the current root process list
o https://ceclnx01.cec.miamioh.edu/~johnsok9/cse383/ajax/
Part #2: Review the given example
Estimated time: 5 minutes
I have made a short example which is enclosed including the JavaScript
This code calls the API (URL is a variable defining the base URL) and the done
handler, if it has data. data.df is the returned data from the ajax call. It is an
array so the code loops over each element of the array and extracts the
needed elements of the record in the array.
Part #3: Modify the jQuery Program
Estimated time: 30-60 minutes
Use the given code and copy the start JavaScript file to info.js so that will
make appropriate ajax calls to the rest api and update the display.
 Add JavaScript/jQuery/ajax code so that the boxes are updated with the
appropriate information.
o On the left is a list of all root processes
o In the middle is a box listing data from the load function.
o On the right is a box listing current network usage.
 Add code to update the time.
 When the ajax call fails, record the event in the log, newest event at
the top.
o note: 10% of the time the calls will fail so that you have
something to log
Page 2 of 3
CSE383 Lab #10 Ajax
 Screenshot
o Attach a screenshot of your completed web page after you have
changed it using jQuery
 File
o Attach the html and JavaScript files
 Link
o Add the link to the web page in the text area
Page 3 of 3