We need to write the code to send a message to the server.  When sending our message, we will use a POST request rather than a GET.  This allows us to send larger messages to the server because the overall size of a querystring is limited.  Creating a POST request is a lot like creating a GET request.

//Add a message to the chat server.
function sendChatText() {
	if (sendReq.readyState == 4 || sendReq.readyState == 0) {
		sendReq.open("POST", 'getChat.php?chat=1&last=' + lastMessage, true);
		sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		sendReq.onreadystatechange = handleSendChat; 
		var param = 'message=' + document.getElementById('txt_message').value;
		param += '&name=Ryan Smith';
		param += '&chat=1';
		sendReq.send(param);
		document.getElementById('txt_message').value = '';
	}							
}

As you can see, it's pretty much the same code, but when we call the send() method, we pass in an additional parameter. 

		var param = 'message=' + document.getElementById('txt_message').value;
		param += '&name=Ryan Smith';
		param += '&chat=1';
		sendReq.send(param);

We are passing three values in our POST data; the message text, the user's name(HardCoded to my name right now, and the current chat room (HardCoded to 1 right now).  We'll change these later to allow for different chat rooms and different user names.

On this request, instead of executing handleReceiveChat on the callback, we will execute a new function called handleSendChat.  This function is going to be pretty simple.

//When our message has been sent, update our page.
function handleSendChat() {
	//Clear out the existing timer so we don't have 
	//multiple timer instances running.
	clearInterval(mTimer);
	getChatText();
}

All we are doing here is clearing out any refresh timer that may be executing, and then making the call to refresh the chat.

This sets up our client side functionality for sending and receiving chat messages.  The one last piece of functionality that we want to add right now is the ability to reset our chat application.

//This cleans out the database so we can start a new chat session.
function resetChat() {
	if (sendReq.readyState == 4 || sendReq.readyState == 0) {
		sendReq.open("POST", 'chat/getChat.php?chat=1&last=' + lastMessage, true);
		sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		sendReq.onreadystatechange = handleResetChat; 
		var param = 'action=reset';
		sendReq.send(param);
		document.getElementById('txt_message').value = '';
	}							
}

We create a function that is pretty much the same as our sendChatText function, but instead of passing a message in the POST parameters, we will pass an "action" parameter with the value of reset.

Our callback for the resetChat request simply clears out any messages that are currently in the chat display and resets our refresh timer.

//This function handles the response after the page has been refreshed.
function handleResetChat() {
	document.getElementById('div_chat').innerHTML = '';
	clearInterval(mTimer);
	getChatText();
}

We'll finish off our JavaScript by adding our onclick handlers to our buttons.

<input type="button" name="btn_get_chat" id="btn_get_chat" value="Refresh Chat" onclick="javascript:getChatText();" />
<input type="button" name="btn_reset_chat" id="btn_reset_chat" value="Reset Chat" onclick="javascript:resetChat();" /><br />
<input type="text" id="txt_message" name="txt_message" style="width: 447px;" />
<input type="button" name="btn_send_chat" id="btn_send_chat" value="Send" onclick="javascript:sendChatText();" />

For each button click, we call it's corresponding JavaScript function.