Exercise : Grade-a-nator Revisited

Given this HTML/JS skeleton, add the necessary additional JavaScript code to use Ajax requests to save and load the student's grades from the server. This is similar to the previous version of this problem that used localStorage, but saving the grades on the server means the student can see them from any computer. (sample solution)

(see next slides)

Exercise , Part A: Lookup

Make it so that when the Look Up button is clicked, any saved scores on the server for the current user ID are loaded into the text boxes on the page. Make an Ajax GET request to grades.php with a parameter uwnetid. Test your code with user ID test for now. The result XML from grades.php has the following structure:

<scores>
	<score item="hw1">10</score>
	<score item="hw4">22</score>
	<score item="hw5">9</score>
	<score item="hw7">17</score>
	<score item="final">58</score>
</scores>

The server will send back a plain text response to your POST request letting you know what happened. Inject this text into the page in the area with the id of output.

Exercise , Part B: Save

Make it so that when the Save button is clicked, any non-blank scores typed into the page are saved on the server. Make an Ajax POST request to grades.php with parameter names/values such as:

name	value
uwnetid	jsmith
hw1	15
hw3	23
final	87

(see next slide for syntax of making an Ajax POST request)

Creating an Ajax POST request

var params = new FormData();
params.append("name", value);
params.append("name", value);

var ajax = new XMLHttpRequest();
ajax.onload = functionName;
ajax.open("POST", "url", true);
ajax.send(params);

• use a FormData object to gather your POST query parameters
• pass the FormData to the request's send method
• method passed to open should be changed to "POST"

Exercise Solution

You can view the solution JavaScript code here.