CSc 337 - Web Programming > Assignments > Assignment 12

Due: 9 Mar 2012, 11:59pm

In this assignment, you will be using AJAX to add more functionality to your chat application. To save time, you should continue to use your chat system from Assignment 10. If you were not able to finish either assignment or would prefer to not use your solution, you may use the Instructor Solutions as a starting point.

The following changes should be made to your solution from Assignment 10:

1. When the user sends a message (either by clicking "send" or by pressing Enter after typing), the message should be sent using AJAX to the server and saved. It can be sent to sendmessage.php or to a new script specifically to handle the AJAX request---your choice.
2. The above functionality should not replace being able to submit the form without AJAX, but should be an addition for users whose browsers support JavaScript (or who have it enabled).
3. Every 2000ms, you should use AJAX to ask the server if there are any new messages. The server should respond using JSON and should only send new messages rather than sending the entire message history. Any new messages should be appended to the history box with the same styling as any existing messages.

When asking the server for new messages, you can use the messageid column to help communicate which messages you already have. You might want another PHP file to help with getting messages.

To prevent a form from submitting, you can set an onsubmit handler to a function that returns false, for example:

document.getElementById("myform").onsubmit = function() {
    ....
    return false;
}

$("#myform").submit(function() {
    ....
    return false;
});

To add the AJAX functionality for sending messages while still letting the form POST normally (for users without JavaScript), run code inside your window.onload handler to attach the functionality to your page. This way, users without JavaScript won't run the window.onload code and therefore won't attempt the AJAX functionality.

You can use window.setInterval to specify a function to run periodically.

You may use jQuery for this assignment. It is recommended, but not required.

This is not part of the assignment. When you are done, think about ways that you might implement a "logged in users" list on the side of the chat history box, showing who all is currently using the chat room.

As detailed on the homework submission page, this homework must be on the class web server in a folder titled homework12 for it to be graded.