Exercise : Chat-It (by Eli White)

Given this HTML skeleton, write the necessary JavaScript code to make the page into a chat program. Read and submit chat messages by making Ajax requests to the provided (chatit.php) on Webster. (sample solution)

• Reading: every 5 seconds, make an Ajax GET request to ask the PHP script for all messages. Optional parameters: reverse returns output in reverse-chronological order; limit returns only that many most recent posts
• Submitting: When the 'Send!' button is clicked, make an Ajax POST request to the PHP script with the parameter msg to submit a message. (see next slide and/or Ajax POST slides)

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.